Cache Manifest离线缓存

最新推荐文章于 2025-05-26 09:58:40 发布

Mccree1997

最新推荐文章于 2025-05-26 09:58:40 发布

阅读量2k

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript

本文链接：https://blog.youkuaiyun.com/Mccree1997/article/details/79274611

javascript 专栏收录该内容

37 篇文章

订阅专栏

本文介绍了如何使用Cache Manifest文件进行离线缓存，包括appcache的工作原理、离线浏览的优势、缓存更新机制及注意事项。通过在HTML中添加manifest属性并编写Manifest文件，可以指定需要缓存的资源，提升网页访问速度并减轻服务器负载。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

首先，这个是基于一个appcache的缓存机制，当我们正确配置appcache后，我们如果再次访问该应用的时候，浏览器会首先检查manifest文件是否有变动，如果有变动就会把形影的改变更新下来，同时改变浏览器中的appcache，如果没有变动，就会直接把appcache的资源返回，基本流程是这样。

关于特点

离线浏览：用户可以在离线状态下浏览网站，类似优快云的MarkDown编辑器。
在某些方面更快！：因为数据会被保存在本地，所以速度会更快，类似于cookie；
减轻服务器的负载：浏览器只会下载在服务器上改变的资源。

让我们一起摇摆

我们只要在HTML中加入一个manifest即可

<html lang="en" manifest="(这里是src，后缀为.manifest)"></html>

之后我们要编写我们的Manifest文件

//一个典型的manifest文件结构
//必须写在前面的固定开头
CACHE MANIFEST
//这里注释，使用#号
#VERSION 1.3

//之后分为Cache,NetWork,FallBack部分
CACHE:
    test.css
NETWORK:
    *

Cache部分
- 我们通过cache部分来标识出哪些文件需要缓存，可以是相对路径也可以是绝对路径。（这一部分是必须存在的）

//例如
index.css
http:www.burningay.top/index.css

NetWork是绕过缓存直接读取的文件，可以使用通配符*，当我们设定了一个文件为NetWork的时候，他就永远不会比缓存，且离线不可用

NETWORK:
index.css
//当使用通配符的时候表示所有文件都需要因特网连接后才可以访问

FallBack，这个部分指定了一个后备页面，当资源无法访问的会后，浏览器会使用该页面，该段落由两个URL组成，第一个为资源页面，第二个为后备资源

//如果所有文件的资源无法访问，就为用户提供一个404.html的文件
FALLBACK:
*.html/404.html

我们了解了上面几点，我们就可以开始更新我们的缓存了

更新manifest文件
通过javascript操作(window.applicationCache.update())
清除浏览器缓存

但是我们必须注意下面几点

浏览器对于缓存的容量限制可能不一样
如果manifest文件或者其中的某一个文件不能下载，那么整个更新过程都会失败，浏览器会引用之前的缓存
同源问题，在引用manifest的HTML必须和manifest文件同源。
FallBack中的文件必须和manifest文件同源
当manifest的文件改变时，就满足了更新缓存的第一个条件
站点中其他页面即使没有设置manifest属性，请求的资源如果在缓存中，也会从缓存中访问

当然，如果你了解grunt，你可能就会了解一个grunt-manifest的东西这里就不做了解