HTML5离线应用程序

时间:2011-02-22 15:22:05

标签: html5 app-offline.htm

我正在尝试在单个html页面中应用html5离线应用程序。 Google,Jquery或其他一些可以轻松启用离线缓存的服务提供商是否有单行链接API (比如我们使用Google地图链接)? 我是html5和Javascript的新手,请帮帮我。

非常感谢。

2 个答案:

答案 0 :(得分:3)

它并不像单链接包含那么容易。至少,您需要一个清单文件。此文件告诉您的应用程序应缓存哪些文件。您可以在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
);

希望这有帮助。

答案 1 :(得分:1)

通常,通过创建一个清单文件来启用html5脱机功能,该清单文件描述了应由浏览器缓存应用程序中的哪些资源。

阅读本文

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

以及一般谷歌搜索'html5 manifest'。

我不知道单页应用程序会带来多大好处;您的应用需要能够离线运行才能获得收益。因此,例如,电子邮件RIA可能允许您脱机撰写邮件,并将其存储在本地存储中,直到您联机并可以发送邮件。同样,它可能会在线时加载和存储您的电子邮件,因此您可以在离线时查看邮件...

相关问题