So lassen Sie Ihre App mit JavaScript offline arbeiten

In der heutigen Welt hat uns die Konnektivität mobiler gemacht als je zuvor, was (paradoxerweise) dazu führt, dass wir manchmal offline sind: Wenn wir uns im Flugzeugmodus befinden, eine schlechte Verbindung haben, keine Daten mehr haben, in der U-Bahn sind ... und so weiter.

Ein zweiter Effekt dieser Mobilität ist das langsame Laden schwerer Websites: Amazon stellte fest, dass nur 100 Millisekunden zusätzliche Ladezeit 1% des Umsatzes kosten.

In diesen Situationen möchten wir Offline-Zugriff auf unsere Inhalte haben. Deshalb gibt es Tools wie Instapaper und Pocket. Mit Spotify und Netflix können Sie auch Medien für die Offline-Verwendung herunterladen.

Wir können leicht erkennen, dass eine Nachfrage nach dieser Funktion besteht und wie sie Ihrem Unternehmen zugute kommen kann.

Es ist Zeit für das Web, offline zu gehen.

Glücklicherweise müssen wir keine nativen Apps mehr erstellen, um dieses Ziel zu erreichen. Dank der neuen Service-Worker und der Cache-API- Funktionen können wir eine Offline-Website mit der Leistung von JavaScript erstellen .

Was ist ein Servicemitarbeiter (SW)?

Servicemitarbeiter sind JavaScript-Code, der im Hintergrund Ihrer Website ausgeführt wird, auch wenn die Seite geschlossen ist. Für die Offline-Verwendung besteht eines ihrer Ziele darin, Netzwerkanforderungen oder Bilder im Browser-Cache zu speichern.

Die Agentur BETC hat für das französische Telekommunikationsunternehmen Bouygues eine Demo-Website namens whentheinternetisdown.com erstellt. Es funktioniert nur offline und fühlt sich irgendwie magisch an. Probieren Sie es aus :)

Es ist das Caching, das die Magie der Site ausmacht: Sie können in 3 Wochen, 1 Monat, 1 Jahr, immer noch ohne Verbindung, zurückkehren und auf alle Inhalte zugreifen. - Maxime Huygue, Leiter des BETC Digital Studio

Ok, das ist cool, sag mir, wie es dann geht.

Ok, beginnen wir mit einigen Voraussetzungen:

  • Um SWs verwenden zu können, müssen Sie https auf Ihrer Website aktivieren.
  • Sie sollten ein gutes Verständnis dafür haben, wie JavaScript-Versprechen funktionieren.
  • SWs funktionieren in allen modernen Browsern außer unserem Freund IE.
  • Auch wenn es sich um JavaScript handelt, werden sie im Kontext von Web-Workern ausgeführt. Was bedeutet: kein DOM und außerhalb des Hauptthreads laufen.
  • Verstehen, wie Datenbanken funktionieren.
  • Der Code Ihres Servicemitarbeiters muss sich in einer separaten JavaScript-Datei befinden. Beispiel: service-worker.js

Lebenszyklus der Servicemitarbeiter

Um arbeiten zu können, müssen SWs in Ihrer Anwendung registriert und dann installiert werden. Sie sollten vorher prüfen, ob SWs mit Ihrem Client kompatibel sind.

1) Registrierung

Falls verfügbar, registrieren Sie Ihre SW-Datei. Es wird ein Versprechen zurückgeben, damit Sie mit Fehlern umgehen können. Sie können auch einen Bereich von URLs in den Registrierungsoptionen angeben.

2) Installation

Servicemitarbeiter sind ereignisbasiert. Kurz gesagt, Sie müssen Rückrufe an Ereignisse anhängen, wie Sie es mit einem element.addEventListener tun würden. Das erste Ereignis, das Sie verwenden müssen, ist das Installationsereignis. Dies ist ein guter Zeitpunkt, um alle wichtigen Ressourcen wie Javascript, CSS, HTML, Bilder ... zwischenzuspeichern. Hier tritt die Cache-API der Party bei!

