HTML5 离线缓存

时间 2019-12-12

标签 html5 html 离线缓存栏目 HTML5 繁體版

原文原文链接

离线缓存

applicationCachecss

第一次加载后将数据缓存，若是没有清除缓存，下一次没有网络也能加载。

使用

1. 使用 manifest 属性，引入 .appcache 文件html

每一个指定了 manifest 的页面在用户对其访问时都会被缓存。若是未指定 manifest 属性，则页面不会被缓存（除非在 manifest 文件中直接指定了该页面）
manifest 文件的建议的文件扩展名是：.appcache

<!DOCTYPE html>
<html lang="en" manifest="demo.appcache">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
    </body>
</html>

2. 编写 demo.appcache 文件html5

CACHE MANIFEST 必须的，下面写须要缓存的文件，将在首次下载后进行缓存
NETWORK: 下面的文件永远不会被缓存，且离线时是不可用的
可使用星号来指示全部其余资源/文件都须要因特网链接浏览器
```
NETWORK:
*
```
FALLBACK: 若是没法创建因特网链接，则用 "offline.html" 替代 /html5/ 目录中的全部文件，第一个 url 是资源，第二个是替补

CACHE MANIFEST
logo.png
main.js

NETWORK:
index.css

FALLBACK:  
# 访问失败后 重定向
/html5/ /404.html

目前为止就实现了离线缓存缓存

缓存状态

window.applicationCache.status 查看缓存的当前状态网络

0 == UNCACHED === 未缓存
1 == IDLE === 空闲（缓存为最新状态）
2 == CHECKING === 检查中
3 == DOWNLOADING === 下载中
4 == UPDATEREADY === 更新就绪
5 == OBSOLETE === 缓存过时

缓存相关事件

1. updateready 当有新的缓存，并更新完之后，触发此事件设计

window.applicationCache.onupdateready = function(){
    alert("缓存更新完成");
},false);

2. progress 有新的缓存，在下载过程当中，会间断性触发code

event包含：loaded和total。loaded表明当前已经加载完成的文件，total为总共须要更新的文件数

applicationCache.onprogress = function(e){
    alert(applicationCache.status); //3...    3表示正在下载
},false);

3. cached 下载完成而且首次将应用程序下载到缓存中时触发

4. updaterady 更新完成，下载完成并将缓存中的应用程序更新后触发
触发此事件的时候，用户任然能够看到老版本的应用程序

5. error 浏览器处于离线状态，检查清单列表失败
当一个未缓存的应用程序引用一个不存在的清单文件，也会触发此事件

6. obsolete 若是一个缓存的应用程序引用一个不存在的清单文件会触发

7. checking 正在检查，每次载入一个设置了manifest属性的html文件，浏览器都会触发

8. downloading 正在下载

9. noupdate 检查更新结束，没有须要更新

HTML5 离线缓存

离线缓存

使用

缓存状态

相关方法

缓存相关事件