Da Internetverbindungen instabil oder nicht vorhanden sein können, müssen Sie die Offlineverbindung berücksichtigen: Schreiben Sie Ihre Anwendung so, als hätte sie keine Internetverbindung. Sobald Ihre Anwendung offline funktioniert, fügen Sie alle Netzwerkfunktionen hinzu, die Sie benötigen, damit Ihre Anwendung mehr tun kann, wenn sie online ist. Lesen Sie weiter, um Tipps zur Implementierung Ihrer Offline-fähigen App zu erhalten.
Überblick
Folgendes ist für Chrome-Apps kostenlos:
- Die Dateien Ihrer App – der gesamte JavaScript-, CSS- und Schriftarten sowie andere benötigte Ressourcen (z. B. Bilder) – sind bereits heruntergeladen.
- Ihre App kann kleine Datenmengen mithilfe der Chrome Storage API speichern und optional synchronisieren.
- Ihre App kann Änderungen bei der Verbindung erkennen, indem Online- und Offlineereignisse erfasst werden.
Diese Möglichkeiten reichen jedoch nicht aus, um sicherzustellen, dass Ihre App auch offline funktioniert. Für Ihre Offline-App sollten folgende Regeln eingehalten werden:
- Verwenden Sie nach Möglichkeit lokale Daten.
- Wenn Sie Ressourcen aus dem Internet verwenden, rufen Sie diese mit
XMLHttpRequestab und speichern Sie die Daten dann lokal. Mit der Chrome Storage API, der IndexedDB oder der Filesystem API können Sie Daten lokal speichern. - Benutzeroberfläche der App von den Daten trennen
- Durch die Trennung von Benutzeroberfläche und Daten wird nicht nur das Design deiner App verbessert und die Offlinenutzung erleichtert. Du kannst auch andere Ansichten der Daten der Nutzer bereitstellen. Mit einem MVC-Framework können Sie die UI und die Daten voneinander trennen.
- Gehe davon aus, dass deine App jederzeit geschlossen werden kann.
- Der Anwendungsstatus wird gespeichert (nach Möglichkeit lokal und per Fernzugriff), damit Nutzer dort weiterarbeiten können, wo sie aufgehört haben.
- Testen Sie Ihre App gründlich.
- Sorge dafür, dass deine App sowohl in häufigen als auch in schwierigen Szenarien einwandfrei funktioniert.
Sicherheitsbeschränkungen
Chrome-Apps können ihre Ressourcen nur begrenzt platzieren:
- Da lokale Daten auf dem Computer des Nutzers sichtbar sind und nicht sicher verschlüsselt werden können, müssen vertrauliche Daten auf dem Server bleiben. Speichern Sie beispielsweise Passwörter oder Kreditkartennummern nicht lokal.
- Der gesamte von der App ausgeführte JavaScript muss sich im App-Paket befinden. Sie können nicht inline eingefügt werden.
Alle CSS-Stile, Bilder und Schriftarten können sich anfänglich entweder im Paket der App oder unter einer Remote-URL befinden. Wenn es sich um eine Remote-Ressource handelt, können Sie sie nicht in Ihrem HTML-Code angeben. Rufen Sie die Daten stattdessen mit
XMLHttpRequestab (siehe Auf externe Ressourcen verweisen). Verweisen Sie dann entweder auf die Daten mit einer Blob-URL oder speichern Sie sie und laden Sie sie dann mithilfe der Filesystem API.
Sie können jedoch große Medienressourcen wie Videos und Töne von externen Websites laden. Ein Grund für diese Ausnahme von der Regel ist, dass die Elemente <video> und <audio> ein gutes Fallback-Verhalten haben, wenn eine App nur eingeschränkt oder gar keine Verbindung hat. Ein weiterer Grund ist, dass das Abrufen und Bereitstellen von Medien mit XMLHttpRequest und Blob-URLs derzeit weder Streaming noch teilweise Zwischenspeichern zulässt.
Wenn Sie einen iFrame in einer Sandbox bereitstellen möchten, können Sie ein <webview>-Tag erstellen. Die Inhalte können remote sein, hat aber keinen direkten Zugriff auf die APIs der Chrome-Anwendung (siehe Externe Webseiten einbetten).
Einige der Einschränkungen für Chrome-Apps werden durch die Content Security Policy (CSP) erzwungen, die immer die folgende ist und für Chrome-Apps nicht geändert werden kann:
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 angeben
Es wird davon ausgegangen, dass sich Ihre App offline gut verhält. Ist dies nicht der Fall, sollten Sie darauf hinweisen, sodass das Startsymbol abgeblendet wird, wenn der Nutzer offline ist. Dazu setzen Sie offline_enabled in der App-Manifestdatei auf false:
{
"name": "My app",
...
"offline_enabled": false,
...
}
Daten lokal speichern
In der folgenden Tabelle sind die Optionen zum lokalen Speichern von Daten aufgeführt (siehe auch Daten verwalten).
| API | Beste Verwendung | Hinweise |
|---|---|---|
| Chrome Storage API | Kleine Mengen von Zeichenfolgendaten | Ideal für Einstellungen und Status. Einfache Remote-Synchronisierung Aufgrund von Kontingenten nicht für größere Datenmengen geeignet. |
| IndexedDB-API | Strukturierte Daten | Ermöglicht eine schnelle Datensuche. Verwendung mit der Berechtigung „unlimitedStorage“. |
| Dateisystem-API | Sonstiges | Bietet einen Sandbox-Bereich, in dem Sie Dateien speichern können. Verwendung mit der Berechtigung „unlimitedStorage“. |
Daten aus der Ferne speichern
Im Allgemeinen liegt es bei Ihnen, wie Sie Daten aus der Ferne speichern. Einige Frameworks und APIs können Ihnen dabei helfen (siehe MVC-Architektur). Wenn Sie die Chrome Storage API verwenden, werden alle synchronisierbaren Daten automatisch synchronisiert, wenn die Anwendung online ist und der Nutzer in Chrome angemeldet ist. Wenn der Nutzer nicht angemeldet ist, wird er dazu aufgefordert. Beachten Sie jedoch, dass die synchronisierten Daten des Nutzers gelöscht werden, wenn er Ihre App deinstalliert. {QUESTION: true?}
Sie sollten die Nutzerdaten nach der Deinstallation Ihrer App mindestens 30 Tage lang speichern, damit Nutzer sie bei einer Neuinstallation Ihrer App gut finden können.
Benutzeroberfläche von Daten trennen
Die Verwendung eines MVC-Frameworks kann Ihnen dabei helfen, Ihre App so zu gestalten und zu implementieren, dass die Daten vollständig von der Ansicht der Daten durch die App getrennt sind. 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 liefern. Denken Sie an 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 aller öffentlichen Daten bereitstellen. Eine Website-Ansicht kann nicht nur nützlich sein, wenn Nutzer nicht in Chrome angemeldet sind, sondern auch Suchmaschinen ermöglichen, die Daten zu finden.
Testen
Prüfen Sie, ob Ihre App unter den folgenden Umständen einwandfrei funktioniert:
- Die App wird installiert und sofort offline geht. Die erste Verwendung der App ist also offline.
- Die App wird auf einem Computer installiert und dann mit einem anderen synchronisiert.
- Die App wird deinstalliert und dann sofort wieder installiert.
- Die Anwendung wird mit demselben Profil auf zwei Computern gleichzeitig ausgeführt. Die App muss sich angemessen verhalten, wenn ein Computer offline geht, der Nutzer eine Reihe von Aktionen auf diesem Computer ausführt und der Computer dann wieder online geht.
- Die App ist mit Unterbrechungen verbunden und wechselt häufig zwischen Online- und Offlineaktivitäten.
Achten Sie außerdem darauf, dass die App keine vertraulichen Nutzerdaten wie Passwörter auf dem Gerät des Nutzers speichert.