码迷,mamicode.com
首页 > 移动开发 > 详细

HTML Application Cache 离线应用

时间:2020-04-04 22:38:31      阅读:89      评论:0      收藏:0      [点我收藏+]

标签:idle   doc   article   oca   版本   新版   限制   date   man   

HTML Application Cache (简称 HAC)是一套针对缓存应用资源的接口,通过此套接口,可以实现网页的离线访问,或者在网速较慢的情况下也能快速打开页面。
使用 HAC 之后,浏览器在请求网站的时候首先会去 cache 内查找,如果命中,则会加载命中的资源,如果没有,则向服务端请求,再加载。

HAC 与浏览器传统的缓存(304 的那种)不同的是,HAC 是将整套资源作为一个集合缓存下来,缓存的键是入口页面的 url,而不是针对单个文件缓存。
一个 HAC 网站所需要的资源是通过缓存清单( manifest) 来告知浏览器的,在清单里声明的资源将会被浏览器加入页面的 HAC 。
manifest 的声明方法如下:

页面入口 index.html

<!doctype html>
<html manifest="/app.manifest">
    <header>
    <script src="/app.js"></script>
    </header>
</html>

/app.manifest 文件

CACHE MANIFEST
/index.html
/app.js

之后浏览器就会将 index.html 和 app.js 作为一整套资源加入到 HAC。

在浏览器第二次打开页面的时候,就会在 HAC 中找到缓存,并加载。
但同时浏览器还会尝试去请求 /app.manifest 文件,如果请求成功,就会拿新旧两个版本的 manifest 去对比,如果发现文件内容有更改,则会按照新版 manifest 中列出的文件重新请求一遍资源,并更新到 HAC 里。如果这时有一个文件访问出错,就会导致 HAC 停止更新。但是默认 chrome 会限制 5MB 的缓存大小,如果是 chrome 应用,并想要更多缓存空间的话,则需要声明 unlimitedStorage。
在浏览器内也可以手动的运行 applicationCache.update() 去触发检查。然后通过 applicationCache.status 去判断是否需要更新 HAC。
applicationCache.status 的状态为以下几种 :

appCache.UNCACHED = 0; // 网页未缓存
appCache.IDLE = 1; // 闲置
appCache.CHECKING = 2; // 检查中
appCache.DOWNLOADING = 3; // 下载中
appCache.UPDATEREADY = 4; // 更新已准备完毕
appCache.OBSOLETE = 5; // 更新失败
// js 内主动更新的流程
var appCache = window.applicationCache;
 
window.applicationCache.addEventListener(‘updateready‘, function(e) {
    if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
        window.applicationCache.swapCache();
        if (confirm(‘A new version of this site is available. Load it?‘)) {
                window.location.reload();
        }
    }
});
  
appCache.update(); // Attempt to update the user‘s cache.

本文转载于:HTML Application Cache 离线应用

HTML Application Cache 离线应用

标签:idle   doc   article   oca   版本   新版   限制   date   man   

原文地址:https://www.cnblogs.com/jlfw/p/12634399.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!