HTML5 автономная проблема: показать другую страницу в автономном режиме - PullRequest
Новая
       27

HTML5 автономная проблема: показать другую страницу в автономном режиме

2 голосов
/ 24 февраля 2011

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

Это мой манифест: 

CACHE MANIFEST

# v15 Minute: 18


CACHE:
/Scripts/jquery-1.4.4.min.js
/Content/Site.css
# Documents
/content/lulo_flower.jpg

NETWORK:
/
#Detail screens
/Home/Details/2

FALLBACK:
/ /?offline=true
/Home/Details/2  /Home/Details/2?offline=true

Обратите внимание, что я не хочу / и / Home / Details / 2 кэшироваться. Вместо этого я хочу использовать онлайн-версии, когда я в сети, и я хочу отображать /? Offline = true и / Home / Details / 2? Offline = true, когда я не в сети.

Сайт работает в автономном режиме, но две вещи идут не так:

1) Пункты «СЕТЬ» не соблюдаются. Когда я захожу на страницу /, она загружается в кэш, вероятно, из-за ссылки на манифест в html-теге домашней страницы ().

хуже:

2) Предметы 'FALLBACK' не соблюдаются. При просмотре веб-сервера в автономном режиме / просто показывает оригинальную версию (без? Offline = true), а / Home / Details / 2 не может быть найден. Версии? Offline = true, однако, находятся в кэше: когда я захожу на них вручную, когда веб-сервер находится в автономном режиме, они отображаются просто отлично.

Дополнительная информация: Консоль разработчика Chrome при первом открытии страницы: 

Application Cache Progress event (0 of 5) http://localhost:51034/Scripts/jquery-1.4.4.min.js
:51034/:65online: yes, event: progress, status: downloading
Application Cache Progress event (1 of 5) http://localhost:51034/content/lulo_flower.jpg
:51034/:65online: yes, event: progress, status: downloading
Application Cache Progress event (2 of 5) http://localhost:51034/Content/Site.css
:51034/:65online: yes, event: progress, status: downloading
Application Cache Progress event (3 of 5) http://localhost:51034/?offline=true
:51034/:65online: yes, event: progress, status: downloading
Application Cache Progress event (4 of 5) http://localhost:51034/Home/Details/2?offline=true
:51034/:65online: yes, event: progress, status: downloading
Application Cache Progress event (5 of 5) 
:51034/:65online: yes, event: progress, status: downloading

Видно, что автономные резервные страницы загружаются просто отлично, но перенаправление не работает. Более того: загадочный 6-й предмет загружается.

Есть идеи? Есть ли лучшие подходы к этой проблеме?

Ответы [ 2 ]

1 голос
/ 26 февраля 2011

Для тех, кто хочет попробовать это с помощью автономного кэша: не надо.Я думаю, что это невозможно.Решение, изложенное в другом ответе, не сработало для меня.В конце концов, я реализовал метод из следующего сообщения в блоге: http://ednortonengineeringsociety.blogspot.com/2010/10/detecting-offline-status-in-html-5.html.

Для меня это работает как шарм.

Если вы не уверены, что этоне может быть сделано с автономным кешем HTML5;Я пытался следующий минимальный пример:

/ cache.manifest: 

CACHE MANIFEST

FALLBACK:
/html5/content.html /html5/offline.html

NETWORK:
/html5/content.html

/ html5 / index.html 

<!DOCTYPE HTML>
<html manifest="/cache.manifest">
<body>
    <a href=/html5/content.html>content</a> 
</body>
</html>

/ html5 / content.html 

<!DOCTYPE HTML>
<html>
<body>
    Online! :)
</body>
</html>

/ html5 / offline.html 

<!DOCTYPE HTML>
<html manifest="/cache.manifest">
<body>
    Offline..   
</body>
</html>

Поскольку content.html находится в разделе «NETWORK».запасной вариант никогда не сработает.

Другой вариант - полностью удалить раздел «СЕТЬ».В этом случае резерв работает, но всякий раз, когда пользователь посещает файл content.html, он будет кэширован.- Когда пользователь переходит в автономный режим, онлайн-версия по-прежнему отображается.

iow: кажется, что автономный кэш HTML5 не подходит для проведения различия между пользователем, находящимся в сети или в автономном режиме.

1 голос
/ 26 февраля 2011

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

function errorCache(event) {
    // Either a download error occurred or the user is offline
    var offlineURL = 'http://myurl.com/?offline=true'
    window.location = offlineURL;
}

window.applicationCache.addEventListener("error", errorCache, false);

Также у вас есть и /, и /Home/Details/2 в разделах NETWORK и FALLBACK. Это может быть причиной ненужного горя.

...