Service Worker

Service Worker sind ein wesentliches Element von PWAs. Ein Service Worker ist ein Skript, das vom Browser im Hintergrund ausgeführt wird. Er befindet sich zwischen der PWA und dem Server. Je nach Netzwerkverfügbarkeit stellt der als Proxy fungierende Service Worker Elemente aus seinem Cache bereit oder ruft diese über das Netzwerk auf dem Server ab. Service Worker ermöglichen die Nutzung von PWAs auch ohne Internetzugang. Sie sind unter anderem für den Empfang von Push-Benachrichtigungen auf Ihrer PWA verantwortlich.

Web-Push-Benachrichtigungen: Firebase und APNs

Ihre PWA kann Push-Benachrichtigungen empfangen. Diese Funktion wird von den meisten neueren Webbrowsern unterstützt. Für Chrome, Firefox und Opera werden Push-Benachrichtigungen über Firebase, die Plattform von Google, bereitgestellt. Für Safari werden Benachrichtigungen über APNs, die Plattform von Apple, bereitgestellt.

Browserfunktionen

Ihre PWA ist eine fortschrittliche App. Sie wird unter Berücksichtigung der Funktionen des Browsers, in dem sie ausgeführt wird, immer die bestmögliche Erfahrung bieten. Je moderner der Browser, desto besser die Erfahrung.

CHROME
SAFARI
EDGE
FIREFOX
OPERA

* Diese Funktion wird in Kürze bei GoodBarber verfügbar sein

**Verfügbar für Chrome 68

Diese Tabelle wird von GoodBarber unter einer Creative-Commons-Lizenz verwaltet – aktualisiert im Mai 2021

Framework

Angular

Ihre PWA wird unter der neuesten stabilen Version von Angular erstellt. Angular ist ein von Google entwickeltes Framework. Es unterstützt gebrauchsfertige PWAs und bietet App-ähnliche Erlebnisse im Webbrowser: hohe Leistung, Offline-Verwendung und Zero Install. Ihre PWA wird kompiliert, um einen Code zu generieren, der für die heutigen virtuellen JavaScript-Maschinen stark optimiert ist. Durch die Kombination von serverseitigem Rendering für SEO-Zwecke und clientseitigem Rendering für eine schnelle Anzeige, Offline-Funktionalität und Flüssigkeit bietet GoodBarber Ihnen eine sehr umfassende isomorphe PWA.

Angular Material

Ihre PWA basiert auf der nächsten Generation des Nutzeroberflächen-Frameworks Angular Material. Alle von Ihnen erstellten Interaktionen folgen einem einheitlichen, modernen Stil. Die Nutzeroberfläche ist übersichtlich, konsistent und so aufgebaut, dass sie auf Mobiltelefonen, Tablets und Desktops nahtlos funktioniert. Material Design ist eine von Google entwickelte Designsprache.

HTTP/2

Ihre PWA wird über HTTP/2 bereitgestellt. Die neueste und leistungsstärkste Version des HTTP-Protokolls. HTTP/2 unterstützt die Komprimierung von Kopfzeilen, ein intelligentes Paket-Streaming-Management, das Multiplexen von Abfragen und die Priorisierung. Es beschleunigt das Herunterladen von Seiten und reduziert die Latenzzeit.

Die Zukunft der Apps

App-Shell

Die App-Shell ist das Gerüst Ihrer PWA. Sie enthält die Nutzeroberfläche und die Kernkomponenten für die Erstellung Ihrer App im Browser. Die App-Shell speichert die Nutzeroberfläche Ihrer PWA lokal, während der Inhalt dynamisch von einer API abgerufen wird. Dank der App-Shell lädt Ihre PWA insbesondere bei wiederholten Besuchen schnell, verwendet so wenig Daten wie möglich, nutzt statische Ressourcen aus dem lokalen Cache und trennt den Inhalt von der Navigation.

Isomorphe PWA

Ihre PWA führt sowohl auf der Server- als auch auf der Client-Seite JavaScript-Code aus. Die erste Anfrage des Browsers wird vom Server verarbeitet. Dies wird als serverseitiges Rendering (SSR) bezeichnet. Die PWA führt jedoch auch Berechnungen im Browser durch, was wiederum als clientseitiges Rendering (CSR) bezeichnet wird. SSR eignet sich gut für SEO-Zwecke, da Bots eine vollständig gerenderte Seite indexieren können. Durch CSR funktioniert die PWA auch offline, da das gesamte JavaScript Ihrer PWA im Hintergrund heruntergeladen und zwischengespeichert wird.

Kopfzeilen-API für die lokale Cache-Verwaltung

