您的位置: 首页  >  文章  >  html5 离线缓存 Manifest 属性、.appcache文件

html5 离线缓存 Manifest 属性、.appcache文件

分类: 文章 • 2023-11-19 23:19:22

参考一：HTML5离线缓存Manifest  

https://www.cnblogs.com/xiangling/p/5626117.html

参考二：https://m.jb51.net/html5/438218.html （这篇文章的 manifest 配置文件例子少了一句 CACHE 代码，会导致缓存是表白）

 

manifest 的作用：

简单来说manifest能让你的应用在无网的情况下也能访问。

1、离线浏览，无网情况下也能正常访问；

2、更快的加载速度，缓存在本地访问速度自然更快；

3、减轻服务请求压力，文件缓存后不需要再次请求，只需要请求需要更新的文件。

如何使用？

使用离线缓存有两步：

  1. 在 html 文件 <html> 标签设置属性 manifest="xx.appache"
  2. 创建Manifest文件（缓存配置文件  xx.appcache） 

1.html 文件设置属性 manifest

<!DOCTYPE html>
<html manifest="test.appcache">
....
</html>

<html> 标签设置属性 manifest，且属性值为缓存配置文件（接下来第二步会说到怎么创建并配置这个文件）。

如果一个页面没有 manifest属性，它将不会被缓存（除非在manifest文件中显式指定了这 个页面）。这意味着只要用户访问的页面包含manifest属性，它都将会被加入application cache中

2. 创建Manifest文件（缓存配置文件  xx.appcache）

manifest 文件是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）。

manifest 文件可分为三个部分：

CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存：

  • CACHE MANIFEST -文件申明
  • CACHE- 需要缓存的文件。需要相对路径

NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存
FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）

CACHE MANIFEST    //文件声明
# 2012-02-21 v1.0.0     //#号后面是注释

CACHE            //要缓存的文件。需要相对路径
/theme.css    
/logo.gif    
/main.js    
   
NETWORK:         //不缓存的文件。需要与服务器连接时才读取
login.asp         //如果 NETWORK 下面使用 *,表示所有其他文件需要连接服务器读取，不缓存
   
FALLBACK:        //无法访问时的回退页面
#当html5这个文件夹文件无法访问时，都使用 404 页面
/html5/ /404.html    
#当无法访问index这个文件时，都使用 404 页面
/index.js  /404.html

可以使用星号来指示所有其他资源/文件都需要因特网连接：*

NETWORK:
*

 manifest 文件：test.appcache

CACHE MANIFEST
CACHE
pig.jpg

NETWORK:
*

FALLBACK:
/test.html /404.html

 html 文件：test.html

<!DOCTYPE html>
<html manifest="test.appcache">
<head>
    <meta charset="utf-8">
    <link href="" rel="stylesheet">
</head>
<style>

</style>
<body>
    <img src="pig.jpg">
    <img src="Koala.jpg">
</body>
</html>

联网时： 

html5 离线缓存 Manifest 属性、.appcache文件、

断网时网页

html5 离线缓存 Manifest 属性、.appcache文件

 

 

3、如何更新缓存

a.修改manifest文件，修改备注也会触发更新缓存

b.通过js清除缓存，window.applicationCache.update();

c.清除浏览器缓存

注意事项：

1. 站点离线存储的容量限制是5M
2. 如果manifest文件，或者内部列举的某一个文件不能正常下载，整个更新过程将视为失败，浏览器继续全部使用老的缓存
3. 引用manifest的html必须与manifest文件同源，在同一个域下
4. 在manifest中使用的相对路径，相对参照物为manifest文件
5. CACHE MANIFEST字符串应在第一行，且必不可少
6. 系统会自动缓存引用清单文件的 HTML 文件
7. manifest文件中CACHE则与NETWORK，FALLBACK的位置顺序没有关系，如果是隐式声明需要在最前面
8. FALLBACK中的资源必须和manifest文件同源
9. 当一个资源被缓存后，该浏览器直接请求这个绝对路径也会访问缓存中的资源。
10. 站点中的其他页面即使没有设置manifest属性，请求的资源如果在缓存中也从缓存中访问
11. 当manifest文件发生改变时，资源请求本身也会触发更新

 

相关推荐