• 应用程序缓存--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();
        }   
    
  • 相关阅读:
    vue+vant打包,vue+vant-ui小程序,微信支付
    vue+vant-ui移动端适配 宽高
    web前端面试题
    vue面试题及答案(1)
    vue的增删改查(简单版)
    Vue computed计算属性
    vue.cli的安装配置
    Create React App 安装时出现的错误解决方法
    运行node文件的多种方式
    怎么把node配置成全局打开
  • 原文地址:https://www.cnblogs.com/lyre/p/5606014.html
Copyright © 2020-2023  润新知