HTML Application Cache 离线应用

lavnFan 发布于2019-08-02 15:55 / 1260人阅读

摘要：简称是一套针对缓存应用资源的接口，通过此套接口，可以实现网页的离线访问，或者在网速较慢的情况下也能快速打开页面。的状态为以下几种网页未缓存闲置检查中下载中更新已准备完毕更新失败内主动更新的流程

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

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

页面入口 index.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.

GPU云服务器云服务器 application-cache 离线应用离线应用功能 Application

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/54363.html

前端性能优化（Application Cache篇）

摘要：在文档中，可以指定清单文件的相对路径和绝对。具体做法是在中嵌入一个，中的页面的标签包含属性引用文件，里面定义了需要缓存的文件。这比较适合一些页面上的应用以及静态的不经常变更的页面。其会缓存载体页面也是由于其机制。正巧看到在送书，于是乎找了找自己博客上记录过的一些东西来及其无耻的蹭书了~~~ 小广告：更多内容可以看我的博客之前在segmentfault上刷问题看到一个关于mani...

mj 2019-08-19 14:42 评论0 收藏0
构建离线WEB应用

摘要：使用离线应用构建应用服务端服务器配置创建文件客户端构建，并在标签上添加属性，属性值是服务器上配置的缓存资源列表的文件名配置相关事件，创建离线文件内容将状态代码转化成状态离线应用创建即使没有互联网连接也可以使用的应用程序。 HTML5新增了localstroage和application cache做离线缓存，两种缓存各有应用的场景，今天我们说说application cache这种方案...

shleyZ 2019-08-26 13:48 评论0 收藏0
构建离线WEB应用

摘要：使用离线应用构建应用服务端服务器配置创建文件客户端构建，并在标签上添加属性，属性值是服务器上配置的缓存资源列表的文件名配置相关事件，创建离线文件内容将状态代码转化成状态离线应用创建即使没有互联网连接也可以使用的应用程序。 HTML5新增了localstroage和application cache做离线缓存，两种缓存各有应用的场景，今天我们说说application cache这种方案...

lk20150415 2019-08-30 10:55 评论0 收藏0