web App 不比 PC, 有性能和流量方面的考虑, 离线应用越来越重要, 虽然浏览器有缓存机制, 但是时常不靠谱, 更何况普通情况下 html 文件是没法缓存的, 断网之后一切 over.
什么是 manifest?
简单来说 manifest 能让你的应用在无网的情况下也能访问.
它有三大优势:
1, 离线浏览, 无网情况下也能正常访问;
2, 更快的加载速度, 缓存在本地访问速度自然更快;
3, 减轻服务请求压力, 文件缓存后不需要再次请求, 只需要请求需要更新的文件.
如何使用?
- manifest="demo.appcache">
- ...
你需要在你想要缓存的 Web App 的每一页中都包含 manifest 属性. 如果一个页面没有 manifest 属性, 它将不会被缓存 (除非在 manifest 文件中显式指定了这 个页面). 这意味着只要用户访问的页面包含 manifest 属性, 它都将会被加入 application cache 中. 这样, 就不用在 manifest 文件中指定需要缓存哪些页面了.
Manifest 属性可以指定一个绝对 URL 或是一个相对路径, 但是, 一个绝对 URL 需要和 Web App 是同源的. 一个 manifest 文件可以是任何扩展文件类型, 但必须有正确的 mime-type, 比如在 Apache 中添加
"AddType text/cache-manifest .appcache".
Manifest 文件
manifest 文件是简单的文本文件, 它告知浏览器被缓存的内容 (以及不缓存的内容).
manifest 文件可分为三个部分:
CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
NETWORK - 在此标题下列出的文件需要与服务器的连接, 且不会被缓存
FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面 (比如 404 页面)
一个完整的 manifest 文件:
- CACHE MANIFEST
- 2012-02-21 v1.0.0
/theme.CSS
/logo.gif
/main.JS
- NETWORK:
- login.asp
- FALLBACK:
- /html5/ /404.HTML
CACHE MANIFEST 是必须的,# 后面是注释, 下面是需要 cache 的文件, 需要相对路径, NETWORK 是需要每次请求加载的文件.
可以使用星号来指示所有其他资源 / 文件都需要因特网连接:
NETWORK:
*
FALLBACK 是如果无法建立因特网连接, 则用 "404.html" 替代 /html5/ 目录中的所有文件.
更新机制
有三种方式更新 manifest 缓存:
1, 用户清空浏览器缓存;
2,manifest 文件被修改, 哪怕是注释 (所以可以通过修改注释来更新文件)
3, 由程序来更新
缓存状态
在程序可以通过 Windows.applicationCache 属性来查看缓存状态.
- var appCache = Windows.applicationCache;
- switch (appCache.status) {
- case appCache.UNCACHED: // UNCACHED == 0
- return 'UNCACHED';
- break;
- case appCache.IDLE: // IDLE == 1
- return 'IDLE';
- break;
- case appCache.CHECKING: // CHECKING == 2
- return 'CHECKING';
- break;
- case appCache.DOWNLOADING: // DOWNLOADING == 3
- return 'DOWNLOADING';
- break;
- case appCache.UPDATEREADY: // UPDATEREADY == 4
- return 'UPDATEREADY';
- break;
- case appCache.OBSOLETE: // OBSOLETE == 5
- return 'OBSOLETE';
- break;
- default:
- return 'UKNOWN CACHE STATUS';
- break;
- };
为了通过编程更新 cache, 首先调用 applicationCache.update(). 这将会试图更新用户的 cache(要求 manifest 文件已经改变). 最后, 当 applicationCache.status 处于 UPDATEREADY 状态时, 调用 applicationCache.swapCache(), 旧的 cache 就会被置换成新的.
- var appCache = Windows.applicationCache;
- appCache.update(); // Attempt to update the user's cache.
- ...
- if (appCache.status == Windows.applicationCache.UPDATEREADY) {
- appCache.swapCache(); // The fetch was successful, swap in the new cache.
- }
注意: 像这样使用 update() 和 swapCache() 并不会将更新后的资源 呈现给用户. 这仅仅是让浏览器检查 manifest 文件是否发生了更新, 然后下载指定的更新内容, 重新填充 App cache. 因此, 要让用户看到更新后的内容, 需要两次页面下载, 一次是更新 App cache, 一次是更新页面内容.
为了让用户能看到你的站点的最新版本, 设置一个监听器来监听页面加载时的 updateready 事件.
- // Check if a new cache is available on page load.
- Windows.addEventListener('load', function(e) {
- Windows.applicationCache.addEventListener('updateready', function(e) {
- if (Windows.applicationCache.status == Windows.applicationCache.UPDATEREADY) {
- // Browser downloaded a new App cache.
- // Swap it in and reload the page to get the new hotness.
- Windows.applicationCache.swapCache();
- Windows.location.reload();
- } else {
- // Manifest didn't changed. Nothing new to server.
- }
- }, false);
- }, false);
监听事件, 对不同的状态做出相应处理:
- var appCache = Windows.applicationCache;
- // Fired after the first cache of the manifest.
- appCache.addEventListener('cached', handleCacheEvent, false);
- // Checking for an update. Always the first event fired in the sequence.
- appCache.addEventListener('checking', handleCacheEvent, false);
- // An update was found. The browser is fetching resources.
- appCache.addEventListener('downloading', handleCacheEvent, false);
- // The manifest returns 404 or 410, the download failed,
- // or the manifest changed while the download was in progress.
- appCache.addEventListener('error', handleCacheError, false);
- // Fired after the first download of the manifest.
- appCache.addEventListener('noupdate', handleCacheEvent, false);
- // Fired if the manifest file returns a 404 or 410.
- // This results in the application cache being deleted.
- appCache.addEventListener('obsolete', handleCacheEvent, false);
- // Fired for each resource listed in the manifest as it is being fetched.
- appCache.addEventListener('progress', handleCacheEvent, false);
- // Fired when the manifest resources have been newly redownloaded.
- appCache.addEventListener('updateready', handleCacheEvent, false);
如果 manifest 文件或者该文件中指定的某个资源下载失败, 那么整个更新都会失败. 在这种情况下, 浏览器会继续试用老的 application cache.
注意事项:
站点离线存储的容量限制是 5M
如果 manifest 文件, 或者内部列举的某一个文件不能正常下载, 整个更新过程将视为失败, 浏览器继续全部使用老的缓存
引用 manifest 的 HTML 必须与 manifest 文件同源, 在同一个域下
在 manifest 中使用的相对路径, 相对参照物为 manifest 文件
CACHE MANIFEST 字符串应在第一行, 且必不可少
系统会自动缓存引用清单文件的 HTML 文件
manifest 文件中 CACHE 则与 NETWORK,FALLBACK 的位置顺序没有关系, 如果是隐式声明需要在最前面
FALLBACK 中的资源必须和 manifest 文件同源
当一个资源被缓存后, 该浏览器直接请求这个绝对路径也会访问缓存中的资源.
站点中的其他页面即使没有设置 manifest 属性, 请求的资源如果在缓存中也从缓存中访问
当 manifest 文件发生改变时, 资源请求本身也会触发更新
来源: http://www.bubuko.com/infodetail-3068860.html