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

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 ")

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.

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

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.

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.

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.

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").

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.

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.

Ich habe eine Offline-App geschrieben, die in 4.2 und 4.2.1 immer noch zu funktionieren scheint. Der Beitrag ist etwas staubig, aber der Code läuft immer noch:

http://kentbrewster.com/backchannel/

Remy Sharp hat einen neueren Beitrag mit Code, der auch hier funktioniert:

http://remysharp.com/2011/01/31/simple-offline-application/

Seine App:

http://rem.im/boggle/

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!

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!

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 :(

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.]