H5之manifest 应用缓存机制

迷南。 2023-10-10 15:59 69阅读 0赞

#### H5之manifest 应用缓存机制 ####

*   *   *  manifest 应用缓存机制
         *   *  好处
             *  编写 manifest 缓存清单
             *  参考

#### manifest 应用缓存机制 ####

虽然 manifest 已经被web标准弃用 但是还是值得了解一下

使用 manifest 进行缓存

##### 好处 #####

*  离线访问: 即使服务器挂了, 或者没有网络, 用户依然可以正常浏览网页内容.
 *  访问更快: 数据存在于本地, 省去了浏览器发起http请求的时间, 因此访问更快, 移动端效果更为明显.
 *  降低负载: 浏览器只在manifest文件改动时才去服务器下载需要缓存的资源, 大大降低了服务器负载.

##### 编写 manifest 缓存清单 #####

CACHE MANIFEST
    # v1.0.0
    content.css
    
    NETWORK:
    app.js
    
    FALLBACK:
    /other 404.html

由 CACHE, NETWORK 和 FALLBACK 组成

其中第一行必须以 CACHE MANIFEST 开头, 后可跟若干字符注释, 注释从\#号开始. 跟在 CACHE MANIFEST 行后的文件, 每行列出一个, 这些文件是需要缓存的文件. 因此 content.css 会被缓存, 不需要访问网络.

第二段内容以 NETWORK: 开始, 跟在该行后的文件表示需要访问网络. 如: app.js 将直接从网络上下载, 并不走manifest cache, 如果除了第一段中缓存的文件以外, 其他文件都从网络上获取, 那么此时可将 app.js 改为 \* (通配符).

第三段内容以 FALLBACK: 开始, 跟在该行后的文件表示会有一个替代方案. 如: 当访问 /other 路径时, 如果访问失败, 那么将自动加载 404.html 作为替代.

##### 参考 #####

[聊一聊H5应用缓存-Manifest | louis blog (louiszhai.github.io)][H5_-Manifest _ louis blog _louiszhai.github.io]  
Photo by [Mailchimp][] on [Unsplash][]

[H5_-Manifest _ louis blog _louiszhai.github.io]: https://louiszhai.github.io/2016/11/25/manifest/
[Mailchimp]: https://unsplash.com/@mailchimp?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText
[Unsplash]: https://unsplash.com/?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText