HTML5 Application Cache - manifest

时间 2019-12-06

标签 html5 html application cache manifest 栏目 HTML5 繁體版

原文原文链接

manifest 文件

要向使用application cache 须要为页面的html标签添加manifest属性，属性值是manifest文件路径，能够使用同源的绝对地址，也能够使用相对地址。css

<!doctype html>
<html lang="zh" manifest="main.manifest">
</html>

application cache是经过mannifest文件来管理的，manifest文件是简单的文本文件，内容是须要被缓存供离线使用的文件列表，及不须要被缓存或读取缓存失败的文件控制。mannifest文件能够使用任意拓展名，但须要在服务器中添加MIME类型匹配，使用apache比较简单，若是使用.manifest做为拓展名在apache配置文件中添加html

AddType text/cache-manifest .appcache

使用IIS的话经过界面找到添加MIME窗口添加便可jquery

如何配置

下面是一个manifest文件的示例apache

main.manifest浏览器

 1 CACHE MANIFEST
 2 #version 0.2.0
 3 #date: Nov 24 2013
 4 
 5 CACHE:
 6 css/reset.css
 7 css/main.css
 8 js/jquery.js
 9 images/bg.png
10 images/bg_hl.jpg
11 images/icons/yes.png
12 images/icons/top.png
13 offline.html
14 
15 NETWORK:
16 *
17 
18 FALLBACK:
19 index.html offline.html

1. 文件的第一行必须是 CACHE MANIFEST缓存

2. ＃开头的行做为注释语句，因此文件中关于版本和日期都是注释，为了方便维护服务器

3. 网站的缓存不能超过5M网络

4. 文件资源路径能够使用绝对路径也能够使用相对路径app

5. 文件列表中任意一个缓存失败都会致使整个缓存失效，浏览器hui按没有application cache处理网站

6. 既能够站点使用同一个minifest文件，也能够每一个页面使用一个

而后看一下CACHE、NETWORK、和FALLBACK三条指令语句

CACHE：指明须要缓存的资源文件,浏览器会自动缓存带有manifest属性的html页面，因此yinyongwmanifest文件的页面不用写在里面

NETWORK：不须要缓存的文件，名字就叫网络工做嘛，能够使用通配符

FALLBACK：没法访问缓存文件的备选文件，也能够使用通配符，上边例子的配置，读取不到index.html的话就会跳转至offline.html

manifest文件在检测到须要更新后，在下次载入页面时才会生效，故若是想在当次生效就须要手动刷新页面，代码以下：

window.addEventListener("load", function (e) {
        window.applicationCache.addEventListener("updateready", function () {
          if (window.applicationCache.status === window.applicationCache.UPDATEREADY) {
              try{
                applicationCache.swapCache();
              }catch(e){}
            getOriginNativeHeader();
            window.location.reload();
          }
        }, false)
      }, false);