H5的离线缓存技术

发布于

离线存储可以将站点的一些文件存储在本地，它是浏览器自己的一种机制，将需要的文件缓存下来在没有网络的时候可以访问到缓存的对应的站点页面，包括html，js，css，img等等文件在有网络的时候，浏览器也会优先使用已离线存储的文件，返回一个200（from cache）头。这跟HTTP的缓存使用策略是不同的。

资源的缓存可以带来更好的用户体验，当用户使用自己的流量上网时，本地缓存不仅可以提高用户访问速度，而且大大节约用户的使用流量。

HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技术)，通过这个文件上的解析清单离线存储资源；把需要离线存储在本地的文件列在一个manifest配置文件中。

什么是Manifest

Manifest（清单）是一个简单的文本文件，它的扩展名是任意的，定义需要缓存的文件、资源，当第一次打开时，浏览器会自动缓存相应的资源。

Manifest 的特点
  • 离线浏览：即当网络断开时，可以继续访问你的页面。
  • 访问速度快：将文件缓存到本地，不需每次都从网络上请求。
  • 稳定性：做了Manifest缓存，遇到突发网络故障或者服务器故障，继续访问本地缓存。
  • Manifest属性，可以用来指定当前页面的Manifest文件。

创建一个和html同名的manifest文件，比如页面为index.html，那么可以建一个cache.manifest的文件，然后给index.html的html标签添加如下属性即可：

代码语言：javascript
复制
<html lang="en" manifest="cache.manifest"> 
或
<html manifest="http://www.example.com/index.manifest">
  1. manifest的引入可以使用绝对路径/相对路径，如果是绝对路径，manifest文件必须和当前站点挂在同一个域名下。
  2. manifest文件可以保存为任意的扩展名，但mime-type 必须是text/cache-manifest。

mime-type(Multipurpose Internet Mail Extensions)多用途互联网邮件扩展类型

代码语言：javascript
复制
<html lang="en" manifest="index.manifest">
或
<html lang="en" manifest="index.cache">

在服务器上部署时需要在服务器上添加相应的mime-type

  1. manifest 标签应该包含到你需要缓存资源的页面，当第一次打开该页面时，浏览器会解析该页面中的mainfest，并缓存里面列举的资源，同时该页面也会自动会被浏览器缓存，即使该页面没有在Manifest中列出。

如果page-url 页面中包含了 Manifest 属性则浏览器会将该页面中列举出来的资源分别保存，所以Manifest最好使用在SPA（单页应用）项目中。

在Chrome中，可以使用

代码语言：javascript
复制
chrome://appcache-internals/

查看你缓存在本地的资源文件。

Manifest文件结构

manifest文件，基本格式为三段： CACHE、NETWORK（可选）、FALLBACK（可选）

CACHE MANIFEST为固定格式，必须写在前面。以#号开头的是注释，可以是版本号，时间戳等等。

一般写版本号，用来在缓存的文件更新时，更改manifest：浏览器已经缓存下来的缓存，只有当manifest文件发生了改变才会更新本地缓存，即使你的代码发生了更新，本地浏览器也是不知道的，所以每次发布代码时你可以更改下#后面的信息比如版本号或者时间，告诉浏览器相应的更新本地缓存。

  1. 第一行是CACHE MANIFEST 这是必须需要的。  一般写版本号
  2. CACHE（必须） 标识出哪些文件需要缓存，相对路径/绝对路径。当第一次加载时，会被浏览器缓存在本地。
  3. Network  这一部分是要绕过缓存直接读取的文件，可以使用通配符 *，大多数网站使用 * 。 当使用* 时 表示出 CACHE指定文件外，其它所有页面都需要联网访问。
  4. FALLBACK  （可选） 当资源无法访问时，浏览器使用后备资源去替代。第二个表示后备页面。两个 URI 都必须使用相对路径并且与清单文件同源。可以使用通配符。

下面的例子中，如果无法建立因特网连接，则用 "404.html" 替代 /html5/ 目录中的所有文件。

代码语言：javascript
复制
FALLBACK:
/html5/ /404.html

下面的例子中，当任何页面无法访问时跳转到 "404.html"页。

代码语言：javascript
复制
FALLBACK:
*.html /404.html

注意： 第1点必须在第一行，2、3、4直接的顺序是随意的，并且在同一个manifest文件中可以出现多次，多次和一次效果一样。添加manifest属性的页面会自动被浏览器缓存，不需要再CACHE节点中再次添加。

如何更新缓存

如下三种方式，可以更新缓存：

  1. 更新manifest文件
  2. 通过javascript操作
  3. 清除浏览器缓存

给manifest添加或删除文件，都可更新缓存，如果更改了js而没有新增或删除，可通过版本号，来更新manifest文件。html5中引入了js操作离线缓存的方法，可以通过js代码手动更新本地缓存。

代码语言：javascript
复制
window.applicationCache.update();

如果用户清除了浏览器缓存（手动或用其他一些工具）会重新下载文件。

可使用代码手动更新manifest缓存，一旦webapp源码更新，会自动更新本地manifest缓存，使用户始终访问到最新的源码。

代码语言：javascript
复制
/**
 * webapp
 * 
 * 使用HTML5编写的移动Web应用，一个webapp几乎可以不加修改的运行在PC/Android/iOS等。
 * 优势：一套代码到处运行
 * 劣势：某些底层功能缺失，运行速度不如原生的App
*/
window.applicationCache.addEventListener('updateready', function(e) {
    if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
        window.applicationCache .swapCache();    //交换缓存，成功拿到新的缓存，在新的缓存中交换   
        if (confirm('A new version of this site is available. Load it?')) 
            window.location.reload();   //重新加载页面---刷新页面
        }
    } else {
        // Manifest didn't changed. Nothing new to server.
    }
}, false);  
//异步加载
#存储#缓存#manifest#浏览器#网络