Автономное веб-приложение для iOS: загружает мой манифест, но не работает в автономном режиме - PullRequest
73 голосов
/ 06 декабря 2010

Я пишу веб-приложение для использования в автономном режиме на iOS. Я создал манифест, представляю его как text/cache-manifest, и он обычно работает нормально при работе в Safari.

Если я добавлю его в качестве приложения на домашний экран, а затем включу режим «В самолете», приложение вообще не сможет его открыть - я получаю сообщение об ошибке и предлагает закрыть приложение. (Я думал, что это было целью автономного приложения!)

  • Когда я загружаю приложение в первый раз, когда в сети, я вижу в своих журналах, что оно запрашивает каждую страницу, указанную в манифесте.

  • Если я отключу режим «В самолете» и загрузлю приложение, я увижу первый запрашиваемый файл - мой файл main.html (который указан в манифесте и имеет атрибут manifest=...). Затем он запрашивает манифест и все мои другие файлы, получая 200 для всех (и 304 для всего, что было запрошено во второй раз во время этой загрузки).

  • Когда я загружаю страницу в Chrome и щелкаю по ней, журналы показывают, что единственное, чего он пытается достичь на сервере, это "/favicon.ico" (это 404, а я этого не делаю думаю iOS Safari пытается загрузить, во всяком случае). Все файлы, перечисленные в манифесте, действительны и обслужены без ошибок.

  • Инспектор Chrome в разделе «Кэш приложения» перечисляет все кэшированные файлы, которые я перечислил, и которые я ожидаю. Весь набор файлов занимает около 50 КБ, что намного меньше любого найденного мной автономного ресурса.

Должно ли это работать, то есть я должен иметь возможность создавать автономные приложения для iOS, используя только HTML / CSS / JS? И где я могу выяснить, почему он не работает в автономном режиме?

(Связано, но звучит для меня не совсем так, поскольку речь идет о Safari, а не об отдельном приложении: " Невозможно заставить веб-приложение работать в автономном режиме на iPod ")

Ответы [ 13 ]

22 голосов
/ 27 июля 2011

Я подтверждаю, что имя «cache.manifest» решило проблему автономного кэширования в IOS 4.3. Другое имя просто не сработало.

7 голосов
/ 06 декабря 2010

Я считаю, что отладка автономных приложений HTML5 - это боль.Я обнаружил, что код из этой статьи помог мне понять, что случилось с моим приложением:

http://jonathanstark.com/blog/2009/09/27/debugging-html-5-offline-application-cache/

Отладка кэша автономных приложений HTML 5 от Jonathan Stark

Если вы хотите предоставить автономный доступ к вашему веб-приложению, кэш автономных приложений, доступный в HTML5, просто ужасен.Тем не менее, это гигантский PITA для отладки, особенно если вы все еще пытаетесь разобраться с ним.

Если вы боретесь с манифестом кэша, добавьте следующий JavaScript на свою главную страницу HTML и просмотритеВыведите на консоль, используя Firebug в Firefox или Отладка> Показать консоль ошибок в Safari.

Если у вас есть какие-либо вопросы, PLMK в комментариях.

HTH,
j

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

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

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

window.applicationCache.addEventListener(
    'updateready',
    function(){
        window.applicationCache.swapCache();
        console.log('swap cache has been called');
    },
    false
);

setInterval(function(){cache.update()}, 10000);
5 голосов
/ 16 марта 2011

Иногда группа кеша приложения переходит в плохое состояние в MobileSafari - она ​​загружает каждый элемент в кеш, а затем запускает событие общей ошибки кеша в конце.Кеш-группа приложения согласно спецификации основана на абсолютном URL-адресе манифеста.Я обнаружил, что когда возникает эта ошибка, изменение пути к манифесту (например, cache2.manifest и т. Д.) Дает вам новую группу кеша и позволяет обойти проблему.Я могу поручиться, что все наши веб-приложения работают в автономном режиме в полноэкранном режиме с 4.2 и 4.3.

3 голосов
/ 16 марта 2011

Я обнаружил, что очистка кэша Safari после включения режима «В самолете» является эффективным способом проверки работоспособности приложения в автономном режиме.

Меня иногда вводили в заблуждение, что кэш приложения работал, когда он не работал.

3 голосов
/ 17 января 2011

