Offline zuerst

Da Internetverbindungen möglicherweise instabil oder gar nicht vorhanden sind, sollten Sie eventuell offline sein: schreiben Sie Ihre Anwendung so, als hätte sie keine Internetverbindung. Sobald Ihre App offline funktioniert, fügen Sie Netzwerkfunktionen, die deine App benötigt, um mehr erledigen zu können, wenn sie online ist. Lesen Sie weiter, um Tipps zu erhalten, Implementierung Ihrer offline aktivierten App

Übersicht

Für Chrome-Apps ist Folgendes kostenlos:

  • Ihre App-Dateien, d. h. alle JavaScript-, CSS- und Schriftarten sowie weitere Ressourcen, die sie benötigt, z. B. Bilder) – bereits heruntergeladen wurden.
  • Ihre App kann mit der Chrome Storage API kleine Datenmengen speichern und optional synchronisieren.
  • Ihre App kann Veränderungen bei der Verbindung erkennen, indem Online- und Offlineereignisse überwacht werden.

Diese Fähigkeiten reichen jedoch nicht aus, um zu garantieren, dass Ihre App auch offline funktioniert. Dein Offline-Modus App diese Regeln befolgen:

Verwenden Sie nach Möglichkeit lokale Daten.
Wenn du Ressourcen aus dem Internet verwendest, verwende XMLHttpRequest, um sie abzurufen, und speichere dann die Daten lokal. Mit der Chrome Storage API, IndexedDB oder Filesystem API können Sie Daten lokal speichern.
Trennen Sie die Benutzeroberfläche Ihrer App von ihren Daten.
Durch die Trennung von UI und Daten wird nicht nur das Design deiner App verbessert, sondern auch die Aktivierung Offlinenutzung, sondern auch andere Ansichten der Nutzerdaten zur Verfügung stellen. Ein MVC-Framework kann dabei helfen, Benutzeroberfläche und Daten sind dabei getrennt.
Gehe davon aus, dass deine App jederzeit geschlossen werden kann.
Den App-Status speichern (wenn möglich sowohl lokal als auch per Fernzugriff), damit der Nutzer den Vorgang überall fortsetzen kann sie aufgehört haben.
Testen Sie Ihre App gründlich.
Sorge dafür, dass deine App sowohl in häufigen als auch in kniffligen Szenarien gut funktioniert.

Sicherheitseinschränkungen

Chrome-Apps können ihre Ressourcen nur eingeschränkt platzieren:

  • Da lokale Daten auf dem Gerät des Nutzers sichtbar sind und nicht sicher verschlüsselt werden können, sind vertrauliche müssen die Daten auf dem Server bleiben. Speichern Sie beispielsweise Passwörter oder Kreditkartennummern nicht lokal.
  • Sämtliches JavaScript, das von der App ausgeführt wird, muss sich im App-Paket befinden. Es darf nicht inline sein.
  • Alle CSS-Stile, Bilder und Schriftarten können sich anfänglich im App-Paket befinden. oder eine Remote-URL gesendet. Ist die Ressource extern, können Sie sie nicht im HTML-Code angeben. Holen Sie sich stattdessen Daten mit XMLHttpRequest (siehe Auf externe Ressourcen verweisen). Sehen Sie sich dann entweder das mit einer Blob-URL an oder (noch besser) speichern und laden Sie die Daten mithilfe der Filesystem API.

Sie können jedoch große Medienressourcen wie Videos und Audioinhalte von externen Websites laden. Eins Grund für diese Ausnahme von der Regel ist, dass die Elemente <video> und <audio> ein gutes Fallback haben. wenn eine App nur über eine eingeschränkte oder keine Verbindung verfügt. Ein weiterer Grund ist, dass das Abrufen und Bei Medien mit XMLHttpRequest- und Blob-URLs ist das Streaming oder die teilweise Zwischenspeicherung derzeit nicht möglich.

Wenn Sie einen iFrame in einer Sandbox bereitstellen möchten, können Sie ein <webview>-Tag erstellen. Es kann sich dabei um einen Remote-Inhalt handeln, hat keinen direkten Zugriff auf die APIs der Chrome-App (siehe Externe Webseiten einbetten).

Einige der Einschränkungen für Chrome-Apps werden über die Content Security Policy (CSP) erzwungen. ist immer Folgendes und kann für Chrome-Apps nicht geändert werden:

