Application Web iOS hors ligne : charge mon manifeste, mais ne fonctionne pas hors ligne

Question

Je suis en train d'écrire une application web à utiliser hors ligne sur iOS. J'ai créé un manifeste, je le sers en tant que text/cache-manifest, et généralement, cela fonctionne bien, lorsque je l'exécute dans Safari.

Si je l'ajoute en tant qu'application sur mon écran d'accueil, puis active le mode Avion, l'application ne peut pas s'ouvrir du tout - j'obtiens une erreur et il propose de fermer l'application. (Je pensais que c'était le but entier d'une application hors ligne!)

• Quand je charge l'application une première fois en étant en ligne, je peux voir dans mes journaux qu'elle demande chaque page répertoriée dans le manifeste.

• Si je désactive le mode Avion et charge l'application, je peux voir que le premier fichier demandé est mon fichier main.html (qui est à la fois répertorié dans le manifeste, et a l'attribut manifest=...). Ensuite, il demande le manifeste, ainsi que tous mes autres fichiers, obtenant des codes 200 pour tous (et 304 pour tout ce qui est demandé une deuxième fois pendant ce chargement).

• Quand je charge la page dans Chrome, et que je clique partout, les journaux montrent que la seule chose à laquelle il essaie d'accéder sur le serveur est "/favicon.ico" (qui est un 404, et que je ne pense pas qu'iOS Safari essaie de charger de toute façon). Tous les fichiers répertoriés dans le manifeste sont valides et servis sans erreur.

• L'inspecteur Chrome répertorie, sous "CACHE D'APPLICATION", tous les fichiers mis en cache que j'ai répertoriés comme je m'y attends. L'ensemble des fichiers représente environ 50 Ko, bien en dessous de toute limite sur les ressources hors ligne que j'ai trouvée.

Est-ce que cela est censé fonctionner, c'est-à-dire suis-je censé pouvoir créer une application iOS hors ligne en utilisant uniquement HTML/CSS/JS? Et où dois-je chercher à comprendre pourquoi cela échoue à fonctionner hors ligne?

(Apparenté mais ne semble pas tout à fait le même pour moi, car il s'agit de Safari et non d'une application autonome : "Can't get a web app to work offline on iPod")

Answer 1

Je confirme que le nom 'cache.manifest' a résolu le problème de mise en cache hors ligne dans IOS 4.3. D'autres noms ne fonctionnaient tout simplement pas.

Answer 2

J'ai trouvé que le débogage des applications HTML5 hors ligne était une douleur. J'ai trouvé que le code de cet article m'a aidé à comprendre ce qui n'allait pas avec mon app :

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

Débogage de la mise en cache de l'application HTML 5 hors ligne par Jonathan Stark

Si vous cherchez à fournir un accès hors ligne à votre application web, la mise en cache de l'application hors ligne disponible en HTML5 est top. Cependant, c'est très compliqué à déboguer, surtout si vous essayez encore de comprendre comment ça marche.

Si vous rencontrez des problèmes avec le manifeste de mise en cache, ajoutez le JavaScript suivant à votre page HTML principale et consultez la sortie dans la console en utilisant Firebug dans Firefox ou Debug > Afficher la console d'erreurs dans Safari.

Si vous avez des questions, faites-le savoir dans les commentaires.

Cdlt,
j

var cacheStatusValues = [];
cacheStatusValues[0] = 'non mis en cache';
cacheStatusValues[1] = 'inactif';
cacheStatusValues[2] = 'vérification';
cacheStatusValues[3] = 'téléchargement';
cacheStatusValues[4] = 'prêt à mettre à jour';
cacheStatusValues[5] = 'obsolète';

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) ? 'oui' : 'non';
    status = cacheStatusValues[cache.status];
    type = e.type;
    message = 'en ligne: ' + online;
    message+= ', événement: ' + type;
    message+= ', état: ' + status;
    if (type == 'error' && navigator.onLine) {
        message+= ' (probablement une erreur de syntaxe dans le manifeste)';
    }
    console.log(message);
}

window.applicationCache.addEventListener(
    'updateready',
    function(){
        window.applicationCache.swapCache();
        console.log('l\'échange de cache a été appelé');
    },
    false
);

setInterval(function(){cache.update()}, 10000);

Answer 3

Parfois, un groupe de cache d'application se retrouve dans un état défectueux dans MobileSafari - il télécharge chaque élément du cache, puis déclenche un événement d'erreur de cache générique à la fin. Un groupe de cache d'application, selon la spécification, est basé sur l'URL absolue du manifeste. J'ai constaté que lorsque cette erreur se produit, le changement du chemin vers le manifeste (par exemple, cache2.manifest, etc.) vous donne un groupe de cache frais et contourne le problème. Je peux attester que toutes nos applications Web fonctionnent hors ligne en plein écran avec 4.2 et 4.3.

Answer 4

Aucune application Web hors ligne (à partir d'iOS 4.2) ne peut fonctionner sans connexion Internet (ce qui signifie le mode Avion également) lors de l'utilisation de dans la section head du HTML. J'ai vérifié cela avec chaque exemple que j'ai vu et ceux qui utilisent Safari pour afficher le site fonctionnent bien, mais lorsque vous ajoutez cette balise meta, cela ne fonctionne pas. Essayez votre application sans cela et vous verrez ce que je veux dire.

Answer 5

J'ai trouvé que vider le cache de Safari après avoir activé le mode Avion est un moyen efficace de tester si l'application fonctionne vraiment hors ligne.

Il m'est parfois arrivé de penser que le cache de l'application fonctionnait alors que ce n'était pas le cas.