HTML5 离线应用答案

【问题标题】：HTML5 Offline ApplicationHTML5 离线应用
【发布时间】：2011-07-02 02:10:32
【问题描述】：

我正在尝试在单个 html 页面中应用 html5 离线应用程序。是否有任何由 Google、Jquery 或其他服务提供商提供的单线链接 API（如我们使用 Google 地图链接）可以轻松启用离线缓存？我是 html5 和 Javascript 新手，请帮帮我。

非常感谢。

【问题讨论】：

标签： html app-offline.htm

【解决方案1】：

通常，通过创建一个清单文件来启用 html5 离线功能，该清单文件描述了您的应用中的哪些资源应由浏览器缓存。

阅读本文

http://www.webreference.com/authoring/languages/html/HTML5-Application-Caching/

还有一般的谷歌搜索“html5 manifest”。

我不知道单页应用程序会受益多少；您的应用需要能够离线运行才能获得好处。例如，电子邮件 RIA 可能允许您离线撰写消息，并将其存储在本地存储中，直到您在线并可以发送消息。同样，它可能会在在线时加载和存储您的电子邮件，以便您可以在离线时查看您的邮件...

【讨论】：

【解决方案2】：

这并不像单链接包含那么简单。至少，您需要一个清单文件。该文件告诉您的应用程序应该缓存哪些文件。您可以阅读更多关于 here 的信息。这是清单文件内容的示例：

清单内容

CACHE MANIFEST
/clock.css
/clock.js
/clock-face.jpg

您还可以阅读这个关于清单/离线应用程序的非常好的教程，here。

一旦你有一个清单文件，你可以使用下面的代码来测试你的清单，以及什么是缓存，什么不是缓存，等等。

调试代码：

var cacheStatusValues = [];
cacheStatusValues[0] = 'uncached';
cacheStatusValues[1] = 'idle';
cacheStatusValues[2] = 'checking';
cacheStatusValues[3] = 'downloading';
cacheStatusValues[4] = 'updateready';
cacheStatusValues[5] = 'obsolete';

// Listeners for all possible events
var cache = window.applicationCache;
cache.addEventListener('cached', logEvent, false);
cache.addEventListener('checking', logEvent, false);
cache.addEventListener('downloading', logEvent, false);
cache.addEventListener('error', logEvent, false);
cache.addEventListener('noupdate', logEvent, false);
cache.addEventListener('obsolete', logEvent, false);
cache.addEventListener('progress', logEvent, false);
cache.addEventListener('updateready', logEvent, false);

// Log every event to the console
function logEvent(e) {
    var online, status, type, message;
    online = (navigator.onLine) ? 'yes' : 'no';
    status = cacheStatusValues[cache.status];
    type = e.type;
    message = 'online: ' + online;
    message+= ', event: ' + type;
    message+= ', status: ' + status;
    if (type == 'error' && navigator.onLine) {
        message+= ' (prolly a syntax error in manifest)';
    }
    console.log(message);
}

// Swap in newly downloaded files when update is ready
window.applicationCache.addEventListener(
    'updateready', 
    function(){
        window.applicationCache.swapCache();
        console.log('swap cache has been called');
    }, 
    false
);

希望这会有所帮助。

【讨论】：