default-src 'self';
connect-src * data: blob: filesystem:;
style-src 'self' blob: data: filesystem: 'unsafe-inline';
img-src 'self' blob: data: filesystem:;
frame-src 'self' blob: data: filesystem:;
font-src 'self' blob: data: filesystem:;
media-src * data: blob: filesystem:;

offline_enabled festlegen

Es wird davon ausgegangen, dass sich Ihre App auch offline einwandfrei verhält. Ist dies nicht der Fall, sollten Sie dies bekannt machen. dass das Startsymbol abgeblendet ist, wenn der Nutzer offline ist. Setze dazu offline_enabled auf false. in der App-Manifestdatei:

{
  "name": "My app",
  ...
  "offline_enabled": false,
  ...
}

Daten lokal speichern

In der folgenden Tabelle sind die Optionen für das lokale Speichern von Daten aufgeführt (siehe auch Daten verwalten).

APIBeste VerwendungHinweise
Chrome Storage APIKleine Mengen von StringdatenIdeal für Einstellungen und Status. Einfache Synchronisierung aus der Ferne (aber nicht erforderlich). Aufgrund von Kontingenten nicht für größere Datenmengen geeignet.
IndexedDB-APIStrukturierte DatenErmöglicht eine schnelle Datensuche. Wird mit der Berechtigung „unlimitedStorage“ verwendet.
Dateisystem-APISonstigesStellt einen durch die Sandboxing-Technologie geschützten Bereich zum Speichern von Dateien bereit. Wird mit der Berechtigung „unlimitedStorage“ verwendet.

Daten aus der Ferne speichern

Im Allgemeinen können Sie selbst entscheiden, wie Sie Daten remote speichern. Einige Frameworks und APIs können jedoch hilfreich sein (siehe MVC). Architektur). Wenn Sie die Chrome Storage API verwenden, werden alle synchronisierbaren Daten automatisch synchronisiert, wenn die App online und der Nutzer in Chrome angemeldet ist. Ist der Nutzer nicht angemeldet, wird er aufgefordert, sich anzumelden. Die synchronisierten Daten des Nutzers werden jedoch gelöscht, Ihre App deinstalliert. {QUESTION: true?}

Speichern Sie die nach der Deinstallation der App noch mindestens 30 Tage lang auf Daten zu erheben, damit Nutzer wenn sie deine App neu installieren.

Trennung der Benutzeroberfläche von Daten

Die Verwendung eines MVC-Frameworks kann Ihnen helfen, Ihre App so zu gestalten und zu implementieren, dass die Daten vollständig von der App-Ansicht der Daten getrennt. Eine Liste der MVC-Frameworks finden Sie unter MVC-Architektur.

Wenn Ihre App mit einem benutzerdefinierten Server kommuniziert, sollte der Server Daten und keine HTML-Blöcke bereitstellen. Denken Sie an für RESTful APIs.

Sobald Ihre Daten von Ihrer App getrennt sind, ist es viel einfacher, alternative Ansichten der Daten bereitzustellen. Sie können beispielsweise eine Website-Ansicht beliebiger öffentlicher Daten bereitstellen. Ein Website-Aufruf kann nicht nur ist nützlich, wenn der Nutzer Chrome nicht verwenden kann. Suchmaschinen können diese Daten jedoch unter Umständen finden.

Test

Prüfen Sie, ob Ihre App unter den folgenden Umständen einwandfrei funktioniert:

  • Die App wird installiert und dann sofort offline geschaltet. Mit anderen Worten: Die erste Nutzung der App ist offline.
  • Die App wird auf einem Computer installiert und dann mit einem anderen Computer synchronisiert.
  • Die App wird deinstalliert und dann sofort wieder installiert.
  • Die Anwendung wird auf zwei Computern gleichzeitig mit demselben Profil ausgeführt. Die App muss sich so verhalten, Wenn ein Computer offline geht, erledigt der Nutzer eine Reihe von Dingen auf diesem Computer, kommt der Computer wieder online.
  • Die Verbindung zur App ist zeitweise unterbrochen und wechselt häufig zwischen Online- und Offline-Verbindung.

Achten Sie außerdem darauf, dass die App keine vertraulichen Nutzerdaten wie Passwörter auf dem Maschine.