HTML5的应用缓存

Posted 2020-08-06 Scott Jeremy-用代码改变世界

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML5的应用缓存相关的知识，希望对你有一定的参考价值。

HTML5:提供一种应用缓存机制，使得基于web的应用程序可以离线运行。开发者可以使用 Application Cache (AppCache) 接口设定浏览器缓存的数据并使得数据离线有效。在处于离线状态时，即使用户点击刷新按钮，应用也能正常加载与工作。

使用应用缓存可以得到以下益处：

离线浏览: 用户可以在离线状态下浏览网站内容。
更快的速度: 因为数据被存储在本地，所以速度会更快。
减轻服务器的负载: 浏览器只会下载在服务器上发生改变的资源。

用法：只需要在你的页面头部加上一个 manifest 的属性就可以了。

<!DOCTYPE html>
<html manifest = "cache.manifest">
...
</html>

cache.manifest文件的书写方式：

CACHE MANIFEST
# v1 2011-08-14
# 这是一个完整的页面
index.html
cache.html
style.css
image1.png

NETWORK:
network.html

FALLBACK:
/ fallback.html

1.CACHE:表示需要离线存储的资源列表，由于包含manifest文件的页面将被自动离线存储，所以不需要把页面自身也列出来。
2.NETWORK:表示在它下面列出来的资源只有在在线的情况下才能访问，他们不会被离线存储，所以在离线情况下无法使用这些资源。不过，如果在CACHE和NETWORK中有一个相同的资源，那么这个资源还是会被离线存储，也就是说CACHE的优先级更高。
3.FALLBACK:表示如果访问第一个资源失败，那么就使用第二个资源来替换他，比如上面这个文件表示的就是如果访问根目录下任何一个资源失败了，那么就去访问fallback.html。

HTML5中离线储存对象 window.applicationCache 常用的事件：

1.oncached:当离线资源存储完成之后触发这个事件，这个是文档的说法，我在Chrome上面测试的时候并没有触发这个事件。
2.onchecking:当浏览器对离线存储资源进行更新检查的时候会触发这个事件
3.ondownloading:当浏览器开始下载离线资源的时候会触发这个事件
4.onprogress:当浏览器在下载每一个资源的时候会触发这个事件，每下载一个资源就会触发一次。
5.onupdateready:当浏览器对离线资源更新完成之后会触发这个事件
6.onnoupdate:当浏览器检查更新之后发现没有资源更新的时候触发这个事件

以上是关于HTML5的应用缓存的主要内容，如果未能解决你的问题，请参考以下文章