HTML5 offline cache

<span id="Label3"></p><p><p><strong><span style="color: #ff00ff;">Offline Resource Caching</span></strong><br>To enable users to continue accessing the Web app while offline, developers need to provide a cache manifest File. This file lists all the resources that need to be used offline, and the browser caches the resources locally. This section first shows the purpose of the cache manifest file by an example, then describes its writing method in detail, and finally explains how the cache is Updated.<br>It is best to use the Xxx.appcache file under IIS</p></p><p><p>Reason:</p></p><p><p></p></p><p><p><span style="color: #ff00ff;">Cache manifest Format</span><br>The following is a description of the format to be followed for writing the cache manifest File.</p></p> <ol> <ol> <li>The first line must be the CACHE MANIFEST.</li> <li>thereafter, each row is given a resource file name that needs to be cached.</li> <li>Whitelist of online access can be listed as Needed. All resources in the whitelist are not cached and will be accessed directly online when Used. Declares a whitelist using the NETWORK: identifier.</li> <li>If you want to add resources that need to be cached after the whitelist, you can use the Cache: identifier.</li> <li>If you want to declare a substitute URI when a URI cannot be accessed, you can use the FALLBACK: identifier. Each subsequent line contains two uris, and when the first URI is inaccessible, the browser attempts to use the second Uri.</li> <li>Note to start with the # number for a different line.</li> </ol> </ol><p><p>Mainfest manifest Format instance:</p></p><pre><pre><span style="color: #000000;">CACHE manifest# The above sentence must be #v1.</span> 0.0<span style="color: #000000;">#需要缓存的文件CACHE: a.jsb.css# does not need cached file network:</span>*<span style="color: #000000;">#无法访问页面FALLBACK:</span>404.html</pre></pre><p><p><span style="color: #ff00ff;"><strong>Update cache</strong></span><br>The application can wait for the browser to automatically update the cache, or it can trigger the update manually using the Javascript interface.<br><span style="color: #ff00ff;">Automatic Updates</span><br>In addition to caching resources for the first time a web app is accessed, the browser only updates the cache when the cache manifest file itself Changes. A change in the resource file in the cache manifest does not trigger the Update.<br><span style="color: #ff00ff;">Manual update</span><br>Developers can also use the Window.applicationcache interface to update the CACHE. The method is to detect the value of window.applicationCache.status, and if it is updateready, you can call window.applicationCache.update () to update the CACHE. The demo code is as Follows.<br>Listing 5 manually updating the cache</p></p><pre><pre>Window.applicationCache.addEventListener (' updateready ',<span style="color: #0000ff;">function</span><span style="color: #000000;">(e) { </span><span style="color: #0000ff;">if</span>( Window.applicationCache.status = =<span style="color: #000000;"> Window.applicationCache.UPDATEREADY) { Window.applicationCache.swapCache (); </span> <span style="color: #0000ff;">if</span> (confirm ("loding New?") ) <span style="color: #000000;">{ window.location.reload ()} } },</span><span style="color: #0000ff;">false</span>) </pre></pre><p><p><span style="color: #ff00ff;"><strong>Note the Point:</strong></span><br>1. For each index.html?id=1 or index.html?id=2, the index.html page is cached separately and can be viewed via Chrome browser resources/application cache</p></p><p><p>The mime-type of the 2.manifest file must be of type Text/cache-manifest</p></p><p><p>The path in the 3.mainfest file and the path that the page uses should always be, <span style="color: #ff00ff;">case-sensitive</span> ,</p></p><p><p><span style="color: #ff00ff;">Instance Code:</span></p></p><p><p>1. Create a new Clock.appcache file</p></p><pre><pre><span style="color: #000000;">CACHE MANIFEST #上面一句必须 # v1.</span> 0.4<span style="color: #000000;"> # requires cached files cache:</span>/view/<span style="color: #000000;">clock.html</span>/js/<span style="color: #000000;">clock.js</span>/js/jquery-1.11.3<span style="color: #000000;">. min.js# Files that do not need to be cached network:</span>/css/<span style="color: #000000;">clock.css# unreachable page fallback:</span>404.html</pre></pre><span class="cnblogs_code_collapse"><span class="cnblogs_code_collapse">View Code</span></span><p><p>2. Add clock.html file, reference mainfest file</p></p><p><p>Key Code:</p></p><pre><pre><span style="color: #0000ff;"><</span><span style="color: #800000;"></span><span style="color: #ff0000;">manifest</span><span style="color: #0000ff;">= ". /cache/clock.appcache "</span><span style="color: #0000ff;">></span></pre></pre><pre><span style="color: #0000ff;"><span style="color: #0000ff;"><!</span></span><span style="color: #ff00ff;"><span style="color: #ff00ff;">DOCTYPE HTML</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span><span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">HTML</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">Manifest</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">=".. /cache/clock.appcache "</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span><span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">Head</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span> <span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">Meta</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">http-equiv</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= "content-type"</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">content</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= "text/html; charset=utf-8"</span></span> <span style="color: #0000ff;"><span style="color: #0000ff;">/></span></span> <span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">title</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></</span></span><span style="color: #800000;"><span style="color: #800000;">title</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span> <span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">Meta</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">CharSet</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= "utf-8"</span></span> <span style="color: #0000ff;"><span style="color: #0000ff;">/></span></span> <span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">Link</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">href</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">=".. /css/clock.css "</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">rel</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= "stylesheet"</span></span> <span style="color: #0000ff;"><span style="color: #0000ff;">/></span></span><span style="color: #0000ff;"><span style="color: #0000ff;"></</span></span><span style="color: #800000;"><span style="color: #800000;">Head</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span><span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">Body</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span> <span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">P</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span><span style="color: #000000;">The time is <span style="color: #000000;">:</span></span><span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">Output</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">ID</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= "clock"</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></</span></span><span style="color: #800000;"><span style="color: #800000;">Output</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span> <span style="color: #0000ff;"><span style="color: #0000ff;"></</span></span><span style="color: #800000;"><span style="color: #800000;">P</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span> <span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">P</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span> <span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">a</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">href</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">= "404.html"</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span>404.html<span style="color: #0000ff;"><span style="color: #0000ff;"></</span></span><span style="color: #800000;"><span style="color: #800000;">a</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span> <span style="color: #0000ff;"><span style="color: #0000ff;"></</span></span><span style="color: #800000;"><span style="color: #800000;">P</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span> <span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">Script</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">src</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">=".. /js/jquery-1.11.3.min.js "</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></</span></span><span style="color: #800000;"><span style="color: #800000;">Script</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span> <span style="color: #0000ff;"><span style="color: #0000ff;"><</span></span><span style="color: #800000;"><span style="color: #800000;">Script</span></span><span style="color: #ff0000;"><span style="color: #ff0000;">src</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">=".. /js/clock.js "</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></</span></span><span style="color: #800000;"><span style="color: #800000;">Script</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span><span style="color: #0000ff;"><span style="color: #0000ff;"></</span></span><span style="color: #800000;"><span style="color: #800000;">Body</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span><span style="color: #0000ff;"><span style="color: #0000ff;"></</span></span><span style="color: #800000;"><span style="color: #800000;">HTML</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">></span></span></pre><span class="cnblogs_code_collapse"><span class="cnblogs_code_collapse">View Code</span></span><p><p>3. Project Structure</p></p><p><p></p></p><p><p>4. Monitoring Results:</p></p><p><p></p></p><p><p></p></p><p><p></p></p><p><p>HTML5 offline cache</p></p></span>