zoukankan      html  css  js  c++  java
  • 应用程序缓存--manifest

    应用程序缓存(Application Cache)为应用带来三个优势:

    • 离线浏览 - 用户可在应用离线时使用它们
    • 速度 - 已缓存资源加载得更快
    • 减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。

    manifest文件的位置在html标签中,

        <!DOCTYPE html>
        <html manifest="index.manifest">
    
        </html>
    

    manifest 文件是简单的文本文件,它告知浏览器被缓存的内容(以及不缓存的内容)。

    manifest 文件可分为三个部分:

    • CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
    • NETWORK - 在此标题下列出的文件需要与服务器的连接,且不会被缓存
    • FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面(比如 404 页面)

    下面这个例子:

        CACHE MANIFEST
        #update at Fri Jun 17 2016 20:02:37 GMT+0800 (CST)
    
        NETWORK:
        *
        # *表示通配符,#表注释
        CACHE:
        build/lib.js
        style.css
        build/app.js    
    
        FALLBACK:
        /html 404.html
        #访问路径 文件
    

    manifest 文件的写入可由gulp等(利用node.js的fs模块)在打包的时候写入

        var fs = require('fs');
        var workDir = 'demo';  //目录
        var cacheFiles = ['build/lib.js', 'build/app.js']; //要缓存的文件其实除了指定,还可以从index.html文件中去匹配src、href
        var cacheConArr = ['CACHE MANIFEST','#update at '+new Date(),'','NETWORK:','*','','CACHE:'].concat(cacheFiles).concat(['FALLBACK:','/html 404.html']);
        fs.writeFileSync(workDir+'index.manifest',cacheConArr.join('
    '));
    

    在首次下载manifest 文件中的缓存,可看到这个

    更新缓存

    • 用户清空浏览器缓存
    • manifest文件被修改
    • 由程序来更新应用缓存
        window.applicationCache.onupdateready = function(){
            location.reload();
        }   
    
  • 相关阅读:
    koa2 + webpack 热更新
    koa2在node6中如何运行
    浅拷贝和深拷贝的理解和实现
    angular2多组件通信流程图
    angular2 表单的理解
    ssh-add Could not open a connection to your authentication agent.
    outlook同步异常
    ctrl+c ctrl+d ctrl+z 的区别和使用场景
    grep 详解
    mysql 事务隔离级别 详解
  • 原文地址:https://www.cnblogs.com/lyre/p/5606014.html
Copyright © 2011-2022 走看看