iPhone Web App Splash-Bildschirm Verzögerung

Question

Ich habe eine iPhone Web App gebaut und habe alle Schritte gemacht, damit es wie eine native App aussieht: App-Icon, Scrolling verhindern, Auswahl verhindern, Touch-basierte js-Methoden verwenden usw. Ich habe jedoch eine harte Zeit mit dem Startbildschirm.

Ich habe versucht, ein 320x460 PNG und JPEG, zwischengespeichert mit einer Manifest-Datei. Das Begrüßungsbild wird angezeigt, jedoch erst nach einigen Sekunden, nachdem die App mit einem weißen Bildschirm gestartet wurde. Der Begrüßungsbildschirm wird also nur für den Bruchteil einer Sekunde angezeigt, bevor die App gestartet wird.

Ich kann nicht herausfinden, warum es den Splash nicht sofort lädt. Ich weiß, dass es vom Manifest zwischengespeichert wird, weil es ohne eine Internetverbindung lädt. Ich habe vorher gelesen, dass der Splash erst angezeigt wird, wenn das DOM fertig ist, also vermute ich, dass das das Problem ist, aber ich weiß nicht, wie ich es beheben soll.

Answer 1

Fügen Sie es mit dem Startlink ein?

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

Ich fand auch, dass manchmal, wenn ich Änderungen an meine iPhone Web-Anwendungen habe ich musste vollständig die Verbindung auf dem Home-Bildschirm entfernen und den Prozess erneut hinzuzufügen, bevor einige der Elemente korrekt aktualisiert durchmachen - auch nach dem Update des Cache-Manifests.

Answer 2

Wenn Sie Sencha Touch verwenden, habe ich festgestellt, dass das Problem damit verbunden ist. Um zu versuchen, die Bildschirmgröße auszuarbeiten, haben sie 2 massive 500ms Verzögerungen hinzugefügt. Dies fügt der Ladezeit eine zusätzliche Sekunde hinzu.

Ich habe es geschafft, die Zeit auf 50ms auf einem iPhone zu reduzieren. Ich bin mir nicht sicher, wie gut der Code funktioniert, aber er funktioniert für mich.

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

Der Code überprüft zunächst, ob wir auf dem iPhone sind. Auf diese Weise habe ich nur die Funktionalität für das iPhone geändert. Ich habe keinen Zugang zu anderen Geräten zum Testen.

Ich denke, dass auch das besser gemacht werden kann. Zum Beispiel im Standalone-Modus auf dem iPhone wissen wir genau, wie hoch der Bildschirm ist.

Es wird für jetzt tun.

Hoffe, das hilft.

Answer 3

Dadurch wird Ihrer Web App ein Begrüßungsbildschirm hinzugefügt. Im Folgenden finden Sie die Größen, die Sie für iPad und iPhone/iPod Touch benötigen, einschließlich der Statusleiste.

iPad Landschaft - 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 (Standardauflösung)

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

iPhone/iPod Touch Portrait - 640 x 960 Pixel (Retina-Display mit hoher Auflösung)

Wenn Sie eine Web App für iPad-Kompatibilität erstellen, wird empfohlen, dass sowohl Querformat als auch Hochformat verwendet werden.

BEARBEITEN: Außerdem müssen Sie den Cache löschen und die Datei umbenennen (Beispiel von image.png zu new_image.png), damit das Gerät das neue [korrekte] Bild lädt. Der Startbildschirm wird nicht angezeigt, wenn Sie die Webanwendung zum ersten Mal starten, und möglicherweise nicht einmal die Sekunde, je nachdem, ob Sie genügend Zeit haben, um alle erforderlichen Dateien in den Speicher des Geräts zu laden.