HTML5 应用程序缓存

迷南。 2022-09-21 01:48 163阅读 0赞

通过创建cache manifest文件，可以轻松的创建web应用的离线版本。（web应用可进行缓存，并可在没有因特网连接时进行访问）  
**优势：**  
1.离线浏览–用户可在应用离线时使用它们  
2.速度–已缓存资源加载的更快  
3.减少服务器负载–浏览器只从服务器下载更新过或者更改过的资源  
1.Cache Manifest基础  
如果需要用应用程序缓存，在文档`<html>`标签中包含manifest属性

<!DCOTYPE HTML>
    <html manifest="demo.appcache">
    ...
    </html>

每个指定了manifest的页面在用户对其访问时都会被缓存。如果未指定manifest属性，则页面不会被缓存。  
manifest文件的建议文件扩展名是：“.appcache”  
2.manifest文件  
manifest文件是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）  
manifest文件分为三部分：  
cache-manifest:在此标题下列出的文件将在首次下载后进行缓存  
network:此标题下列出的文件需要与服务器连接，且不会被缓存  
fallback:此标题下列出的文件规定当页面无法访问时的回退页面（比如404页面）  
**cache manifest**  
第一行，CACHE MANIFEST是必需的

CACHE MANIFEST
    /theme.css
    /logo.gif
    /main.js

manifest文件列出了三个资源：一个css文件，一个gif图像，以及一个javascript文件。当manifest文件加载后，浏览器会从网站的根目录下载这三个文件，然后，无论用户何时与因特网断开连接，这些资源依然是可用的。  
**NETWORK**  
文件“login.php”永远不会被缓存，且离线时是不可以用的。

NETWORK;
    login.php

可以用\*指示所有其他资源或文件都需要因特网的连接

NETWORK
    *

**FALLBACK**  
如果无法建立因特网连接，则用”offline.html”替代/html5/目录中的所有文件

FALLBACK
    /html/  /offline.html

第一个URI是资源，第二个是替补。  
3.更新缓存  
一旦应用被缓存，它就会保持缓存知道发生下列情况：  
用户清空浏览器缓存  
manifest文件被修改  
由程序来更新应用缓存  
一个完整的manifest文件

CACHE MANIFEST
    # 2012-02-21 v1.0.0 //注释行
    /theme.css
    /logo.gif
    /main.js
    
    NETWORK:
    login.php
    
    FALLBACK:
    /html/ /offline.html

应用缓存会在其manifest文件更改时被更新。如果编辑了一幅图片，或者修改了一个javascript函数，这些改变都不会被重新缓存。更新注释行中的日期和版本号是一种使浏览器重新缓存文件的办法。