Workbox Tutorial – PWA von Google | Progressive Web Apps 2020

Workbox Google Coding Lab Steffen Lippke Guide Tutorials
Workbox Google Coding Lab Steffen Lippke Guide Tutorials

Diese Workbox Tutorial soll Dir zeigen, was die Workbox ist und wie Du jedes Deiner Web-Projekte mit Workbox ausstatten kannst.

Workbox soll das Internet der Zukunft beschleunigen – durch Progressiven Web Apps und Caching.

Beginnen wir mit dem Tutorial:

Was ist Google Workbox PWA?

Google implementiert die Workbox als einen fertigen ServiceWorker, der mit geringer Konfiguration die Performance auf Deiner Webseite erhöht. Der JavaScript-ServiceWorker schafft eine erhöhte Effizienz Deiner Webseite mit Caching-Strategien. Der ServiceWorker nutzt die Technologien einer Progressiven Web App (PWA).

Die Workbox von Google ermöglicht …

  • Instantes (Zweit) Laden von Deine Bildern, Texten und Code auf Deiner Webseite
  • Umsetzung von intelligenten Caching- und Routing-Strategien
  • dauerhafte Offline-Unterstützung von Webseiten
  • Grundlage für die Progressive Web App (PWA)

3  wichtigsten Features von Google Workbox PWA

  • Zwischenspeichern: Googles Workbox PWA kann diene Bildern und Skripts effizient zwischenspeichern. Viele Bilder und Texte verwendet Deine Webseite wiederholt.
    Um mehr die Ladezeiten auf der Webseite zu verringern, versucht der ServiceWorker doppelte und inhaltlich gleiche XHR-Anfragen zu vermeiden. Jedes doppelt heruntergeladene Byte verlangsamt die Geschwindigkeit der Webseite. Logos, Symbole, Icons, Schriftarten, einfache JavaScript-Skripte und Texte kann der Browser bei dem Aufruf der PWA vom vorherigen Besuch wiederverwenden
  • Anfragen-Leitung: Der Entwickler kann einstellen, wie und wann der Browser die HTTP-Anfragen weiterleiten soll.
  • Synchronisierung im Hintergrund: Die Aktualisierungen von Inhalten wie Text und Bildern muss nicht immer zeitgleich mit dem Aufruf der Seite erfolgen. HintergrundSynchronisation reduziert Wartezeiten.
08 Hohe Geschwindigkeit - Tutorial Deutsch Steffen Lippke
08 Hohe Geschwindigkeit – Tutorial Deutsch Steffen Lippke

Was ist ein ServiceWorker?

Ein ServiceWorker basiert auf JavaScript und steht als ein Mittelsmann zwischen dem Server und dem Endgerät (Smartphone).

Der Worker stellt einen wichtigen Bestandteil der Progressiven Web Apps dar und ermöglicht die Offline-Unterstützung von App-Inhalten. Push-Benachrichtigungen zeigen dem Nutzer bei geschlossener App die Neuigkeiten, die über Push-Channel den hineingekommen sind.

07 Erfolgreiche PWA - Tutorial Deutsch Steffen Lippke
07 Erfolgreiche PWA – Tutorial Deutsch Steffen Lippke

Die Entwickler dürfen den ServiceWorker nur in Verbindung mit HTTPs (TLS) verwenden. Alle 24 Stunden lädt der Browser einen neuen ServiceWorker herunter, sodass der Entwickler Fehler bei der Konfiguration der App mit einem Tag Verzögerung korrigieren kann.

ServiceWorker – Nutzen ohne Internetverbindung Offline

Für die Offline-Unterstützung verwendet der ServiceWorker den Application Cache.

Ein JavaScript-Statement aktiviert den ServiceWorker. Über die Internetverbindung lädt der Browser alle notwendigen Dateien (Schriftarten, Logos, Symbole, Stylesheets, Skripte) herunter und speichert diese in dem Application Cache. Die Dateien habe ein Verfallsdatum, an denen diese erneut herunterladen können.

Der ServiceWorker fragt ab, ob der Entwickler neue Versionen von den zwischengespeicherten Dateien veröffentlicht hat. Wenn sich das Aktualisierungs-Datum verändert, lädt der Browser die neuen Dateien herunter.

 styles.css Stylesheet auf dem Smartphone 13.11.XXXX 15:00 und styles.css Stylesheets auf dem Server 15.11.XXXX 16:00 löst einen Download aus.

Hier sind ein paar Beispiel-PWAs.

Progressive Web Apps mit Google Workbox PWA

Eine Progressive Web App entwickelt die normalen Android- und iOS-Apps weiter.

Die Progressiven Web Apps übernehmen viele Features von nativen Android- und iOS-Apps. Die Progressiven Web Apps basieren wie normale Web Apps auf HTML (5), CSS (3) und JavaScript in Verbindung mit HTTPs.

