HTML5 в автономном режиме «Событие ошибки кэша приложения: ошибка при получении манифеста (-1)» - PullRequest
16 голосов
/ 20 апреля 2011

Я пытаюсь написать автономное приложение HTML5, но не могу заставить Chrome принять файл манифеста кэша.

Chrome записывает следующий вывод в консоль при загрузке приложения:

Creating Application Cache with manifest http://localhost/cache.manifest
Application Cache Checking event
Application Cache Error event: Manifest fetch failed (-1) http://localhost/cache.manifest

Однако, если я удаляю все строки из файла манифеста, кроме первой строки (то есть "CACHE MANIFEST"), Chrome принимает манифест:

Creating Application Cache with manifest http://localhost/cache.manifest
Application Cache Checking event
Application Cache Downloading event
Application Cache Progress event (0 of 0)
Application Cache Cached event

Но как только я добавляю новую строку в манифест (даже если эта следующая строка пуста), Chrome снова начинает жаловаться на неудачу при извлечении.

Все файлы обслуживаются локально с ПК с Windows 7 через Python с использованием SimpleHTTPServer на порту 80. Я обновил types_map в% PYTHON% / Lib / mimetypes.py следующей строкой:

    '.manifest': 'text/cache-manifest',

Манифест должен содержать следующее:

CACHE MANIFEST 
scripts/africa.js
scripts/main.js
scripts/offline.js
scripts/libs/raphael-min.js
favicon.ico
apple-touch-icon.png

Ответы [ 7 ]

15 голосов
/ 18 февраля 2013

Для кэширования сайта в автономном режиме (HTML5) вам необходимо указать все файлы, необходимые для его запуска. Вкратце укажите основные компоненты сайта, необходимые.

Простой способ создания манифеста - в Note Pad.

Примечание: CACHE MANIFEST должна быть первой строкой, а ваши файлы будут следовать после пробела следующим образом:

CACHE MANIFEST

Scripts/script.js
Content/Site.css
Scripts/jquery-ui-1.8.20.min.js
Scripts/modernizr-2.5.3.js
SESOL.png
Scripts/jquery.formatCurrency-1.4.0.min.js
http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css
http://code.jquery.com/jquery-1.8.2.min.js
http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js
Content/themes/images/icons-18-white.png
Controllers/AccountController
Controllers/HomeController
Models/AccountModels
Account/Login
Home/CheckOut

Примечание 2: убрать все пробелы после каждой строки. Примечание: 3 вам нужно следовать точному формату FOLDER / File или FOLDER / FOLDER / FILE и т. Д.

То, что у вас есть файл манифеста, не означает, что он будет загружен. Вам нужно добавить следующее в тег:

<html manifest="~/cache.manifest" type="text/cache-manifest">

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

$(document).on("mobileinit", function () {
  //register event to cache site for offline use
cache = window.applicationCache;
cache.addEventListener('updateready', cacheUpdatereadyListener, false);
cache.addEventListener('error', cacheErrorListener, false);
function cacheUpdatereadyListener (){
    window.applicationCache.update();
    window.applicationCache.swapCache();
    }
    function cacheErrorListener() {
        alert('site not availble offline')
    }
}

Загрузите Safari и используйте веб-инспектор для поиска ошибок. http://developer.apple.com/library/safari/#documentation/appleapplications/Conceptual/Safari_Developer_Guide/1Introduction/Introduction.html#//apple_ref/doc/uid/TP40007874-CH1-SW1

Совет. Инструменты разработчика Chrome "F12" покажут вам ошибки в загрузке манифеста. т.е. файлы, которые вам еще нужно добавить.

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

$.mobile.allowCrossDomainPages = true; // cross domain page loading
$.mobile.phonegapNavigationEnabled = true; //Android enabled mobile
$.mobile.page.prototype.options.domCache = true; //page caching prefech rendering
$.support.touchOverflow = true; //Android enhanced scrolling
$.mobile.touchOverflowEnabled = true; // enhanced scrolling transition availible in iOS 5

Safari Developer Guide: https://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariWebContent/Client-SideStorage/Client-SideStorage.html#//apple_ref/doc/uid/TP40002051-CH4-SW4

9 голосов
/ 20 апреля 2011

Вы пробовали что-нибудь вроде https://manifest -validator.appspot.com / для проверки вашего манифеста?

Я уже давно борюсь с файлом манифестаочень трудно точно определить, что не так.Может быть что-то простое, например, неправильное кодирование с дополнительным переводом строки в начале.

5 голосов
/ 05 августа 2011

Сегодня у меня возникла точно такая же проблема. После нескольких часов работы я пришел к ключевому моменту: формату файла манифеста. Короче говоря, файл должен начинать новую строку ТОЛЬКО с ascii (0A), а не ascii (0D) или ascii (0D + 0A). Только так я могу жить с Chrome, или я получу пустую страницу и информацию об ошибке в окне консоли.

Согласно w3c, (http://www.w3.org/TR/html5/offline.html), в «5.6.3.2 Запись манифестов кэша» 0 допустимы и 0A, 0D и 0D + 0A. Итак, мое мнение таково: Chrome не совместим с w3c в этой точке.

Более того, скажем, если myapp.js должен кэшироваться, он ДОЛЖЕН следовать тому же правилу: начинать новую строку только с ascii (0A), иначе Chrome выдаст ту же информацию в окнах консоли.

Мой Chrome 13.0.782.107

1 голос
/ 16 января 2014

Я только что наткнулся на эту ссылку:

http://www.kaspertidemann.com/regarding-the-manifest-fetch-failed-error-in-chrome/

0 голосов
/ 19 апреля 2017

Я решил эту проблему в Visual Studio для приложения MVC.выполните следующие шаги:

  1. Я создал файл .appcache в блокноте и скопировал в него содержимое файла манифеста.(Вам не нужно создавать файл .Manifest ИЛИ не создавать представление Manifest.cshtml. просто создайте файл .appcache в блокноте.)

  2. дать ссылку как <html manifest="~/example.appcache"> при просмотре и выдачебудет решена

0 голосов
/ 29 апреля 2011

Я думаю, что линия

КЭШ:

отсутствует в файле манифеста (должна быть 2-ой строкой перед списком файлов.

0 голосов
/ 21 апреля 2011

Теперь я решил эту проблему, переключившись на CherryPy для обслуживания этих файлов:)

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

import cherrypy


class SimpleStaticServer:

    @cherrypy.expose
    def index(self):
        return '<html><body><a href="index.html">Go to the static index page</a></body></html>'


cherrypy.config.update({
        # global
        'server.socket_host': '192.168.0.3',
        'server.socket_port': 80,

        # /static
        'tools.staticdir.on': True,
        'tools.staticdir.dir': "(directory where static files are stored)",
    })
cherrypy.quickstart(SimpleStaticServer())

Если вы хотите посетить «сайт» с другого устройства, вам нужно будет использовать внешний IP-адрес (для меня это был 192.168.0.3).В противном случае вы можете просто использовать «127.0.0.1» для значения «server.socket_host».Затем я указываю своему браузеру http://192.168.0.3/index.html, чтобы получить страницу статического индекса.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...