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

Для ясности, веб-приложение кэшируется и работает нормально в автономном режиме в Mobile Safari.

Проблема в том, когда он добавляется на домашний экран на iPhone 4s и iPad 2, оба работают под управлением iOS 6.0.1. Это победилоt работает в автономном режиме и выдает ошибку сети при подключении к Интернету, т. е. "Не удается открыть MYWEBAPP. MYWEBAPP не может быть открыт, потому что он не подключен к Интернету "Я"

отлаживал это уже несколько часов и могуКажется, я не нашел решения. Я'я не получаю никаких ошибок в консоли, и ябегу Джонатана Старкакод отладки

проверил приложение в настольных Safari, Chrome и FirefoxИнструменты разработчика как онлайн, так и оффлайн. А также веб-инспектор с устройствами в Safari. Результат одинаковый на iPhone или iPad. Они оба кешируют веб-приложение и будут работать в Mobile Safari, но не при добавлении на домашний экран. Нет ошибок ни в автономном режиме, ни в сети.

Насколько я знаю, яиспользуя лучшие практики:

Добавлен заголовок HTML: I '

Мы также экспериментировали с использованием различных имен для файла манифеста, включая: cache.manifest и offline.manifest, когда я прочитал, что это имеет значение, но в моем тестировании не имеет значения, какое это имя, если расширения являются .manifest или .appcache и обслуживается соответствующим образом в файле .htaccess.

Добавлены правильные типы MIME: I 'AddType text/cache-manifest appcache manifest

мы также пробовали:AddType text/cache.manifest manifestAddType text/cache.manifest .manifest manifestAddType text/cache-manifest .manifest

Я неНе думаю, что это сработало:AddType text/cache.manifest но я нене помню. По большей части это неЭто не имеет значения, и я застрял с:

Текстовый / кэшированный манифест AddType

как то, что было в HTML5 Mobile Boilerplate.

Добавлено:

СЕТЬ: *

в файл appcache. Я считаю, что это позволяет загружать все, а также заставляет работать все ссылки.

мы пытались удалить эту строку: потому что я читал здесь о SO, это решает проблему, аналогичную моей, но я могу подтвердить, что она не работает в моем тестировании. Удаление этой строки или установка содержимого на "нет» при нажатии на главном экране значок будет перенаправлен на Mobile Safari и не откроется в полноэкранном режиме.

мы в значительной степени сузили это до того, чтобы быть ошибкой в iOS 6 (яя на самом деле использую iOS 6.0.1), потому что я знаю, что данные теперь разделены для веб-приложений в браузере и добавлены на домашний экран. Я'm опубликовать эту проблему здесь, чтобы увидеть, сталкивались ли другие разработчики с такой же проблемой.

Ответы на вопрос(4)

шнего экрана в iOS 6.

Для тестирования используйте Web Inspector и хороший JS-скрипт, такой как Jonathan Stark 'Чтобы узнать, когда приложение было кэшировано в Mobile Safari:

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

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

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

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

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

 Joshua17 мар. 2017 г., 03:51
Ссылка сейчас мертва.
 Paul18 мар. 2017 г., 19:01
Скрипт вставляется в ответ @Philip. Я'Я обновлю ссылку с Gist. Я, однако, могут Джонатан Старкс блог. Может быть, сделать поиск в Google, чтобы увидеть, если вы можете найти его?
 Philip20 авг. 2013 г., 20:31
Черт, да, этот сценарий был решением, я добавлю его ниже в качестве ответа.

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

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

Этот сценарий сделал жизнь проще! Спасибо @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);

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

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

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

 Tatyana07 дек. 2016 г., 10:53
Я также генерирую манифест кэша с ASP, но на стороне сервера. Как я могу проверить типы пантомимы?
 mason07 дек. 2016 г., 14:01
@ Татьяна Откройте ваш браузерs инструменты разработки (F12) и посмотрите на вкладку сети.

Ваш ответ на вопрос