L'application Web HTML5 n'est pas mise en cache lorsqu'elle est ajoutée à l'écran d'accueil dans iOS

Pour être clair, la web app EST la mise en cache et fonctionne bien en mode hors connexion dans le navigateur Safari Mobile.

Le problème est que lorsqu'il est ajouté à l'écran d'accueil sur un iPhone 4s et de l'iPad 2, les deux fonctionnant sous iOS 6.0.1. Il ne fonctionnera pas en mode hors connexion et donne une erreur de réseau pour se connecter à internet c'est à dire "Impossible d'ouvrir le MYWEBAPP. MYWEBAPP n'a pas pu être ouvert car il n'est pas connecté à internet"

J'ai été de débogage ce pendant plusieurs heures et n'arrive pas à trouver une solution. Je ne suis pas de recevoir des erreurs dans la console et je suis en cours d'exécution Jonathan Stark débogage de code

J'ai testé l'application sur le bureau Safari, Chrome et Firefox, outils de développement à la fois en Ligne et Hors ligne. Ainsi que de l'Inspecteur Web avec les périphériques de Safari. Le résultat est le même, soit sur iPhone ou iPad. Ils seront à la fois de cache de l'application web et fonctionne dans le navigateur Safari Mobile, mais pas lorsqu'il est ajouté à l'écran d'accueil. Pas d'erreurs, soit hors ligne ou en ligne.

Pour autant que je sais, je suis en utilisant les meilleures pratiques:

Ajout d'en-tête HTML: <html manifest="photo.appcache">
J'ai aussi tenté d'utiliser des noms différents pour le fichier de manifeste, y compris: cache.manifeste et hors ligne.manifeste comme j'ai lu que cela fait une différence, mais dans mon test, il n'a pas d'importance quel est le nom que les extensions sont .manifeste ou .appcache et est servi de manière appropriée dans le .fichier htaccess.
Ajouté correcte des types MIME: AddType text/cache-manifest appcache manifest
J'ai aussi essayé: AddType text/cache.manifest manifest
AddType text/cache.manifest .manifest manifestAddType text/cache-manifest .manifest

Je ne crois pas que cela a fonctionné: AddType text/cache.manifest mais je ne m'en souviens pas. Pour la plupart, il n'avait pas d'importance et je l'ai coincé avec:

AddType text/cache-manifest appcache manifeste

que ce qui était dans le HTML5 Mobile Standard.
Ajouté:

RÉSEAU:
*

à l'appcache fichier. Je crois que cela permet à tout pour être téléchargé ainsi que tous les liens fonctionnent.

J'ai essayé de supprimer cette ligne: <meta name="apple-mobile-web-app-capable" content="yes">
parce que j'ai lu ici sur de SORTE que c'est résolu un problème similaire au mien, mais je peux confirmer qu'il ne fonctionne pas dans mon test. La suppression de cette ligne ou de la définition du contenu de "non" lors de l'appui sur l'écran d'accueil icône de rediriger le navigateur Safari Mobile et de ne pas ouvrir en plein écran.

J'ai à peu près rétréci vers le bas pour que ce soit un bug dans iOS 6 (je suis tout à fait de l'utilisation d'iOS 6.0.1), parce que je sais que les données ont été séparées pour les applications web dans le navigateur et ceux ajoutés à l'écran d'accueil. Je vais poster cette question ici de voir si d'autres développeurs ont rencontré le même problème.

source d'informationauteur Paul

15

J'ai résolu ce problème. Je recommande ce qui suit pour l'écran d'accueil des applications web dans iOS 6.

Des fins de test, utilisez l'Inspecteur Web, et une belle JS script comme Jonathan Stark afin de savoir quand l'application a été mis en cache dans le navigateur Safari Mobile:

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

Après qu'il a été correctement mis en cache, ajouter l'application à votre écran d'accueil et de la laisser ouverte pour qu'elle le cache de l'écran d'accueil de la version séparément. Il a pleinement cache dans l'ordre pour qu'il fonctionne en mode hors connexion.

Depuis mon application cache est 22 mo de données et la mise en cache des données est DISTINCT pour l'application web, le problème que j'ai eu n'était pas en laissant l'écran d'accueil de l'app ouvert suffisamment longtemps pour cache.

C'est terrible comme la mesure de l'expérience utilisateur, mais aussi bon que les données sont séparées. Je peux vous le confirmer, parce que si vous supprimez les données du site web à partir de Safari, l'écran d'accueil web app fonctionnera toujours.

Autant que je sache, il n'y a pas un moyen de déboguer les données mises en cache pour l'écran d'accueil web app, ou où il est stocké.
1

La réponse ci-dessus a été très utile. @aul a dit qu'il ne sait pas d'une façon de déboguer l'écran d'accueil web app, mais j'ai trouvé un moyen.

De brancher votre iPad ou votre iPhone à votre ordinateur, puis dans Safari, cliquez sur Développer >, et sélectionnez votre appareil. Votre écran d'accueil de l'app doit être ouverte afin qu'il apparaisse dans le menu déroulant. Une fois que vous accéder à l'application, vous pouvez ouvrir la console d'erreur et de regarder Jonathan Stark script aller travailler. Une fois que le manifeste est téléchargé, vous serez en mesure d'utiliser l'application en mode hors connexion.

Ce script fait la vie plus facile! Grâce à @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);

0

J'ai eu un problème. J'ai été génératrice de mon manifeste de cache avec ASP.NET MVC/Rasoir parce que je voulais être en mesure de facilement héberger le site off d'une application virtuelle et ont encore les chemins de la ligne. Le type de contenu n'est pas défini correctement sur le manifeste de cache, Internet Explorer et Safari (iOS) n'étaient pas à la reconnaître (même si Chrome sur PC et Android serait).

Une fois que j'ai résolu le problème, il n'était toujours pas de travail quand j'ai essayé d'accéder à mon Azure hébergé application avec iOS Safari. Quand j'ai essayé d'accès avec Internet Explorer, j'ai vu qu'elle n'avait pas le bon type mime pour une police que j'avais.

De sorte qu'un mot d'avertissement: être absolument sûr du type mime de non seulement le manifeste, mais aussi tous les fichiers qui le manifeste dépend.

Vous devez vous connecter pour publier un commentaire.