ritardo schermata iniziale iPhone App

Question

Ho creato un'app Web per iPhone e ho eseguito tutti i passaggi per renderlo simile a un'app nativa: l'icona dell'app, impedire lo scorrimento, impedire la selezione, utilizzare i metodi js basati sul tocco, ecc. Tuttavia, sto attraversando un periodo difficile con lo splash screen.

Ho provato un file PNG e JPEG 320x460, memorizzato nella cache con un file manifest. L'immagine iniziale appare, ma solo dopo alcuni secondi dall'avvio dell'app con uno schermo bianco. Quindi, in realtà la schermata iniziale appare solo per una frazione di secondo prima che l'app termini il lancio.

Non riesco a capire perché non stia caricando immediatamente lo splash. So che è memorizzato nella cache dal manifest perché carica senza una connessione internet. Ho letto prima che lo splash non viene visualizzato fino a quando il DOM non è pronto, quindi suppongo che questo sia il problema, ma non so come risolverlo.

Answer 1

Stai inserendo con il link di avvio?

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

Ho anche scoperto che a volte, quando ho fatto le modifiche al mio iPhone applicazioni web che ho dovuto rimuovere completamente il link sulla home-schermo e passare attraverso il processo di aggiunta di nuovo prima alcuni degli elementi aggiornati correttamente - anche dopo aver aggiornato il cache-manifest.

Answer 2

Se si utilizza Sencha Touch, ho riscontrato che il problema è correlato a questo. Per provare a calcolare le dimensioni dello schermo, hanno aggiunto 2 enormi ritardi di 500 ms. Questo aggiunge un secondo in più al tempo di caricamento.

Sono riuscito a ridurre il tempo a 50 ms su un iPhone. Non sono sicuro di quanto funzioni bene il codice ma funziona per me.

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); 
    }; 
} 

Il codice controlla innanzitutto che siamo su iPhone. In questo modo ho solo cambiato la funzionalità per l'iPhone. Non ho accesso ad altri dispositivi per testare.

penso che anche questo può essere fatto meglio. Ad esempio in modalità standalone su iPhone sappiamo esattamente quanto è alto lo schermo.

Si farà per ora.

Spero che questo aiuti.

Answer 3

Questo aggiungerà una schermata iniziale per il Web App. Di seguito sono riportate le dimensioni necessarie per iPad e iPhone/iPod Touch, tra cui anche l'area della barra di stato.

Paesaggio 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 Touch Portrait - 320 x 480 (risoluzione standard)

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

iPhone/iPod Touch Portrait - 640 x 960 pixel (Retina Display ad alta risoluzione)

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

Se si crea un'app Web per la compatibilità con iPad, si consiglia di utilizzare sia le dimensioni Orizzontale che Verticale.

EDIT: Inoltre, è necessario svuotare la cache e rinominare il file (ad esempio, da image.png a new_image.png) in modo che il dispositivo carichi la nuova immagine [corretta]. Non mostrerà la schermata iniziale la prima volta che avvierai l'app Web, e forse nemmeno la seconda, a seconda che tu dosi abbastanza tempo per caricare tutti i file richiesti nella memoria del dispositivo.