web-dev-qa-db-fra.com

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

J'écris une application Web à utiliser hors ligne sur iOS. J'ai créé un manifeste, je le sers comme text/cache-manifest, et cela fonctionne généralement bien, lors de l'exécution dans Safari.

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

  • Lorsque je charge l'application une première fois 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 que je 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 possède le manifest=... attribut). Il demande ensuite le manifeste et tous mes autres fichiers, obtenant 200 pour tous (et 304 pour tout ce qui est demandé une deuxième fois pendant ce chargement).

  • Lorsque je charge la page dans Chrome et clique dessus, les journaux montrent que la seule chose qu'il essaie d'atteindre sur le serveur est "/favicon.ico" (qui est un 404, et que je ne pense pas que iOS Safari essaie de charger) , en tous cas). 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 en cache que j'ai répertoriés, ce à quoi je m'attends. L'ensemble des fichiers est d'environ 50 Ko, bien en deçà des limites des ressources hors connexion qui J'ai trouvé.

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

(Associé, mais ne me semble pas tout à fait la même chose, car il s'agit de Safari et non d'une application autonome: " Impossible de faire fonctionner une application Web hors ligne sur iPod ")

html5iosios4mobile-safarioffline
73
Ken

Je confirme que le nom "cache.manifest" a résolu le problème de mise en cache hors ligne dans IOS 4.3. L'autre nom ne fonctionnait tout simplement pas.

22
Elvis Pfutzenreuter

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

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

Débogage du cache d'applications hors ligne HTML 5 par Jonathan Stark

Si vous cherchez à fournir un accès hors ligne à votre application Web, le cache d'application hors ligne disponible en HTML5 est tueur. Cependant, c'est un PITA géant à déboguer, surtout si vous essayez toujours de vous en sortir.

Si vous rencontrez des difficultés avec le manifeste de cache, ajoutez le code JavaScript suivant à votre page HTML principale et affichez la sortie dans la console à l'aide de Firebug dans Firefox ou Déboguer> Afficher la console d'erreur dans Safari.

Si vous avez des questions, PLMK dans les commentaires.

HTH,
j

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

Parfois, un groupe de cache d'application se retrouve dans un mauvais état 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, changer le chemin d'accès au manifeste (par exemple, cache2.manifest, etc.) vous donne un nouveau groupe de cache et contourne le problème. Je peux garantir que toutes nos applications Web fonctionnent hors ligne en plein écran avec 4.2 et 4.3.

5
Joseph

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

J'ai parfois été trompé en pensant que le cache d'application fonctionnait alors qu'il ne l'était pas.

3
martypicco

