Offline-iOS-Webanwendung: Lädt mein Manifest, funktioniert jedoch nicht offline

74

Ich schreibe eine Web-App, die unter iOS offline verwendet werden kann. Ich habe ein Manifest erstellt, diene es als text/cache-manifestund es funktioniert normalerweise einwandfrei, wenn ich in Safari ausgeführt werde.

Wenn ich es als App zu meinem Startbildschirm hinzufüge und dann den Flugzeugmodus einschalte, kann es die App überhaupt nicht öffnen - ich erhalte eine Fehlermeldung und es wird angeboten, die App zu schließen. (Ich dachte, das wäre der gesamte Zweck einer Offline-App!)

  • Wenn ich die App zum ersten Mal online lade, kann ich in meinen Protokollen sehen, dass jede im Manifest aufgeführte Seite angefordert wird.

  • Wenn ich den Flugzeugmodus ausschalte und die App lade, kann ich sehen, dass die erste angeforderte Datei meine main.html-Datei ist (die beide im Manifest aufgeführt ist und das manifest=...Attribut hat). Es fordert dann das Manifest und alle meine anderen Dateien an und erhält 200 für alle (und 304 für alles, was beim Laden ein zweites Mal angefordert wird).

  • Wenn ich die Seite in Chrome lade und herumklicke, zeigen die Protokolle, dass das einzige, was auf dem Server erreicht werden soll, "/favicon.ico" ist (ein 404, und ich glaube nicht, dass iOS Safari versucht, es zu laden , wie auch immer). Alle im Manifest aufgeführten Dateien sind gültig und werden fehlerfrei bereitgestellt.

  • Der Chrome-Inspektor listet unter "APPLICATION CACHE" alle zwischengespeicherten Dateien auf, die ich erwartet habe. Der gesamte Satz von Dateien ist ungefähr 50 KB groß, weit unter jeder Grenze für Offline-Ressourcen, die ich gefunden habe.

Soll das funktionieren, dh soll ich eine Offline-iOS-App nur mit HTML / CSS / JS erstellen können? Und wo finde ich heraus, warum es nicht funktioniert, offline zu arbeiten?

(Verwandt, klingt aber für mich nicht ganz gleich, da es sich um Safari und nicht um eine eigenständige App handelt: " Eine Web-App kann nicht offline auf dem iPod funktionieren ")

html  ios  ios4  mobile-safari  offline 
— Ken
quelle

Antworten:

22

Ich bestätige, dass der Name 'cache.manifest' das Offline-Caching-Problem in IOS 4.3 gelöst hat. Ein anderer Name hat einfach nicht funktioniert.

— Elvis Pfutzenreuter
quelle
+1 das funktionierte für mich - obwohl ich sehen konnte, dass das iPad mein vorheriges Manifest namens offline.manifest abrief und verwendete
— Paul Dixon
7

Ich fand das Debuggen von HTML5-Offline-Apps schmerzhaft. Der Code aus diesem Artikel hat mir geholfen herauszufinden, was mit meiner App nicht stimmt:

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

Debuggen von HTML 5 Offline Application Cache von Jonathan Stark

Wenn Sie Offline-Zugriff auf Ihre Webanwendung gewähren möchten, ist der in HTML5 verfügbare Offline-Anwendungscache ein Killer. Es ist jedoch eine riesige PITA zum Debuggen, besonders wenn Sie immer noch versuchen, sich darum zu kümmern.

Wenn Sie Probleme mit dem Cache-Manifest haben, fügen Sie Ihrer HTML-Hauptseite das folgende JavaScript hinzu und zeigen Sie die Ausgabe in der Konsole mit Firebug in Firefox oder Debug> Show Error Console in Safari an.

Wenn Sie Fragen haben, PLMK in den Kommentaren.

