Веб-приложение HTML5 не кэшируется при добавлении на главный экран в iOS

Ответ 1

Я решил эту проблему. Я рекомендую следующие веб-приложения для домашнего экрана в iOS 6.

Для целей тестирования используйте веб-инспектор и приятный JS script, такой как Джонатан Старк, чтобы узнать, когда приложение было кэшировано в Mobile Safari:

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

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

Поскольку мой кэш приложений - 22 МБ данных, а кеширование данных - ОТДЕЛЬНОЕ для веб-приложения, проблема, с которой я столкнулась, не оставляла приложение на домашнем экране открытым достаточно долго для кэширования.

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

Насколько я знаю, нет способа отлаживать данные, кэшированные для домашнего веб-приложения или где он хранится.

Ответ 2

Ответ выше был очень полезным. @aul сказал, что он не знал, как отладить веб-приложение для домашнего экрана, но я нашел способ.

Подключите iPad или iPhone к компьютеру, затем в Safari перейдите в раздел "Разработка" > и выберите свое устройство. Ваше домашнее приложение должно быть открыто, чтобы оно отображалось в раскрывающемся меню. После доступа к приложению вы можете открыть консоль ошибок и посмотреть Джонатан Старк script перейти на работу. После загрузки манифеста вы сможете использовать приложение в автономном режиме.

Ответ 3

Этот script облегчил жизнь! Благодаря @Paul!

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

Ответ 4

У меня была проблема с двумя частями. Я генерировал манифест кэша с помощью ASP.NET MVC/Razor, потому что я хотел иметь возможность легко размещать сайт у виртуального приложения и все еще иметь пути. Тип содержимого не был правильно установлен в манифест кеша, поэтому Internet Explorer и Safari (iOS) не узнали его (хотя Chrome на ПК и Android).

Как только я решил эту проблему, она все еще не работала, когда я пытался получить доступ к моему приложению Azure с iOS Safari. Когда я попытался получить доступ с помощью Internet Explorer, я увидел, что у него не было правильного типа mime для шрифта, который у меня был.

Итак, слово предупреждения: будьте абсолютно уверены в типе mime не только манифеста, но и всех файлов, от которых зависит манифест.