缓存（四）——离线应用缓存：App Cache => Manifest

Question

缓存（四）——离线应用缓存：App Cache => Manifest

amandakelake opened this issue 6 years ago · comments

网上关于缓存的文章非常多，但大都比较片面，或者只对某块进行了深入，没有把它们联系起来，本着系统学习的态度，笔者进行了整理，写成一个小系列，方便自己也方便他人共同学习，有写的不对的地方欢迎指正。
缓存（一）——缓存总览：从性能优化的角度看缓存
 缓存（二）——浏览器缓存机制：强缓存、协商缓存
 缓存（三）——数据存储：cookie、Storage、indexedDB
缓存（四）——离线应用缓存：App Cache => Manifest
缓存（五）——离线应用缓存：Service Worker(还没写，先占坑)

请注意：该特性已经从 Web 标准中删除，本文只是作为了解所用

Manifest 是 H5提供的一种应用缓存机制, 基于它web应用可以实现离线访问(offline cache)
浏览器还提供了应用缓存的API：applicationCache

一、基础与流程

manifest是一个后缀名为minifest的文件，在文件中定义那些需要缓存的文件，支持manifest的浏览器将会按照manifest文件的规则，像文件保存在本地，从而在没有网络链接的情况下，也能访问页面。

当第一次正确配置app cache后，再次访问该应用时，浏览器会首先检查manifest文件是否有变动，如果有变动就会把相应的变得更新下来，同时改变浏览器里面的app cache，如果没有变动，就会直接把app cache的资源返回，基本流程如下：

二、使用

1、html文件指定manifest配置

在html标签中指定manifest文件, 便表示该网页使用manifest进行离线缓存.
该网页内需要缓存的文件列表需要在 demo.appcache 文本文件中指定.

<!DOCTYPE HTML>
<html manifest="demo.appcache">
...
</html>

2、manifest缓存清单

首行必须以CACHE MANIFEST开头，标准的三段式

// 需要缓存的文件，无论是否有网络连接，都从缓存读取
CACHE MANIFEST
/theme.css
/logo.gif
/main.js

// 文件 "login.asp" 永远不会被缓存，且离线时是不可用的
NETWORK:
login.asp

// 如果无法建立因特网连接，则用 "offline.html" 替代 /html5/ 目录中的所有文件
FALLBACK:
/html5/ /404.html

三、更新缓存

1、更新manifest文件
2、通过javascript操作

window.applicationCache.update();

3、清除浏览器缓存

四、关于它被废除的一些评论

即使在线，文件总是从 AppCache 中来
只有 Manifest 变化时文件才会更新，一旦变化总会更新所有文件
不支持 conditional download，破坏响应式设计
失败的 fallback 页面，无法区分网络错误和状态码
重定向被处理为访问失败

后记

感谢您耐心看到这里，希望有所收获！

如果不是很忙的话，麻烦点个star⭐【Github博客传送门】，举手之劳，却是对作者莫大的鼓励。

我在学习过程中喜欢做记录，分享的是自己在前端之路上的一些积累和思考，希望能跟大家一起交流与进步，更多文章请看【amandakelake的Github博客】