HTH,
j

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);
— Bert F.
quelle
1
Dies ist ein ordentliches kleines Stück JS, aber bisher hat es mir nicht geholfen, etwas Neues zu lernen. Das Herunterladen / Überprüfen / Leerlauf im Protokoll sieht genau so aus, wie ich es erwartet hätte.
— Ken
@ Ken - tut mir leid das zu hören. Es hat mir definitiv geholfen, meine Fehler einzugrenzen (obwohl es immer noch schwierig war, die genaue Ursache herauszufinden). Es gab mir auch einige gute Rückmeldungen darüber, ob der Cache erfolgreich geladen / neu geladen wurde (bevor ich das wusste, testete ich nach jeder Änderung offline - nachdem ich das wusste, wusste ich, dass ich das Updateready-Ereignis erfolgreich abrufen musste, bevor es sich überhaupt lohnte, es auszuprobieren es offline).
— Bert F
Hmm. Muss ich Sorge über updatereadyund swapCache()und so? Ich hatte den Eindruck, dass ich, da ich eine App erstelle, die vollständig offline ist (nach dem ersten Laden überhaupt keine Serverinteraktion), einfach meine Dateinamen in das Cache-Manifest einfügen könnte, und das war's. Ist es in meinem Fall komplexer?
— Ken
5

Manchmal gerät eine Anwendungs-Cache-Gruppe in MobileSafari in einen schlechten Zustand. Sie lädt jedes Element im Cache herunter und löst am Ende ein generisches Cache-Fehlerereignis aus. Eine Anwendungs-Cache-Gruppe basiert gemäß der Spezifikation auf der absoluten URL des Manifests. Ich habe festgestellt, dass Sie durch Ändern des Pfads zum Manifest (z. B. cache2.manifest usw.) eine neue Cache-Gruppe erhalten und das Problem umgehen, wenn dieser Fehler auftritt. Ich kann dafür bürgen, dass alle unsere Web-Apps mit 4.2 und 4.3 im Vollbildmodus offline funktionieren.

— Joseph
quelle
3

Keine Offline-Webanwendung (ab iOS 4.2) kann ohne Internetverbindung (dh auch im Flugzeugmodus) ausgeführt werden, wenn sie <meta name="apple-mobile-web-app-capable" content="yes" />im HTML-Kopfbereich verwendet wird. Ich habe dies mit jedem Beispiel überprüft, das ich gesehen habe, und mit denen, die Safari zum Rendern der Site verwenden, funktioniert einwandfrei, aber wenn Sie dieses Meta-Tag einfügen, funktioniert es nicht. Probieren Sie Ihre App ohne aus und Sie werden sehen, was ich meine.

