web-dev-qa-db-fra.com

HTML5 hors ligne "Evénement d'erreur de cache d'application: récupération du manifeste ayant échoué (-1)"

J'essaie d'écrire une application hors ligne HTML5 mais n'arrive pas à convaincre Chrome d'accepter le fichier manifeste du cache.

Chrome enregistre la sortie suivante sur sa console lors du chargement de l'application:

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

Toutefois, si je supprime toutes les lignes du fichier manifeste, à l'exception de la première ligne ("CACHE MANIFEST"), Chrome accepte le manifeste:

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

Mais dès que j'ajoute une nouvelle ligne au manifeste (même si cette ligne est vide), Chrome revient à se plaindre de l'échec de la récupération.

Tous les fichiers sont servis localement à partir d'un PC Windows 7 via Python à l'aide de SimpleHTTPServer sur le port 80. J'ai mis à jour la types_map dans% PYTHON%/Lib/mimetypes.py avec la ligne suivante:

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

Le manifeste doit contenir les éléments suivants:

CACHE MANIFEST 
scripts/africa.js
scripts/main.js
scripts/offline.js
scripts/libs/raphael-min.js
favicon.ico
Apple-touch-icon.png
html5manifestoffline
16
Craig McDonnell

J'ai maintenant résolu ce problème en passant à CherryPy pour servir ces fichiers :)

Si une autre personne est bloquée de la même manière mais souhaite conserver la partie serveur simple, le code Python suivant peut être suffisant pour commencer:

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

Si vous souhaitez visiter le "site" à partir d'un autre appareil, vous devez utiliser l'adresse IP externe (pour moi, il s'agissait de 192.168.0.3). Sinon, vous pouvez simplement utiliser "127.0.0.1" pour la valeur "server.socket_Host". Je pointe ensuite mon navigateur sur http://192.168.0.3/index.html pour obtenir ma page d'index statique.

0
Craig McDonnell

Pour mettre en cache un site Web hors connexion (HTML5), vous devez spécifier tous les fichiers nécessaires à son exécution. En bref, spécifiez les principaux composants du site nécessaires.

Un moyen facile de créer un manifeste est dans le bloc-notes. 

Remarque: CACHE MANIFEST doit être la première ligne et vos fichiers suivront après un espace, comme suit:

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

Remarque2: supprimez tous les espaces après chaque ligne . Remarque: 3 vous devez suivre le format exact Dossier/Fichier ou Dossier/Dossier/Fichier ect ....

Ce n’est pas parce que vous avez un fichier manifeste qu’il va se charger. vous devez ajouter les éléments suivants à la balise:

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

N'oubliez pas qu'après avoir ajouté ceci, il est mis en cache lors du premier chargement de la page. Vous devez donc enregistrer un événement de cache dans l'événement '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')
    }
}

Téléchargez Safari et utilisez l’inspecteur Web pour rechercher les erreurs ..___. (http://developer.Apple.com/library/safari/#documentation/appleapplications/Conceptual/Safari_Developer_Guide/1Introduction/Introduction.html#//Apple_ref/doc/uid/TP40007874-CH1-SW1

Conseil: Les outils de développement de Google Chrome "F12" affichent les erreurs dans le chargement du manifeste. c'est-à-dire les fichiers que vous devez encore ajouter.

J'espère que cela aide, couvre tout le processus. Je suppose que si vous êtes à ce stade de développement, vous devez ajouter ces éléments au programme init mobile:

$.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

Guide du développeur Safari: https://developer.Apple.com/library/safari/#documentation/AppleApplications/Reference/SafariWebContent/Client-SideStorage/Client-SideStorage.html#//Apple_ref/doc/uid/TP40002051-CH4-SW4

15
Paul Styles

Avez-vous essayé quelque chose comme https://manifest-validator.appspot.com/ pour valider votre manifeste?

Cela fait un moment que je lutte avec mon fichier de manifeste, il est très difficile de déterminer ce qui ne va pas. Pourrait être quelque chose d'aussi simple qu'un mauvais encodage pour un saut de ligne supplémentaire au début.

9
gnur

Aujourd'hui, j'ai eu exactement le même problème. Après des heures de travail, je suis arrivé à l’essentiel: le format du fichier manifeste. En bref, le fichier doit commencer une nouvelle ligne UNIQUEMENT avec ascii (0A), pas ascii (0D) ou ascii (0D + 0A). C’est seulement ainsi que je pourrai vivre avec Chrome, ou j’obtiendrai une page vierge et les informations sur l’erreur dans la fenêtre de la console.

Selon w3c (http://www.w3.org/TR/html5/offline.html), dans «5.6.3.2 Écriture de manifestes de cache», les deux types 0A, 0D et 0D + 0A sont tous acceptables. Donc, mon opinion est la suivante: Chrome n’est pas compatible avec W3C.

De plus, par exemple, si myapp.js doit être mis en cache, il DOIT suivre la même règle: commence une nouvelle ligne uniquement avec ascii (0A), sinon Chrome affichera les mêmes informations dans les fenêtres de la console.

Mon Chrome est 13.0.782.107

5
bobdong

Je viens de trouver ce lien:

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

1
Chris