Ни одно автономное веб-приложение (начиная с iOS 4.2) не может работать без подключения к Интернету (что также означает режим полета) при использовании <meta name="apple-mobile-web-app-capable" content="yes" /> в разделе заголовка html. Я проверял это на каждом примере, который я видел, и на тех, которые используют Safari для визуализации сайта, но он работает, но когда вы добавляете метатег, он не будет работать. Попробуйте ваше приложение без него, и вы поймете, что я имею в виду.

2 голосов
/ 10 мая 2011

Я боролся с этой проблемой iOS 4.3 «нет автономного кэша», так как я обновил свой iPad до 4.3.1 с 4.2.В другом посте на этом сайте я увидел, что он снова работает в 4.3.2.Поэтому я снова обновился на iPad, теперь до iOS 4.3.3.Но все еще не мог заставить работать автономное кэширование, пока я не переименовал мой файл манифеста в «cache.manifest».Затем кеширование снова заработало, и я смог запустить мое автономное приложение HTML5 с главного экрана.Мне не нужно было помещать favicon.ico в манифест кеша.И у меня также был полный экран (установка «apple-mobile-web-app-enabled» в «yes»).

1 голос
/ 09 сентября 2011

Я написал приложение, и оно прекрасно работает через мобильный браузер, но при добавлении рабочего стола ... Не работает. Я думаю, что Apple отказалась от IOS4, и все усилия сейчас на OS5. Позор: (

1 голос
/ 28 июля 2011

Я нашел это решение, которое мне показалось подходящим, поскольку я также столкнулся с этой проблемой во время своей разработки.До сих пор это исправление работало хорошо для меня, а также для других людей, с которыми я просил проверить его, и я могу запустить его в автономном режиме (в режиме полета) и выключить домашний экран после кэширования и еще много чего.Я написал об этом на своем сайте сообщение:

http://www.offlinewebapp.com/solved-apple-mobile-web-app-capable-manifest-error/

  1. Удалите значок текущего веб-приложения на главном экране.
  2. Перейдите в настройкии очистите кэш браузера Safari.
  3. Дважды нажмите кнопку «Домой», чтобы открыть панель многозадачности.Найдите Safari, зажмите его пальцем и выйдите из него.

Пожалуйста, дайте мне знать, если это работает и для вас!Удачи!

1 голос
/ 01 апреля 2011

После нескольких дней работы с автономными веб-приложениями для работы на iPhone / iPod Touch с использованием HTTP-аутентификации веб-сервера я обнаружил следующие полезные самородки:

  1. Убедитесь, что Safari находится в корневом каталоге URL-адреса веб-приложения при нажатии «Добавить на главный экран». Я использовал jQuery Mobile и иногда добавлял ссылку с "/ # pageId". Вызванная проблема.

  2. Запускайте ваши Ajax-вызовы последовательно. Это может быть важно, только если ваше веб-приложение использует HTTP-аутентификацию, но мое приложение параллельно запускало целую серию вызовов Ajax при загрузке страницы, и приложение зависало на «apple-touch-startup-image».

  3. Вызовы Ajax «успешны» в автономном режиме (по крайней мере, с использованием Prototype.js). Проверяйте фактический фрагмент данных в ответе Ajax, а не только на статус HTTP. Я использовал это для проверки отображения кэшированных (SQL) или живых данных.

  4. В манифесте используйте «СЕТЬ: \ n * \ n». Из того, что я мог бы собрать, это универсальное утверждение для всего, что не указано в разделе «CACHE:». Используйте Chrome, чтобы убедиться, что ваш манифест правильный. Посмотрите на консоль Chrome для ошибок.

  5. Не имеет прямого отношения, но немного сбил меня с толку, вызовы openDatabase.transaction () являются АСИНХРОННЫМИ! Это означает, что строка кода JS после транзакции (execute(), error(), success()) будет выполняться ДО функции success().

Удачи!

1 голос
/ 16 марта 2011

Я написал автономное приложение, которое все еще работает в 4.2 и 4.2.1;пост немного пыльный, но код все еще работает:

http://kentbrewster.com/backchannel/

У Реми Шарпа есть более новый пост с кодом, который также работает, здесь:

http://remysharp.com/2011/01/31/simple-offline-application/

Его приложение:

http://rem.im/boggle/

...