— jsejcksn
quelle
1
@ pattern86 Interessanterweise habe ich hier eine Website (die sich noch entwickelt, kann sie leider nicht teilen), die mit <meta name = "apple-mobile-web-app-fähig" content = "yes" / anscheinend gut funktioniert. >. Ich kann den Browser und die Offline-Web-App schließen, den Flugzeugmodus einschalten und die Offline-Web-App weiterhin ohne Probleme laden. Ist ein anderes Verhalten erforderlich, um diesen Fehler auszulösen? Ich möchte sicherstellen, dass wir nicht in freier Wildbahn darauf
— Rowan
1
Seltsamerweise funktioniert PieGuy auch für mich. Ich bin auf 4.2 (8C134), was das 4.2GM ist. Ich werde versuchen, ein Update auf 4.2.1 und sehen, was passiert :(
— Rowan
@Rowan Ich beziehe mich auf Offline-Webanwendungen als solche, die dem Startbildschirm hinzugefügt werden. Wenn Sie sie in Safari mit einem Lesezeichen versehen und dort verwenden, sollte es weiterhin einwandfrei funktionieren. Habe dies noch nicht in iOS 4.3 getestet.
— Jsejcksn
@ pattern86 Ja, ich meinte auch Homescreen-Web-Apps. Ich hatte die Möglichkeit, meine Website mit 4.2.1 und 4.3 zu testen - in beiden Fällen hat es gut funktioniert. Es scheint also einen anderen Effekt zu geben (das Manifest ist so empfindlich für viele Dinge), aber das Manifest als Ganzes scheint in der Lage zu sein, wie beabsichtigt zu funktionieren.
— Rowan
@ Rowan Ich bin froh, dass du es zum Laufen gebracht hast! Ich werde es irgendwann an diesem Wochenende versuchen.
— Jsejcksn
3

Ich habe festgestellt, dass das Löschen des Safari-Caches nach dem Aktivieren des Flugzeugmodus eine effektive Methode ist, um zu testen, ob die App wirklich offline funktioniert.

Ich wurde manchmal getäuscht zu denken, dass der Anwendungscache funktionierte, wenn es nicht war.

— Martypicco
quelle
2

Ich hatte Probleme mit diesem iOS 4.3-Problem "kein Offline-Cache", seit ich mein iPad von 4.2 auf 4.3.1 aktualisiert habe. Ich habe in einem anderen Beitrag auf dieser Seite gesehen, dass es in 4.3.2 wieder funktioniert. Also habe ich wieder per iPad aktualisiert, jetzt auf iOS 4.3.3. Aber das Offline-Caching konnte immer noch nicht funktionieren, bis ich meine Manifestdatei in "cache.manifest" umbenannt habe. Dann funktionierte das Caching wieder und ich konnte meine HTML5-Offline-App über den Startbildschirm ausführen. Ich musste die Datei favicon.ico nicht in das Cache-Manifest einfügen. Und ich hatte auch Vollbild (Setzen der "Apple-Mobile-Web-App-fähigen" auf "Ja").

— CK Lee
quelle
1

Ich habe mehrere Offline- und On / Offline-Webanwendungen.

Wenn ich den Flughafenmodus ausschalte, erhalte ich eine Anfrage für das Manifest und einige andere Dateien.

Ich erhalte keine Anfragen nach Bildern, JavaScript, CSS oder zwischengespeicherten AJAX-Dateien.

Wenn Sie Anforderungen für Ihre Ressourcen sehen, werden diese von IOS nicht zwischengespeichert.

Safari ist im Allgemeinen wählerischer mit Manifesten.

Ich schlage vor, Sie versuchen Safari auf Ihrem Computer.

— JakeCigar
quelle
Nein, wie oben erwähnt (Safari ist dasselbe wie Chrome, hier AFAICT), wird niemals versucht, eine Ressource (außer /favicon.ico) von einem Desktop-Browser anzufordern . Dies geschieht nur über iOS Safari im Flugzeugmodus (oder vermutlich auf andere Weise offline).
— Ken
Ich würde die Seite gerne sehen. Ich starte Chrome / Safari / Firefox auf meinem Mac zu Hause und iOS auf iPhone und iPad.
— JakeCigar
1

Ich bin heute unter iOS 4.3 auf dasselbe Problem gestoßen. Ich konnte das Problem beheben, indem ich eine favicon.ico-Datei hinzufügte und sie auch dem Manifest hinzufügte.

— Timo
quelle
1

Nachdem ich tagelang damit zu tun hatte, Offline-Webanwendungen mithilfe der HTTP-Authentifizierung des Webservers auf einem iPhone / iPod Touch zum Laufen zu bringen, entdeckte ich diese nützlichen Nuggets:

  1. Stellen Sie sicher, dass sich Safari im URL-Stammverzeichnis der Web-App befindet, wenn Sie auf "Zum Startbildschirm hinzufügen" tippen. Ich habe jQuery Mobile verwendet und manchmal den Link mit "/ # pageId" hinzugefügt. Verursachte Ärger.

  2. Führen Sie Ihre Ajax-Anrufe seriell aus. Dies ist möglicherweise nur wichtig, wenn Ihre Web-App die HTTP-Authentifizierung verwendet, meine App jedoch eine ganze Reihe von Ajax-Aufrufen beim parallelen Laden der Seite auslöste und die App am "Apple-Touch-Startup-Image" hängen blieb.

  3. Ajax-Aufrufe sind "erfolgreich", wenn sie offline sind (zumindest mit Prototype.js). Testen Sie die Ajax-Antwort auf ein tatsächliches Datenelement, nicht nur auf den HTTP-Status. Ich habe dies verwendet, um die Anzeige von zwischengespeicherten (SQL) oder Live-Daten zu testen.

  4. Verwenden Sie im Manifest "NETWORK: \ n * \ n". Nach allem, was ich aufbringen konnte, ist dies eine Sammelaussage für alles, was im Abschnitt "CACHE:" nicht explizit angegeben ist. Verwenden Sie Chrome, um sicherzustellen, dass Ihr Manifest korrekt ist. Überprüfen Sie die Chrome-Konsole auf Fehler.

  5. Nicht direkt verwandt, aber hat mich ein bisschen gestolpert, openDatabase.transaction () -Aufrufe sind ASYNCHRON! Das heißt, die Linie des JS - Code nach der Transaktion ( execute(), error(), success()) werden vor dem Ausführen success()Funktion.

Viel Glück!

— Chaz Meister Rock
quelle
1

Ich fand diese Lösung, die für mich zu funktionieren schien, da ich während meiner Entwicklung auch auf dieses Problem stieß. Dieses Update hat bisher für mich und auch für andere Personen, mit denen ich es testen wollte, gut funktioniert, und ich kann es nach dem Zwischenspeichern und so weiter offline (im Flugzeugmodus) und vom Startbildschirm aus zum Laufen bringen. Ich habe auf meiner Website einen Beitrag darüber geschrieben:

http://www.offlinewebapp.com/solved-apple-mobile-web-app-capable-manifest-error/

  1. Löschen Sie Ihr aktuelles Web-App-Symbol auf dem Startbildschirm.
  2. Gehen Sie zu den Einstellungen und leeren Sie den Safari-Browser-Cache.
  3. Tippen Sie doppelt auf Ihre Home-Schaltfläche, um die Multitasking-Leiste zu öffnen. Suchen Sie die Safari, halten Sie Ihren Finger darauf und verlassen Sie sie.

Bitte lassen Sie mich wissen, ob dies auch für Sie funktioniert! Viel Glück!

— Hallojeffy
quelle
1

Ich habe eine App geschrieben und sie funktioniert gut über den mobilen Browser, aber beim Hinzufügen des Desktops ... funktioniert nicht. Ich denke, Apple hat IOS4 aufgegeben und alle Bemühungen sind jetzt auf OS5. Schande :(

— Graeme Leighfield
quelle
1

Ich habe eine mögliche Problemumgehung dafür - es scheint ein bisschen verrückt zu sein, aber hier geht es weiter ... Ich arbeite viel mit den Apps cache.manifest und Vollbild (hier ist ein Test, wenn Sie ihn benötigen: http://www.mrspeaker.net) / 2010/07/12 / argy-bargy / - Zum Startbildschirm hinzufügen, dann den Flugmodus einschalten und starten - zumindest ab iOS 4.2.1)

Eine seltsame Sache, die ich gefunden habe, ist, dass es manchmal so aussieht, als ob eine Art "Meta" -Information in Dateien sie durch das Zwischenspeichern durcheinander bringen kann. Haben Sie jemals bemerkt, dass in Bash, wenn Sie ein "ls" machen, einige Dateien (abhängig von Ihrer Farbe) Einstellungen) werden ohne ersichtlichen Grund hervorgehoben? Dateien können Metadaten enthalten, die das Betriebssystem (glaube ich) automatisch hinzufügt - und es gibt Möglichkeiten, sie zu entfernen ... Ich kann mich nicht erinnern, warum, aber hier sind einige weitere Details: Metadaten aus Dateien in Snow Leopard entfernen

Nachdem ich mir eines Tages die Haare ausgerissen hatte - und mich geweigert aufzugeben, weil ich wusste, dass es hätte funktionieren sollen ... Chrome sagte, es habe alle Dateien geladen, endete aber mit einem generischen Fehler. Am Ende habe ich die Projektstruktur mit leeren Dateien neu erstellt und den Inhalt kopiert / eingefügt. Es hat funktioniert - hat angefangen zu cachen, wie es sollte!

Als ich mir die Dateien ansah, bemerkte ich, dass es einige Meta-Informationen gab. Ich habe versucht, diese Informationen zu bereinigen, und das ursprüngliche Projekt hat wieder funktioniert. Ich bin mir nicht sicher, ob dies der Grund war, warum es wieder funktioniert hat - vielleicht war es nur ein Zufall.

Weil es funktioniert hat, habe ich nicht zu viel darüber nachgedacht. Das gleiche Problem trat einige Monate später erneut auf und der Trick zum Kopieren / Einfügen funktionierte erneut. Ich war beschäftigt, also habe ich nicht weiter nachgeforscht - aber ich habe geschworen, dass ich beim nächsten Mal auf den Grund gehen würde ... aber ich musste es noch nicht.

Puh. Wie auch immer, ich bin froh, dass ich das irgendwo aufschreiben musste ...

[UPDATE: Monate und Monate später - Ich konnte dies nicht reproduzieren, daher glaube ich nicht, dass es sich um Metadaten handelt.]

— Herr Sprecher
quelle
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.