Öffnen Sie dann die Methode oder erstellen Sie einen Cache, der mit einem gewünschten Namen verknüpft ist. Das zurückgegebene Versprechen muss in event.waitUntil () verpackt werden, wodurch die Installation des Servicemitarbeiters verzögert wird, bis das Versprechen gelöst ist. Andernfalls schlägt das Installationsereignis fehl und der Servicemitarbeiter wird verworfen.

Seien Sie beim Caching vorsichtig: Der Speicher Ihres Benutzers ist wertvoll, missbrauchen Sie ihn also nicht. Seien Sie auch vorsichtig: Das Installationsereignis kann nur einmal aufgerufen werden, und Sie müssen Ihre Software aktualisieren, um sie zu ändern.

3) Aktivierung

Dieser ist ein bisschen subtil.

Nach Abschluss der Installation ist der Servicemitarbeiter noch nicht aktiv: Wir befinden uns im installierten Zustand.

In diesem Zustand wartet es darauf, die Kontrolle über die Seite zu übernehmen. Es geht dann weiter zur nächsten Phase im Lebenszyklus, der Aktivierungsphase.

Die Aktivierungsphase ist praktisch, wenn Sie eine Software aktualisieren. Am häufigsten wird der Cache der zuvor installierten Software gelöscht.

Beachten Sie, dass der aktualisierte Worker nach erfolgreicher Installation wartet, bis der vorhandene Worker null Clients steuert (Clients überschneiden sich während einer Aktualisierung).

self.skipWaiting () verhindert das Warten, dh der Servicemitarbeiter wird aktiviert, sobald die Installation abgeschlossen ist. Der Vorteil dieser Methode ist, dass Sie Abrufereignisse schneller empfangen können.

Es spielt keine Rolle, wann Sie skipWaiting () aufrufen, solange es während oder vor dem Warten ist. Es ist ziemlich üblich, es im Installationsereignis aufzurufen.

Puh! Machen wir eine Pause und fassen zusammen, was wir gesehen haben:

  • Servicemitarbeiter sind Teile von JavaScript, die Offline-Funktionen wie das Zwischenspeichern ermöglichen.
  • Wir haben den SW-Lebenszyklus untersucht: Registrierung, Installation, Aktivierung
  • Wir haben gelernt, wie häufig verwendete Anwendungsfälle implementiert werden, z. B.: Zwischenspeichern von Ressourcen und Löschen von Caches mit der Cache-API.
  • Wir haben gesehen, dass self.skipWaiting und self.clients.claim es uns ermöglichen, SWs schneller zu aktivieren, um Ereignisse schneller zu erfassen.

Ok, mach weiter…

4) Holen

Mit dem Abrufereignis können wir Netzwerkanforderungen abfangen und Antworten speichern oder anpassen.

Der Hauptvorteil dieses Hooks besteht darin, die zwischengespeicherten Ressourcen zurückzugeben, anstatt einen Anforderungsaufruf zu tätigen. Sie sollten sich die Fetch-API ansehen, um Ihre Anforderungsaufrufe zu verarbeiten.

Wir können nicht alle Möglichkeiten, die Servicemitarbeiter bieten, in einem Artikel behandeln. Trotzdem möchte ich Sie dazu ermutigen, zu prüfen, was möglich ist: Benutzerdefiniert 404, Hintergrundsynchronisierungs-API für Offline-Analysen, ServiceWorker-seitiges Template…. Die Zukunft sieht aufregend aus!

Bisher haben wir gesehen, was ein Servicemitarbeiter ist, wie er während seines Lebenszyklus funktioniert und welche Anwendungsfälle am häufigsten auftreten, wenn er mit der Cache- und Abruf-API spielt. Diese beiden APIs bieten uns eine völlig neue Möglichkeit, URL-adressierbare Ressourcen im Browser zu verwalten. Um dieses Handbuch zu vervollständigen, sehen wir uns an, wie wir andere Datentypen speichern können, z. B. den JSON eines Benutzers aus Ihrer Datenbank.