00 Cache First Fornt - Workbox Tutorial Deutsch Steffen Lippke
00 Cache First Fornt – Workbox Tutorial Deutsch Steffen Lippke

Mit dieser Art der App sind progressive Verbesserung vorgesehen. Schrittweise können die Entwickler neue Features über Nacht in die App einbauen und brauchen kein größeres Update zu erstellen.

Die PWA verwendet als Webseite ein Web-App-Manifest, indem die Icons, alle Farben und Push-Benachrichtigungs-Einstellungen festgelegt sind.

Installation von Progressiven Web Apps

Die Add-to-Homescreen Funktion legt die Webseiten dauerhaft auf dem Homescreen des Geräts ab. PWAs benötigen keine Installation.

Die Webseite (als PWA) muss der Smartphone-Browser beim ersten Landen herunterladen. Die meisten PWAs sind 1-10 Megabyte groß. Nach dem initialen Download bleibt die App reaktiv und der Nutzer kann die App ohne eine Installation bedienen.

Arten von Caches

Bei der Arbeit mit PWAs und dem ServiceWorker solltest Du die verschiedenen Browser-Caches kennen. Ein Cache versucht intelligent Wartezeit zu reduzieren, in dem dieser häufig angefragte Daten bereitstellt.

04 Application Cache - Tutorial Deutsch Steffen Lippke
04 Application Cache – Tutorial Deutsch Steffen Lippke
  • Web Storage / Local Storage: Die Cookies waren der einzige Speicher für den Entwickler innerhalb des Browsern (bis vor 5 Jahren). Mit den Web Storage kann über 5 MB Daten auf dem Client gespeichert sein. Die Daten sind nach Domain und Protokoll (HTTP) voneinander getrennt.
  • IndexedDB ist ein Datenbanksystem zum Speichern von komplexen Daten. IndexedDB eignet sich nicht nur für Strings und Nummern, sondern auch für Audio- und Video-Dateien.
  • Session Storage entspricht dem Web Storage – die Inhalte bleibt nur bis zum Schließen des Tabs erhalten, sodass die Daten nach der Sitzung (Session) gelöscht sind.

Praxis – Progressive Web App mit Workbox Tutorial

Voraussetzungen für das Workbox Tutorial

Für den Beginn reicht Node.js und ein Editor aus.

Visual Studio Code
  • (Notwendig) Nodes Packet Management: js zur Installation von Workbox
  • (Notwendig) Ein beliebigen Code-Editor. Ich liebe Visual Studio Code.

Installation von Googles Workbox PWA

Mit den Eigenschaften des Web kommt der Vorteil, die App nicht installieren zu müssen. Der JavaScript-Code kann der Browser ausführen.

  1. XAMPP kannst Du hier downloaden und über einen GUI installieren. Wähle nicht alle Module aus
    03 XAMPP Setup mit wengier - Laravel Tutorial deutsch Guide Steffen Lippke
  2. Starte XAMPP, um eine Serverumgebung zu schaffen
  3. Gehe in den Ordner C:\xampp\htdocs – der Root-Ordner für das Webseiten-Projekt mit Workbox
    06 Aufbau des Projekts - Tutorial Deutsch Steffen Lippke
  4. Erstelle eine HTML-Seite
    Photo by Tae Fuller from Pexels

    Seltsamen Workbox Tutorial - Code erklärt

    Die Zeile <link href="https://fonts.googleapis.com/css?family=Long+Cang&display=swap" rel="stylesheet" /> ermöglicht den Zugang zu einer Google Schrift des Namens Log Cat.

    <link rel="stylesheet" href="style.css" /> fügt die Stylesheets ein. Bei der Verwendung eines ServiceWorkers musst Du bei Änderungen im Browser unter Application > Clear Storage, die alte CSS Datei löschen. Ein einfaches Aktualisieren der Webseite bleibt ohne Effekt.

    <link rel="manifest" href="/manifest.json" /> fügt das Manifest ein. Das Manifest ist eine json-Datei, die den App-Namen, Farben und URLs zu den Icons speichert. Die Icons liegen in verschiedenen Größen vor

    01 Manifest- Workbox - Tutorial Deutsch Steffen Lippke
    01 Manifest- Workbox - Tutorial Deutsch Steffen Lippke

    Der Befehl navigator.serviceWorker.register("/sw.js"); 

    starten den ServiceWorker und verwendet das externen JavaScript-Script

    Der Body enthält Standard-HTML mit einem Bild und Lorem-Ipsum Text.

    Die style.css realisiert die andere Schriftart Long Cat mit dem Sternchen als Universal Selektor

    Die Datei sw.js hat das Kommando  workbox generateSW workbox-config.js erstellt und eine Liste mit allen Dateien erstellt. Diese soll der Browser im Application Cache beim Laden speichern.

Quellenangabe Bilder: Icons und SVG-Grafiken im Titelbild von Microsoft PowerPoint 2019, frei verfügbar nach EULA

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.