H5离线存储Manifest的原理

这篇文章将为大家详细讲解有关H5离线存储Manifest的原理，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。

10余年的西乡塘网站建设经验，针对设计、前端、开发、售后、文案、推广等六对一服务，响应快，48小时及时工作处理。成都全网营销推广的优势是能够根据用户设备显示端的尺寸不同，自动调整西乡塘建站的显示方式，使网站能够适用不同显示终端，在浏览器中调整网站的宽度，无论在任何一种浏览器上浏览网站，都能展现优雅布局与设计，从而大程度地提升浏览体验。成都创新互联公司从事“西乡塘网站设计”,“西乡塘网站推广”以来，每个客户项目都认真落实执行。

什么是Manifest：

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

Manifest 的特点：

• 离线浏览：即当网络断开时，可以继续访问你的页面。

• 访问速度快：将文件缓存到本地，不需每次都从网络上请求。

• 稳定性：做了Manifest缓存，遇到突发网络故障或者服务器故障，继续访问本地缓存。

Manifest的使用：

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

 或

manifest 的引入可以使绝对路径也可以是相对路径，如果你使用的是绝对路径，你的manifest文件必须和你的站点挂在同一个域名下。
manifest文件你可以保存为任意的扩展名，但mine-type 必须是 text/cache-manifest。

  或  

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

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

Manifest文件结构：

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

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

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

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

CACHE MANIFEST
     #v0.1
     CACHE:
       js/index.js
             css/index.css
     NETWORK:
             images/logo.png
     FALLBACK:
      *.html /404.html /* / /404.html 或 /html/ /404.html 也可*/

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

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

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

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

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

FALLBACK:
/html5/ /404.html

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

FALLBACK:
*.html /404.html

注意： 1 必须在第一行 2、3、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);

关于H5离线存储Manifest的原理就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。