Speichern Sie benutzerdefinierte Daten mit IndexedDB

Eine allgemeine Richtlinie für die Datenspeicherung lautet, dass URL-adressierbare Ressourcen mit der Cache-Schnittstelle und andere Daten mit IndexedDB gespeichert werden sollten. Beispielsweise sollten HTML-, CSS- und JS-Dateien im Cache gespeichert werden, während JSON-Daten in IndexedDB gespeichert werden sollten. Beachten Sie, dass dies nur eine Richtlinie ist, keine feste Regel. (Quelle)

Kurz gesagt, wir werden sehen, wann Sie nicht die Cache-API verwenden sollten, sondern stattdessen IndexedDB. Beide sind asynchron und für Servicemitarbeiter, Webmitarbeiter und die Fensterschnittstelle zugänglich. Die gute Nachricht ist, dass es auch in neueren Versionen von IE gut unterstützt wird.

IndexedDB ist eine NoSQL-Datenbank. Indizierte DB-Daten werden als Schlüssel-Wert-Paare in Objektspeichern und nicht in Tabellen gespeichert . Eine einzelne Datenbank kann eine beliebige Anzahl von Objektspeichern enthalten. Immer wenn ein Wert in einem Objektspeicher gespeichert wird, wird er einem Schlüssel zugeordnet. Es sieht aus wie das:

Ziemlich klassisch, oder? Das Wichtigste, was zu verstehen ist, ist das Konzept des Schlüsselpfades. Es teilt dem Browser mit, mit welchem ​​Schlüssel Daten aus dem Objektspeicher oder Index extrahiert werden sollen.

In diesem Beispiel sehen wir, dass unser Schlüsselpfad die Eigenschafts-ID ist und in Zeile 10 definiert ist. Anschließend geben wir alle Elemente aus der Datenbank zurück. Dies ist ein sehr grundlegender Anwendungsfall. Wenn Sie mehr über die Funktionsweise von IndexedDB erfahren möchten, empfehlen wir Ihnen, diesen hervorragenden Artikel zu lesen.

Fazit

Die Nutzung des Offline-Webs ist für die Benutzererfahrung von Vorteil, und einige Unternehmen haben damit begonnen, Beute daraus zu machen. Es basiert hauptsächlich auf Servicemitarbeitern, JavaScript-Skripten, die im Hintergrund Ihrer Website ausgeführt werden.

Wir haben gesehen, wie Sie sie während des gesamten Lebenszyklus der Servicemitarbeiter verwenden und was Sie mithilfe der Cache- und Abruf-API tun können. Die Möglichkeiten sind nahezu unbegrenzt. Seien Sie also kreativ und nicht zu gierig auf dem Gerätespeicher.

Sie können Datenbanken sogar offline verwenden: Dafür ist IndexedDB gemacht. Diese Offline-Funktionen sind sicherlich Teil der Zukunft des Webs, sodass sie gut mit der neuen Art von Websites funktionieren, die Google erstellt: Progressive Web Apps.

Weiterführende Literatur:

  • Das Offline-Kochbuch: //developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/
  • PWA und offline: //developers.google.com/web/ilt/pwa/lab-offline-quickstart
  • Übung: Zwischenspeichern von Dateien mit Service Worker: //developers.google.com/web/ilt/pwa/lab-caching-files-with-service-worker
  • Der Service Worker-Lebenszyklus: //developers.google.com/web/fundamentals/primers/service-workers/lifecycle
  • Entmystifizierung des Service Worker-Lebenszyklus: //scotch.io/tutorials/demystifying-the-service-worker-lifecycle
  • Aktivieren Sie Service Worker schneller: //davidwalsh.name/service-worker-claim
  • Live-Daten im Service Worker: //developers.google.com/web/ilt/pwa/live-data-in-the-service-worker
  • IndexedDBGrundlegende Konzepte: //developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB
  • Erste Schritte mit persistentem Offline-Speicher mit IndexedDB: //itnext.io/getting-started-with-persistent-offline-storage-with-indexeddb-1af66727246c