• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    Html5应用程序缓存(Cache manifest)

    一、作用

    离线浏览 - 根据文件规则把资源缓存在本地,脱机依然能够访问资源,联网会直接使用缓存在本地的文件。优化加载速度,节约服务器资源。

    二、适用场景

    正如 manifest 英译的名字:离线应用程序缓存,这项功能是设计给会有离线场景的应用来使用,例如:需要离线使用的手机APP/H5,亦或是PC端的纯静态页面。

    三、问题

    1.服务器资源更新后显示滞后需要多刷新一次页面

    1. 首次在载入页面时,浏览器会判断是否引入了 manifest,若检测到引入,则下载并按文件规则缓存资源。
    2. 再次载入页面时,便会根据 manifest 中规定的缓存文件使用本地缓存而不是请求服务器资源。
    3. 当 manifest 文件更新时,页面加载已经进行,但是缓存更新尚未完成,便会先使用旧 manifest 所缓存的文件,同时浏览器会将新的 manifest 文件里的缓存文件下载下来,若想看到最新的静态资源需要刷新下页面重新加载一次。

    2.全量加载

    当 manifest 文件更新时,所有的资源都要全部被下载一次,并且其中一个出现异常会导致整个 manifest 运行异常。

    3.W3C标准及浏览器支持

    作为 H5 的新属性,初衷是用来构造离线应用的,缓存网站资源的话原本浏览器的缓存机制(304)已经很好了,没必要再使用 manifest 做缓存;实际上因为使用反响并不好,W3C正在废弃 manifest。

    四、使用方法

    首先在标签 <html> 中指定 manifest 配置文件。

    <html manifest="manifest.appcache">

    配置文件 manifest.appcache。

    CACHE MANIFEST
    # 井号备注,这边可以放版本更新时间,修改备注算更新 manifest 文件
    CACHE:
    # 首次下载 CACHE 后列出来的文件后缓存到本地。
    /favicon.ico
    /main.css
    
    NETWORK:
    # NETWORK 下的文件不可被缓存,必须要与服务器连接。
    login.php
    
    FALLBACK:
    # 一行放两个路径,第一个是访问资源,第二个是替补;当无法访问前一个资源时,用后一个资源代替之。
    /cat/ /404.html

    注意

    manifest 会把当前页面缓存下来,所以若想更新当前页,只能先更新 manifest 文件。

    五、总结

    manifest 适用于需要离线运行的应用(定时器,计算器,阅读器等工具);而需要经常发布频繁更新的网站,这种离线缓存机制并不适合。

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

    上一篇:Html5之title吸顶功能
    下一篇:详解android与HTML混合开发总结
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

    Html5应用程序缓存(Cache manifest) Html5,应用程序,缓存,Cache,