Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
amandakelake opened this issue Feb 10, 2018 · 0 comments
Open

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

amandakelake opened this issue Feb 10, 2018 · 0 comments
Labels
Web 网络、性能、优化类

Comments

@amandakelake
Copy link
Owner

amandakelake commented Feb 10, 2018 •
edited
Loading

网上关于缓存的文章非常多，但大都比较片面，或者只对某块进行了深入，没有把它们联系起来，本着系统学习的态度，笔者进行了整理，写成一个小系列，方便自己也方便他人共同学习，有写的不对的地方欢迎指正。
缓存（一）——缓存总览：从性能优化的角度看缓存
缓存（二）——浏览器缓存机制：强缓存、协商缓存
缓存（三）——数据存储：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的资源返回，基本流程如下：

852b9072-b413-413a-9483-6e27efd15e0f

二、使用

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博客】
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Web 网络、性能、优化类
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@amandakelake