6

J'ai créé une application web iPhone et j'ai fait toutes les étapes pour la faire ressembler à une application native: icône de l'application, empêcher le défilement, empêcher la sélection, utiliser des méthodes js tactiles, etc. Cependant, j'ai un moment difficile avec l'écran de démarrage.Retard de l'écran de démarrage iPhone Web App

J'ai essayé un PNG et JPEG 320x460, mis en cache avec un fichier manifeste. L'image de démarrage apparaît, mais seulement après quelques secondes après le lancement de l'application avec un écran blanc. Donc, vraiment l'écran de démarrage apparaît seulement pour une fraction de seconde avant que l'application termine le lancement.

Je n'arrive pas à comprendre pourquoi il ne charge pas le splash immédiatement. Je sais qu'il est mis en cache par le manifeste car il se charge sans connexion internet. J'ai lu avant que le splash n'apparaisse pas jusqu'à ce que le DOM soit prêt, donc je devine que c'est le problème, mais je ne sais pas comment le réparer.

Répondre

4

L'insérez-vous avec le lien de démarrage?

<link rel="apple-touch-startup-image" href="startup-graphic.png" /> 

Je trouve aussi que, parfois, quand je fait des changements à mes applications web iPhone je devais supprimer complètement le lien sur la maison-écran et passer par le processus de l'ajouter à nouveau avant que certains des éléments mis à jour correctement - même après la mise à jour du cache-manifeste.

+0

Oui J'utilise ce code. Et j'ai également remarqué que je devais supprimer l'application sur l'écran d'accueil et l'ajouter à nouveau (entre autres choses) pour obtenir la nouvelle version en cache. Le problème n'est pas si grave - c'est juste un cadeau dérangeant que ce n'est pas une application native. – ryanashcraft

+0

@ryanashcraft: N'incluez simplement pas le numéro de version de l'application dans l'écran de démarrage, et ne le changez jamais, alors les utilisateurs ne sauront jamais ... – awe

2

Si vous utilisez Sencha Touch, j'ai trouvé le problème lié à cela. Pour essayer de calculer la taille de l'écran, ils ont ajouté 2 retards massifs de 500 ms. Cela ajoute une seconde supplémentaire au temps de chargement.

J'ai réussi à réduire le temps à 50ms sur un iPhone. Je ne suis pas sûr que le code fonctionne bien, mais cela fonctionne pour moi.

if (Ext.is.iOS && Ext.is.Phone) { 
    Ext.Viewport.init = function(fn, scope) { 
     var me = this, 
      stretchSize = Math.max(window.innerHeight, window.innerWidth) * 2, 
      body = Ext.getBody(); 

     me.updateOrientation(); 

     this.initialHeight = window.innerHeight; 
     this.initialOrientation = this.orientation; 

     body.setHeight(stretchSize); 

     Ext.defer(function() { 
      me.scrollToTop(); 
      if (fn) { 
       fn.apply(scope || window); 
      } 
      me.updateBodySize(); 
     }, 50); 
    }; 
} 

Le code vérifie d'abord que nous sommes sur l'iPhone. De cette façon, j'ai seulement changé la fonctionnalité pour l'iPhone. Je n'ai pas accès à d'autres appareils pour tester. Je pense que même cela peut être mieux fait. Par exemple, en mode autonome sur l'iPhone, nous savons exactement quelle est la hauteur de l'écran.

Ça va faire pour l'instant.

Espérons que cela aide.

2

Cela ajoutera un écran de démarrage à votre application Web. Vous trouverez ci-dessous les tailles dont vous aurez besoin pour iPad et iPhone/iPod Touch, y compris la zone de la barre d'état.

Paysage iPad - 1024 x 748

<link rel="apple-touch-startup-image" sizes="1024x748" href="img/splash-screen-1024x748.png" /> 

iPad Portrait - 768 x 1004

<link rel="apple-touch-startup-image" sizes="768x1004" href="img/splash-screen-768x1004.png" /> 

iPhone/iPod Portrait Touch - 320 x 480 (résolution standard)

<link rel="apple-touch-startup-image" href="img/splash-screen-320x460.png" /> 

Portrait iPhone/iPod Touch - 640 x 960 pixels (Retina Display haute résolution)Si vous créez une application Web pour la compatibilité avec l'iPad, il est recommandé d'utiliser les tailles Paysage et Portrait.De plus, vous devez vider votre cache et renommer le fichier (par exemple, de image.png à new_image.png) afin que le périphérique charge la nouvelle image [correcte]. Il ne montrera pas l'écran de démarrage la première fois que vous lancez l'application Web, et peut-être même pas la seconde si vous lui donnez suffisamment de temps pour charger tous les fichiers requis dans la mémoire de l'appareil.