使用ApplicationCache离线缓存做一个h5离线应用

发表于 | 更新于: | 分类于 |
字数统计: 1,827 | 阅读时长 ≈ 7

使用ApplicationCache离线缓存做一个h5离线应用

原生app可以离线操作，在以前是相对web app的优势，web必须联网才能刷新使用。虽然所有浏览器都有缓存机制，但它们并不一定总能起到预期的作用。HTML5 使用 ApplicationCache 接口解决了由离线带来的部分难题。即使用户在离线状态下按了刷新按钮，您的应用也会正常加载和运行。

使用缓存接口可为您的应用带来以下三个优势：

  • 离线浏览 - 用户可在离线时浏览您的完整网站
  • 速度 - 缓存资源为本地资源，因此加载速度较快。
  • 服务器负载更少 - 浏览器只会从发生了更改的服务器下载资源。

引用清单文件

manifest属性

要启用某个应用的应用缓存，请在文档的 html 标记中添加 manifest 属性：


<html manifest="app.manifest">
  ...
html>

您应在要缓存的网络应用的每个页面上都添加 manifest 属性。如果网页不包含 manifest 属性，浏览器就不会缓存该网页（除非清单文件中明确列出了该属性）。这就意味着用户浏览的每个包含 manifest 的网页都会隐式添加到应用缓存。因此，您无需在清单中列出每个网页。

manifest 属性可指向绝对网址或相对路径，但绝对网址必须与相应的网络应用同源。

清单文件格式与 MIME 类型设置

清单文件可使用任何文件扩展名，但必须以正确的 text/cache-manifest MIME 类型提供。 下面是几件网络服务的配置例子：

Apache: 新建或者编辑现有的 .htaccess 文件，在里面加上一行

AddType text/cache-manifest .manifest

Nginx: 修改 mime.types 文件，在里面增加 manifest 文件的映射

text/cache-manifest manifest

Tomcat： 修改 web.xml 文件，在里面增加

  
    manifest  
    text/cache-manifest

清单文件结构

基本的清单格式：

CACHE MANIFEST
index.html
stylesheet.css
images/logo.png
scripts/main.js

您需要注意以下几点：

  • CACHE MANIFEST 字符串应在第一行，且必不可少。
  • 网站的缓存数据量不得超过 5 MB。不过，如果您要编写的是针对 Chrome 网上应用店的应用，可使用 unlimitedStorage 取消该限制。
  • 如果清单文件或其中指定的资源无法下载，就无法进行整个缓存更新进程。在这种情况下，浏览器将继续使用原应用缓存。

完整的清单格式：

CACHE MANIFEST
# daksfljs3kl23j3k43  hash 以便做版本控制

# 默认部分，显式缓存这些文件
CACHE:
/favicon.ico
index.html
stylesheet.css
images/logo.png
scripts/main.js

# 此部分下列出的文件是需要连接到服务器的白名单资源。无论用户是否处于离线状态，对这些资源的所有请求都会绕过缓存。
NETWORK:
login.php
/myapi
http://api.twitter.com

# 此部分是可选的，用于指定无法访问资源时的后备网页。其中第一个 URI 代表资源，第二个代表后备网页。两个 URI 必须相关，并且必须与清单文件同源。
# offline.jpg will be served in place of all images in images/large/
# offline.html will be served in place of all other .html files
FALLBACK:
images/large/ images/offline.jpg
*.html /offline.html

应用缓存只在其清单文件发生更改时才会更新。例如，如果您修改了图片资源或更改了 JavaScript 函数，这些更改不会重新缓存。您必须修改清单文件本身才能让浏览器刷新缓存文件。

这些部分可按任意顺序排列，且每个部分均可在同一清单中重复出现; 可使用通配符。

请注意： HTTP 缓存标头以及对通过 SSL 提供的网页设置的缓存限制将被替换为缓存清单。因此，通过 https 提供的网页可实现离线运行。chrome 未来将会禁止非 https 网页使用 ApplicationCache 功能（updated 2016-06-30）

更新缓存

应用在离线后将保持缓存状态，除非发生以下某种情况：

  • 用户清除了浏览器对您网站的数据存储。
  • 清单文件经过修改。请注意：更新清单中列出的某个文件并不意味着浏览器会重新缓存该资源。清单文件本身必须进行更改。
  • 应用缓存通过编程方式进行更新。

缓存状态

window.applicationCache 对象是对浏览器的应用缓存的编程访问方式。其 status 属性可用于查看缓存的当前状态：

var appCache = window.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;
};

用 js 调用 applicationCache.update() 将尝试更新用户的缓存（前提是已更改清单文件）。最后，当 applicationCache.status 处于 UPDATEREADY 状态时，调用 applicationCache.swapCache() 即可将原缓存换成新缓存。

var appCache = window.applicationCache;

appCache.update(); // Attempt to update the user's cache.

...

if (appCache.status == window.applicationCache.UPDATEREADY) {
  appCache.swapCache();  // The fetch was successful, swap in the new cache.
}

请注意：以这种方式使用 update() 和 swapCache() 不会向用户提供更新的资源。此流程只是让浏览器检查是否有新的清单、下载指定的更新内容以及重新填充应用缓存。因此，还需要对网页进行两次重新加载才能向用户提供新的内容，其中第一次是获得新的应用缓存，第二次是刷新网页内容。

好消息是，您可以避免重新加载两次的麻烦。要使用户更新到最新版网站，可设置监听器，以监听网页加载时的 updateready 事件：

// Check if a new cache is available on page load.
window.addEventListener('load', function(e) {

  window.applicationCache.addEventListener('updateready', function(e) {
    if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
      // Browser downloaded a new app cache.
      // Swap it in and reload the page to get the new hotness.
      window.applicationCache.swapCache();
      if (confirm('A new version of this site is available. Load it?')) {
        window.location.reload();
      }
    } else {
      // Manifest didn't changed. Nothing new to server.
    }
  }, false);

}, false);

applicationCache 事件

事件会用于监听缓存的状态。浏览器会对下载进度、应用缓存更新和错误状态等情况触发相应事件。以下代码段为每种缓存事件类型设置了事件监听器：

var appCache = window.applicationCache;
unction handleCacheEvent(e) {
  //...
}

function handleCacheError(e) {
  alert('Error: Cache failed to update!');
};

// 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);

如果清单文件或其中指定的资源无法下载，整个更新都将失败。在这种情况下，浏览器将继续使用原应用缓存。

原文： 应用缓存初级使用指南 html标准

0%