Développement iOS
  1. Développement iOS
  3. L'application Web HTML5 n'est pas caching lorsqu'elle est ajoutée à l'écran d'accueil dans iOS
Intereting Posts
Bouclage AVPlayer en toute transparence Delphi + iOS: Comment déclarer ObjC-Class simple? Prise en charge du catalogue d'actifs Xcode pour les images de 3,5 ", 4" et 4,7 "@ 2x? Les éléments de la barre d'outils disparaissent lorsque la vue a été modifiée avec UIActionSheet Comment encoder une string avec des caractères spéciaux qui seront postés sur une URL? Objectif c Répétez UILocalNotification le jour spécifique Mettre en pause et reprendre une boucle for Firebase ne fonctionne pas sur les périphériques réels (iOS) Rotation UINavigationBar et layout automatique Comment dessiner un UIView personnalisé qui n'est qu'un cercle – application iPhone L'instanciation du controller de vue modale gèle l'application – Problème probable avec Xcode 7 Comment puis-je récupérer la vue du button de divulgation de détail? iOS7 – ABPersonViewController, mode d'édition Problème de progression du téléchargement de file Chargé la plume mais n'a pas reçu d'exception UITableView

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

Pour être clair, l'application Web est caching et fonctionne correctement hors connection dans Mobile Safari.

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

J'ai débogué ceci pendant plusieurs heures et n'arrive pas à find une solution. Je ne reçois aucune erreur dans la console et j'exécute le code de debugging de Jonathan Stark

J'ai testé l'application dans le bureau de Safari, Chrome et les outils de développement de Firefox à la fois en ligne / hors ligne. Ainsi que Web Inspector avec les appareils dans Safari. Le résultat est le même sur iPhone ou iPad. Ils vont à la fois mettre en cache l'application Web et fonctionner dans Mobile Safari, mais pas lorsqu'ils sont ajoutés à l'écran d'accueil. Pas d'erreurs hors ligne ou en ligne.

Pour autant que je sache, j'utilise les meilleures pratiques:

  1. En-tête HTML ajouté: <html manifest="photo.appcache">

    J'ai également expérimenté avec l'utilisation de noms différents pour le file manifeste, y compris: cache.manifest et offline.manifest lorsque j'ai lu que cela fait une différence, mais dans mes tests, peu importe le nom tant que les extensions sont. manifeste ou .appcache et est servi de manière appropriée dans le file .htaccess.

  2. Ajout de types MIME corrects: AddType text/cache-manifest appcache manifest

    J'ai également essayé: AddType text/cache.manifest manifest , AddType text/cache.manifest .manifest manifest , AddType 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, cela n'avait pas d'importance et je me suis contenté de:

    AddType text / cache-manifest Appcache manifeste

    comme ce qui était dans le HTML5 Mobile Boilerplate.

  3. Ajoutée:

RÉSEAU: *

dans le file appcache. Je crois que cela permet de tout download et de faire fonctionner tous les liens.

  1. J'ai essayé de supprimer cette ligne: <meta name="apple-mobile-web-app-capable" content="yes"> parce que je lis ici sur SO qui est résolu un problème similaire au mien, mais je peux confirmer qu'il ne fonctionne pas dans mes tests. Supprimer cette ligne ou définir le contenu sur "non" lorsque vous appuyez sur l'icône de l'écran d'accueil redirecta vers Mobile Safari et ne s'ouvrira pas en plein écran.

Je l'ai presque réduit à un bug dans iOS 6 (j'utilise iOS 6.0.1), car je sais que datatables ont été séparées pour les applications web dans le browser et celles ajoutées à l'écran d'accueil . Je post ce problème ici pour voir si d'autres développeurs ont rencontré le même problème.

J'ai résolu ce problème. Je recommand ce qui suit pour les applications Web d'écran d'accueil dans iOS 6.

À des fins de test, utilisez l'inspecteur Web et un bon script JS comme celui de Jonathan Stark pour savoir quand l'application a été caching dans Mobile Safari:

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

Une fois la caching réussie, ajoutez l'application à votre écran d'accueil et laissez-la ouverte pour que la version de l'écran d'accueil soit caching séparément. Il doit entièrement mettre en cache afin qu'il fonctionne hors connection.

Étant donné que mon cache d'applications contient 22 Mo de données et que la caching des données est SÉPARÉE pour l'application Web, le problème que je rencontrais ne laissait pas l'application de l'écran d'accueil ouverte suffisamment longtime pour être caching.

C'est terrible en ce qui concerne l'expérience user, mais aussi bien que datatables soient séparées. Je peux le confirmer car si vous supprimez datatables du site Web de Safari, l'application Web de l'écran d'accueil fonctionnera toujours.

Pour autant que je sache, il n'y a pas moyen de déboguer datatables mises en cache pour l'application Web de l'écran d'accueil, ou l'endroit où elles sont stockées.

La réponse ci-dessus était très utile. @aul a dit qu'il ne savait pas d'un moyen de déboguer l'application web de l'écran d'accueil, mais j'ai trouvé un moyen.

Accrochez votre iPad ou votre iPhone à votre ordinateur, puis dans Safari, allez sur Développer> et select votre appareil. Votre application d'écran d'accueil doit être ouverte pour qu'elle apparaisse dans le drop down menu. Une fois que vous accédez à l'application, vous pouvez ouvrir la console d'erreur et regarder le script de Jonathan Stark au travail. Une fois le manifeste téléchargé, vous pourrez utiliser l'application en mode déconnecté.

Ce script a rendu la vie plus facile! Merci à @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);

J'ai eu un problème en deux parties. Je produisais mon manifeste de cache avec ASP.NET MVC / Razor parce que je voulais pouvoir facilement héberger le site à partir d'une application virtuelle tout en conservant les paths d'access. Le type de contenu n'étant pas correctement défini sur le manifeste du cache, Internet Explorer et Safari (iOS) ne le reconnaissaient pas (bien que Chrome sur PC et Android le fassent).

Une fois que j'ai résolu ce problème, cela ne fonctionnait toujours pas lorsque j'ai essayé d'accéder à mon application hébergée Azure avec iOS Safari. Quand j'ai essayé d'accéder avec Internet Explorer, j'ai vu qu'il n'avait pas le type mime correct pour une police que j'avais.

Donc un mot d'avertissement: soyez absolument sûr du type mime non seulement du manifeste, mais aussi de tous les files dont dépend le manifeste.