HTML5 автономное приложение - PullRequest
       35

HTML5 автономное приложение

0 голосов
/ 22 февраля 2011

Я пытаюсь применить html5 офлайн-приложение на одной html-странице. Существует ли какой-либо API-интерфейс с одной строкой (как мы используем ссылку на карту Google) от Google, Jquery или какого-либо другого поставщика услуг, который может легко включить автономный кэш? Я новичок в html5 и Javascript, пожалуйста, помогите мне.

Большое спасибо.

Ответы [ 2 ]

3 голосов
/ 22 февраля 2011

Это не так просто, как включение в одну ссылку.Как минимум, вам нужен файл манифеста.Этот файл сообщает вашему приложению, какие файлы следует кэшировать.Вы можете прочитать больше об этом здесь .Вот пример содержимого файлов манифеста:

Содержимое манифеста

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

Вы также можете прочитать это довольно хорошее руководство по приложениям манифеста / офлайн, здесь .

После того, как у вас есть файл манифеста, вы можете использовать следующий код для проверки вашего манифеста, а также того, что кэшируется, кэшируется и т. д.

Код отладки:

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 голос
/ 22 февраля 2011

В общем, возможности html5 офлайн активируются созданием файла манифеста, который описывает, какой ресурс в вашем приложении должен кэшироваться браузером.

Читать это

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

, а также общий поиск в Google по запросу "html5 manifest".

Я не знаю, какую выгоду принесет одностраничное приложение;Ваше приложение должно иметь возможность работать в автономном режиме, чтобы получить выгоду.Так, например, RIA электронной почты может позволить вам составить сообщение в автономном режиме и сохранить его в локальном хранилище, пока вы не подключитесь к Интернету и не сможете отправить сообщение.аналогично, он может загружать и хранить ваши электронные письма, когда вы онлайн, чтобы вы могли просматривать ваши сообщения в автономном режиме ...

...