Ihre PWA lädt Ressourcen nur bei Bedarf aus dem Netzwerk herunter. Wir haben eine spezielle API zur Verwaltung von Antwortkopfzeilen entwickelt. Eine nutzerdefinierte Kopfzeile ruft das Datum der letzten Änderung der Dateien ab. Diese Informationen werden mit einem 45-Byte-Ping-Befehl (die Größe wurde um 1 000 reduziert) vor der Abfrage neuer Dateien ermittelt. Wenn die angeforderten Ressourcen nicht erneut übertragen werden müssen, sendet der Server eine HTTP-304-Antwort und die PWA verwendet ihren lokalen Cache.

PRPL-Muster

Ihre PWA wird nach dem PRPL-Muster erstellt. Dieses Muster dient einem schnelleren mobilen Interneterlebnis. Es bewältigt Herausforderungen wie unzuverlässige Netzwerkbedingungen oder leistungsschwache Mobilgeräte und nutzt die Funktionen moderner Internetplattformen, um eine gleichbleibend gute Nutzererfahrung zu bieten. PRPL steht für: Push kritischer Ressourcen für die initiale URL-Route / Rendering der initialen Route / Pre-Cache der verbleibenden Routen / Lazy-Load und Erstellen der verbleibenden Routen bei Bedarf. Durch das Muster wird bei der erstmaligen Interaktion mit Ihrer PWA eine minimale Reaktionszeit erreicht. Während der Nutzer weiter surft, werden Ressourcen intelligent zwischengespeichert, was die erstklassige Erfahrung Ihrer PWA noch verbessert.

Geschwindigkeit

Optimierter Bildkompressor

Um den Bandbreitenverbrauch zu minimieren und die Ladezeit zu verkürzen, haben unsere Techniker einen speziellen Algorithmus zur Verwaltung der Komprimierung von Bildern entwickelt. Jedes Mal, wenn Sie ein Bild hochladen, werden mehrere Kopien in unterschiedlichen Größen erstellt. Jede Kopie wird mit unserem Algorithmus komprimiert, der so codiert wurde, dass Qualitätsverluste minimiert werden. Die Kopien werden dann verwendet, um ein Bild bereitzustellen, das nie größer ist als die auf dem Bildschirm des Nutzers gerenderte Version. Diese Vorgehensweise ist ein bewährtes Verfahren, um die Qualität Ihrer PWA zu verbessern und die Lighthouse-Empfehlungen einzuhalten, indem Bilder schnell geladen und weniger Mobilfunkdaten verbraucht werden.

ORIGINALKOMPRIMIERT

CDN

Jede statische Ressource Ihrer PWA (JavaScript-Code und -Bilder) wird über ein CDN (Content Delivery Network) unter Verwendung des HTTP/2-Protokolls bereitgestellt. Ihre PWA wird überall auf der Welt schnell geladen. Die Ressourcen befinden sich in der Nähe aller Ihrer Endnutzer. Wir setzen auf das globale Netzwerk von StackPath. Die Ressourcen werden in Premium-Rechenzentren mit 10-GB-Verbindungen an 18 Standorten weltweit gehostet.

Asynchrone Schriftartenverwaltung

In Ihrer PWA werden Schriftarten asynchron geladen, um die Seitengeschwindigkeit zu erhöhen. Da Schriftarten bei der Erstellung einer Website Rendering-blockierende Dateien darstellen, werden bei der ersten Interaktion mit dem Nutzer die Standardschriftarten des Nutzergeräts verwendet. Im Hintergrund lädt die PWA die fehlenden Schriftarten und verwendet sie, sobald sie vollständig heruntergeladen wurden. In der Zwischenzeit kann der Nutzer im Handumdrehen auf die Inhalte zugreifen.

SEO

URL-Slugs

Das Vertriebsmodell Ihrer PWA basiert auf dem Link und dem Slug, also der genauen URL einer Website. Sie können jeden Slug Ihrer PWA anpassen und so die URL wichtiger Seiten SEO-freundlich gestalten. Da jede Seite Ihrer PWA über einen speziellen Slug verfügt, ist eine tiefe Verknüpfung (Deep-Linking) mit Ihrer PWA problemlos möglich.

HTTPS

Service Worker können im Browser des Nutzers äußerst leistungsstarke Funktionen ausführen. Um Missbrauch zu vermeiden, kann ein Service Worker daher nur auf einer über https bereitgestellten Seite registriert werden. Alle Seiten Ihrer PWA werden standardmäßig über https bereitgestellt. Dadurch wird sichergestellt, dass der im Browser installierte Service Worker nicht manipuliert wurde. Aber auch die SEO Ihrer Seiten wird dadurch verbessert.

Manifest.json

Ihre PWA wird durch eine JSON-Datei namens Web-App-Manifest beschrieben. Diese enthält die erforderlichen Metainformationen, um Ihre PWA in einem Store wie dem Microsoft Store zu indexieren und auf dem Gerät Ihres Nutzers zu installieren. Das Web-App-Manifest ist eine vom W3C erstellte Spezifikation.