Offline-Daten-Caching-Mechanismus in Hybrid-Anwendung

Question

Ich entwickle Anwendung mit Angular2 und ionischen im Back-End bin ich mit Knoten. In meiner Anwendung habe ich einige HTML-Formulare diese Formulare enthalten gemeinsame Eingabefelder und Bild-Upload.

Wenn der Benutzer keine Netzwerkverbindung hat, kann der Benutzer das Formular problemlos ausfüllen. Sobald er zu diesem Zeitpunkt eine Internetverbindung hat, wird er auf den Server hochgeladen.

Wie können wir diese Funktion in Web und Mobile separat implementieren?

Was ist die beste Lösung für dieses Szenario. Bitte schlage vor, ich habe kein klares Bild von diesem.

Answer 1

Um zu verstehen, welche Offline-Szenarien gute Kandidaten für eine mobile Web-App sind, hilft es, zuerst die Schlüsseltechnologien zu verstehen, die dies ermöglichen.

Mobil-Web-Anwendungen lassen sich mit drei Kernkompetenzen aufgebaut werden, und alle diese sind Teil der neuen HTML5-Standards:

1. Browser-Anwendung Caching von Seiten
2. Lokale Speicherung
3. Lokale Datenbank

Browser-Anwendung Caching ermöglicht die Erstellung eines Manifests, das Seiten auflistet, die zwischengespeichert und zur Verfügung gestellt werden sollten offline gehen. Wenn Sie eine URL besuchen, wird normalerweise eine Serveranfrage gestellt, um die Seite zurückzugeben. Durch das Einrichten eines Anwendungs-Cache-Manifests wird dem Browser mitgeteilt, wie er bereits heruntergeladene Seiten verwenden kann, anstatt sofort einen Fehler anzuzeigen, wenn keine Netzwerkverbindung mehr besteht.

Lokaler Speicher ist ein Standard, der lokale Web-App-Daten (auch wenn der Browser heruntergefahren wird) mit einem Schlüssel/Wert-System speichert, das ähnlich wie Browser-Cookies funktioniert. Es unterscheidet sich jedoch von Browser-Cookies in zwei wichtigen Punkten. Erstens werden Cookies bei jeder HTTP-Anforderung erneut an den Server gesendet, und es würde viel Bandbreite verschwenden, alle Offline-Daten erneut zu senden, wenn der Server sie nicht benötigt. Zweitens neigen Cookies dazu, bei etwa 4.000 Daten zu einem Maximum zu kommen, während lokaler Speicher in der Regel eine Anwendung von bis zu 5 MB an Daten bereitstellt, mit denen pro Domäne gearbeitet werden kann. 5 MB klingt vielleicht nicht viel, aber wenn es sorgfältig verwendet wird, kann es hinsichtlich der lokalen Offline-Speicherung sehr weit gehen.

Die lokale Datenbank entfernt die 5 MB-Grenze des lokalen Speichers und ermöglicht die Indizierung von Daten, sodass mehrere Eigenschaften schnell abgefragt werden können. Dies ist derzeit nur ein von HTML5 vorgeschlagener Standard; nur Internet Explorer und Firefox haben es bisher implementiert. Safari und Chrome verwenden ein älteres veraltetes System namens Web SQL. Dies bedeutet, dass Sie, wenn Sie diese Funktionalität benötigen, erhebliche zusätzliche Arbeit und Komplexität benötigen, um beide Standards in allen gängigen Browsern zu unterstützen. Hoffentlich wird das nicht immer der Fall sein und die großen Browser werden den endgültigen HTML5-Spezifikationen entsprechen.

Answer 2

Wenn der Benutzer offline ist, speichern Sie die Formulardaten in localStorage, und wenn er online geht, holen Sie sich die Daten von localStorage, laden Sie sie auf den Server und entfernen Sie die Daten von localStorage.

localStorage.setItem('form_data', formData) //Store data in localStorage 

localStorage.getItem('form_data') //Get form localStorage 

localStorage.removeItem('form_data') //Remove from localStrage 

hinzufügen eventlistner auf Fenster

if (typeof navigator.onLine !== 'undefined') { 
    window.addEventListener('offline', function (ev) { 
     userOffline(); 
    }); 
    window.addEventListener('online', function (ev) { 
     userOnline(); 
    }); 
} 


function userOnline() {} // when user online 
function userOffline() {} // when user offline