Aucune application Web hors ligne (à partir d'iOS 4.2) ne peut fonctionner sans connexion Internet (ce qui signifie également le mode Avion) ​​lors de l'utilisation de <meta name="Apple-mobile-web-app-capable" content="yes" /> dans la section html head. J'ai vérifié cela avec tous les exemples que j'ai vus et ceux qui utilisent Safari pour que le site fonctionne correctement, mais lorsque vous ajoutez cette balise Meta, cela ne fonctionnera pas. Essayez votre application sans elle et vous verrez ce que je veux dire.

3
jsejcksn

J'avais du mal avec ce problème d'iOS 4.3 "pas de cache hors ligne" depuis que j'ai mis à jour mon iPad vers 4.3.1 à partir de 4.2. J'ai vu dans un autre article de ce site que cela fonctionnait à nouveau en 4.3.2. J'ai donc mis à jour l'iPad à nouveau, maintenant vers iOS 4.3.3. Mais je n'ai toujours pas réussi à faire fonctionner la mise en cache hors ligne tant que je n'ai pas renommé mon fichier manifeste en "cache.manifest". Ensuite, la mise en cache a recommencé à fonctionner et j'ai pu exécuter mon application hors ligne HTML5 à partir de l'écran d'accueil. Je n'avais pas besoin de mettre le favicon.ico dans le manifeste de cache. Et j'ai également eu le plein écran (en définissant "Apple-mobile-web-app-capable" sur "yes").

2
CK Lee

J'ai trouvé cette solution qui semblait fonctionner pour moi, car j'ai également rencontré ce problème lors de mon développement. Ce correctif a bien fonctionné jusqu'à présent et aussi pour d'autres personnes avec qui j'ai demandé de le tester, et je peux le faire fonctionner hors ligne (en mode avion) ​​et hors de l'écran d'accueil après la mise en cache et ainsi de suite. J'ai écrit un article à ce sujet sur mon site:

http://www.offlinewebapp.com/solved-Apple-mobile-web-app-capable-manifest-error/

  1. Supprimez l'icône de votre application Web actuelle sur l'écran d'accueil.
  2. Accédez aux paramètres et videz le cache de votre navigateur Safari.
  3. Appuyez deux fois sur votre bouton d'accueil pour ouvrir la barre multitâche. Trouvez celui de Safari, maintenez votre doigt dessus et quittez-le.

Veuillez me faire savoir si cela fonctionne aussi pour vous! Bonne chance!

1
Hellojeffy

Après des jours passés à essayer de faire fonctionner des applications Web hors ligne sur un iPhone/iPod Touch en utilisant l'authentification HTTP du serveur Web, j'ai découvert ces pépites utiles:

  1. Assurez-vous que Safari se trouve à la racine de l'URL de l'application Web lorsque vous appuyez sur "Ajouter à l'écran d'accueil". J'ai utilisé jQuery Mobile et ajoutais parfois le lien avec "/ # pageId". Causé des ennuis.

  2. Exécutez vos appels Ajax en série. Cela ne peut être important que si votre application Web utilise l'authentification HTTP, mais mon application a déclenché une multitude d'appels Ajax au chargement de la page en parallèle et a provoqué le blocage de l'application sur "Apple-touch-startup-image".

  3. Les appels Ajax sont "réussis" lorsqu'ils sont hors ligne (au moins en utilisant Prototype.js). Testez un élément de données réel dans la réponse Ajax, pas seulement sur l'état HTTP. Je l'ai utilisé pour tester l'affichage des données en cache (SQL) ou en direct.

  4. Dans le manifeste, utilisez "RÉSEAU:\n *\n". D'après ce que j'ai pu rassembler, il s'agit d'une déclaration fourre-tout pour tout ce qui n'est pas explicite dans la section "CACHE:". Utilisez Chrome pour vous assurer que votre manifeste est correct. Consultez la console de Chrome pour les erreurs.

  5. Pas directement lié, mais m'a fait trébucher un peu, les appels openDatabase.transaction () sont ASYNCHRONES! Cela signifie que la ligne de code JS après la transaction (execute(), error(), success()) s'exécutera AVANT la fonction success().

Bonne chance!

1
Chaz Meister Rock

J'ai rencontré le même problème aujourd'hui sur iOS 4.3. J'ai pu résoudre le problème en ajoutant un fichier favicon.ico et en l'ajoutant également au manifeste.

1
Timo

J'ai écrit une application hors ligne qui semble toujours fonctionner en 4.2 et 4.2.1; le message est un peu poussiéreux, mais le code fonctionne toujours:

http://kentbrewster.com/backchannel/

Remy Sharp a un article plus récent avec un code qui fonctionne également, ici:

http://remysharp.com/2011/01/31/simple-offline-application/

Son application:

http://rem.im/boggle/

1
Kent Brewster

J'ai écrit une application et cela fonctionne bien via le navigateur mobile, mais lors de l'ajout du bureau ... ne fonctionne pas. Je suppose que Apple ont abandonné IOS4 et tous les efforts sont maintenant sur OS5. Honte :(

1
Graeme Leighfield

J'ai une solution de contournement potentielle pour cela - cela semble un peu fou, mais voilà ... Je travaille beaucoup avec les applications cache.manifest et plein écran (voici un test si vous en avez besoin: http: // www .mrspeaker.net/2010/07/12/argy-bargy / - ajouter à l'écran d'accueil puis activer le mode avion et il se lance - au moins, à partir d'iOS 4.2.1)

Une chose étrange que j'ai trouvée est que, parfois, il semble qu'une sorte de "méta" information dans les fichiers puisse les gâcher d'être mis en cache - Avez-vous déjà remarqué qu'en bash que si vous faites un "ls" certains fichiers (en fonction de votre couleur paramètres) sont mis en évidence sans raison apparente? Les fichiers peuvent contenir des métadonnées que le système d'exploitation (je pense) ajoute automatiquement - et il existe des moyens de les supprimer ... Je ne me souviens pas pourquoi, mais voici quelques détails: Supprimer les métadonnées des fichiers dans Snow Leopard

Après avoir arraché mes cheveux un jour - et refusé d'abandonner parce que je savais que cela DEVRAIT avoir fonctionné ... Chrome disait qu'il avait chargé tous les fichiers, mais s'est terminé par une erreur générique. Dans le fin J'ai recréé la structure du projet avec des fichiers vierges et copié/collé le contenu. Cela a fonctionné - a commencé la mise en cache comme il était censé le faire!

Quand j'ai regardé les fichiers, j'ai remarqué qu'il y avait des méta-informations. J'ai essayé de nettoyer ces informations et le projet original a de nouveau fonctionné. Je ne suis pas sûr que ce soit la raison pour laquelle cela a fonctionné à nouveau - c'était peut-être juste une coïncidence.

Parce que ça a marché, je n'y ai pas trop réfléchi. Le même problème s'est reproduit quelques mois plus tard et l'astuce copier/coller a de nouveau fonctionné. J'étais occupé, donc je n'ai pas enquêté plus avant - mais j'ai juré que j'irais au fond des choses la prochaine fois que cela arriverait ... mais je n'ai pas encore eu à le faire.

Phew. Quoi qu'il en soit, je suis content d'avoir pu écrire ça quelque part ...

[MISE À JOUR: des mois et des mois plus tard - je n'ai pas pu reproduire cela, donc je ne pense pas que ce soit les métadonnées]

1
Mr Speaker

J'ai plusieurs applications Web hors ligne et en ligne/hors ligne.

Lorsque je désactive le mode aéroport, je reçois une demande pour le manifeste et certains autres fichiers.

Je ne reçois pas de demandes d'images, de JavaScript, de CSS ou de fichiers en cache AJAX.

Si vous voyez des demandes pour vos ressources, IOS ne fait pas les faire mettre en cache.

Safari en général est plus difficile avec les manifestes.

Je vous suggère d'essayer Safari sur votre ordinateur.

1
JakeCigar