H5离线缓存机制-manifest

时间 2019-11-11

标签 h5 离线缓存机制 manifest 繁體版

原文原文链接

简介：Manifest 其实就是web应用的一种缓存机制，主要用于如今webapp应用中，它是浏览器本身的一种机制，随着移动互联网时代的到来，网络可靠性下降，若是咱们已经将须要的文件缓存下下来，一旦网络没法访问，也能继续访问。javascript

并且作好相应资源的缓存能够带来更好的用户体验，当用户使用本身的流量上网时，本地缓存不只能够提升用户访问速度，并且大大节约用户的使用流量。html

先来看下咱们公司实际项目中的使用状况。（阿里淘点点也使用了manifest）html5

第一次加载时：总体请求是392KB耗时1.82sjava

当本地作了manifest缓存后：大小变成了2.6KB，请求时间缩短为757ms，这大大提升了用户的体验和节约了用户的流量。web

可是Manifest不是W3C标准的机制，使用过程当中会或多或少碰见一些坑，但整体仍是利大于弊，咱们公司项目和淘点点都使用了Manifest。下面的截图显示各浏览器对Manifest的支持状况。chrome

什么是Manifest：浏览器

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

Manifest 的特色：服务器

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

Manifest的使用：网络

html新增了一个manifest属性，能够用来指定当前页面的manifest文件。

建立一个和html同名的manifest文件，好比页面为index.html，那么能够建一个index.manifest的文件，而后给index.html的html标签添加以下属性便可：

<html lang="en" manifest="index.manifest"> 或<html manifest="http://www.example.com/index.manifest">

一、manifest 的引入可使绝对路径也能够是相对路径，若是你使用的是绝对路径，你的manifest文件必须和你的站点挂在同一个域名下。

二、manifest文件你能够保存为任意的扩展名，但mine-type 必须是 text/cache-manifest。

<html lang="en" manifest="index.manifest"> 或 <html lang="en" manifest="index.cache"> 在服务器上部署时须要在服务器上添加相应的mie-type

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

注意： "/page-url/", "/page-url/?something", "/page-url/?something-else" Manifest 会当成不一样的页面，若是page-url 页面中包含了 Manifest 属性则浏览器会将该页面中列举出来的资源分别保存，因此Manifest最好使用在SPA（单页应用）项目中。

在Chrome中，可使用

chrome://appcache-internals/ 查看你缓存在本地的资源文件。

Manifest文件结构：

接下来详细说说manifest的细节，一个典型的manifest文件代码结构像下面这样：

manifest文件，基本格式为三段： CACHE， NETWORK，与 FALLBACK，其中NETWORK和FALLBACK为可选项。

而第一行CACHE MANIFEST为固定格式，必须写在前面。

以#号开头的是注释，能够是版本号，时间戳等等。通常会在这写个版本号，用来在缓存的文件更新时，更改manifest的做用：浏览器已经缓存下来的缓存，只有当manifest文件发生了改变才会更新本地缓存，即便你的代码发生了

更新，本地浏览器也是不知道的，因此每次发布代码时你能够更改下#后面的信息好比版本号或者时间，告诉浏览器相应的更新本地缓存。

一、第一行是CACHE MANIFEST 这是必须须要的。

二、CACHE（必须）标识出哪些文件须要缓存，能够是相对路径也能够是绝对路径。这里列举出来的文件，当第一次加载下来时，会被浏览器缓存在本地。

三、NETWORk 这一部分是要绕过缓存直接读取的文件，可使用通配符 *，大多数网站使用 * 。当使用* 时表示出 CACHE指定文件外，其它全部页面都须要联网访问。

四、FALLBACK （可选）当资源没法访问时，浏览器使用后备资源去替代。第二个表示后备页面。两个 URI 都必须使用相对路径而且与清单文件同源。可使用通配符。

下面的例子中，若是没法创建因特网链接，则用 “404.html” 替代 /html5/ 目录中的全部文件。

FALLBACK:
/html5/ /404.html

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

FALLBACK:
*.html /404.html


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

如何更新缓存

以下三种方式，能够更新缓存：

更新manifest文件
经过javascript操做
清除浏览器缓存

给manifest添加或删除文件，均可更新缓存，若是咱们更改了js，而没有新增或删除，前面例子中注释中的版本号，能够很好的用来更新manifest文件。

html5中引入了js操做离线缓存的方法，下面的js能够手动更新本地缓存。

window.applicationCache.update();

若是用户清除了浏览器缓存（手动或用其余一些工具）都会从新下载文件。

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

 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);

参考资料：一、http://www.html5rocks.com/en/tutorials/appcache/beginner/二、http://yanhaijing.com/html/2014/12/28/html5-manifest/本文主要用于本身学习笔记，若有错误之处，还望不吝指正，谢谢。