html5 manifest 离线缓存知识点

1.最大缓存容量为 5M.

2.manifest文件需要配置正确的MIME-type,即“text/cache-manifest”,这个是在web服务器上进行配置。

②编写.manifest文件,文件名可自定义,例如hahaha.manifest

CACHE MANIFEST(声明头部文件,必须大写)

CACHE:(这里写需要缓存的文件,例如js、css、img)

js/index.js

css/index.css

img/aaa.jpg

NETWORK(需要网络调用的文件,大写)

*

FALLBACK (在此标题下,列出的文件规定页面无法访问的回退页面)

404.xml

  

③编写HTML文件(.manifest文件和HTML页面同级)

<!doctype html>

  <html manifest="hahaha.manifest">(html标签里写入你的.manifest文件)

    ...
    
  <script>(script标签里需要添加版本更新的监听)

      applicationCache.addEventListener("updateready",function(e){

        if(applicationCache.status==applicationCache.UPDATEREADY){
          applicationCache.swapCache();//使用新版本资源
          window.location.reload();//刷新页面
        }
      },false);
  </script>
        
            ...

  3.控制台里可以找到离线缓存的文件

二,离线缓存的有点

1.减少服务器的负载,提高资源加载速率。

2.离线浏览,方便用户在离线时使用。

缺点:

1.更新完版本后,必须刷新一次才会启动新版本。

2.进入离线存储的页面,如果不更新版本,会将其当做静态页面不请求。

3.无法进行灰度发布(即一部分人使用旧版本,一部分人使用新版本)。

4.无法增量更新

三,传统浏览器缓存的区别

1.离线缓存是针对整个应用,浏览器缓存是单个文件。

2.离线缓存断网还可以打开页面,浏览器缓存不行。

3.离线缓存可以主动通知浏览器更新资源。

原文地址:https://www.cnblogs.com/winyh/p/9273789.html