Progressive Webanwendungen: Ein kurzes Tutorial

Natürlich haben PWAs auch einige Einschränkungen und Nachteile, aber dazu weiter unten mehr. Nachdem wir uns nun mit der Idee und den Merkmalen von PWAs beschäftigt haben, wollen wir uns ansehen, wie Sie eine solche App erstellen können. Unser Tipp vorab: Verwenden Sie Workbox, eine Reihe von Bibliotheken und Tools, die den Prozess der Einrichtung einer Progressive Web App erleichtern.

Natürlich haben PWAs auch einige Einschränkungen und Nachteile, aber dazu weiter unten mehr. Nachdem wir uns nun mit der Idee und den Merkmalen von PWAs beschäftigt haben, wollen wir uns ansehen, wie Sie eine solche App erstellen können. Unser Tipp vorab: Verwenden Sie Workbox, eine Reihe von Bibliotheken und Tools, die den Prozess der Einrichtung einer Progressive Web App erleichtern.

1. Erstellen Sie Ihre Webanwendung

Zunächst musst du deine Webanwendung erstellen. Bei Motius verwenden wir häufig React sowie andere Frameworks wie Vue oder Angular, die sich durch hohe Leistung, eine einfache Benutzeroberfläche, Unterstützung für Plugins von Drittanbietern, eine Vielzahl von Bibliotheken und viele andere Vorteile auszeichnen. Du kannst eine PWA mit einem Framework deiner Wahl erstellen. Das Wichtigste ist, dass du deinen Code auf verschiedenen Plattformen verwenden kannst.

Sobald du deine Webanwendung erstellt hahastben, ist es an der Zeit, mit den PWA-spezifischen Schritten fortzufahren.

2. Servicekraft registrieren

Der Kern der Progressive Web App-Funktionalität ist ein "Service Worker". Ein Service Worker versorgt eine PWA mit den Fähigkeiten der nativen App, die normale Web-Apps nicht haben, z. B. Offline-Funktionalität, Push-Benachrichtigungen oder Hintergrundsynchronisation.

Die Magie des Service Workers liegt in seiner Fähigkeit, Netzwerkanfragen zu bearbeiten. Dadurch kann der Entwickler die Kontrolle über die gesamte Benutzererfahrung übernehmen. Technisch gesehen ist ein Service Worker eine Middleware, die steuert, wie Anfragen ausgeführt werden, indem sie sie an das Netzwerk weiterleitet oder Daten aus dem Cache entnimmt. Dadurch kann die Anwendung auch dann funktionieren, wenn der Benutzer offline ist.

Aus Sicherheitsgründen musst du deine Service Worker auf deiner Seite registrieren, bevor du es installieren kannst. Das mag kompliziert klingen, aber eigentlich ist es ganz einfach, einen Service Worker zu registrieren - Du brauchst nur ein paar Zeilen Code.

3. Caching-Strategie hinzufügen

Eine Caching-Strategie definiert das Verhalten des Service Workers, sobald Daten angefordert werden. Mit der Einführung von Service Workern haben sich verschiedene Caching-Strategien herausgebildet. Wir bei Motius verwenden hauptsächlich die folgenden drei:

Network first ist ideal, wenn die Daten auf dem Server ständig aktualisiert werden können. Der Service Worker holt sich die Informationen aus dem Netz und speichert sie im Cache. Falls das Netz nicht antwortet, werden die zuletzt im Cache gespeicherten Informationen verwendet.

Stale-while-revalidate ist ideal, wenn eine Anwendung nicht auf Serveraktualisierungen angewiesen ist. Auf diese Weise werden zuerst Informationen aus dem Cache verwendet, um eine schnelle Antwort zu liefern und so wenig Daten wie möglich zu verwenden. Wenn die Antwort nicht im Cache gespeichert ist, verwendet der Service Worker die Netzwerkinformationen, die dann ebenfalls im Cache gespeichert werden.

Cache first ist ideal für unkritische, nicht-dynamische Daten wie Schriftarten. Auf diese Weise fordert der Service Worker nur dann eine Netzwerkantwort an, wenn die benötigten Informationen nicht im Cache gespeichert sind.

Workbox ist eine Bibliothek, mit der du auf einfache Weise Caching-Strategien für verschiedene Anfragen festlegen kannst. Die einfache Konfiguration würde wie folgt aussehen:

registerRoute(
    ({url}) => url.pathname.startsWith('/api/'),
    new NetworkFirst({
        cacheName: 'api-cache',
        plugins: [
            new CacheableResponsePlugin({
                statuses: [0, 200],
            }),
        ],
    })
);

Wähle eine Caching-Strategie, die deinen Bedürfnissen entspricht. Wenn du dich eingehender mit anderen Caching-Strategien befassen möchtest, werfe einen Blick in das Offline-Kochbuch von Google.

4. Hinzufügen eines Web-App-Manifests

Als Nächstes musst du ein Web-App-Manifest zu deiner Anwendung hinzufügen, um sie installierbar zu machen. So kannst du deine PWA an eine breite Palette von Nutzern verteilen.

Das Web-App-Manifest teilt dem Browser mit, wie er sich verhalten soll, wenn die Benutzer Ihre PWA installieren. In der Regel handelt es sich um eine JSON-Datei, die den Namen der Anwendung, Symbole für die Startseite und den Startbildschirm, den Anzeigemodus und die Themenfarben enthält.

{
"short_name": "App",
"name": "Application",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "logo192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "logo512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#2E4267",
"background_color": "#232F46"
}

Sobald du diese Schritte durchgeführt hast, ist die grundlegende Einrichtung der PWA fast abgeschlossen. Jetzt musst du nur noch dafür sorgen, dass deine PWA mehr wie eine native App aussieht und sich auch so anfühlt, statt wie eine normale Website.

5. Zusätzliche UI-Anpassungen vornehmen

Dazu musst du einige zusätzliche UI-Anpassungen vornehmen. Zu den grundlegenden Anpassungen gehören Befehle, die dafür sorgen, dass die PWA den gesamten Bildschirm abdeckt, den Zoom deaktiviert und die Statusleiste ausgeblendet wird.

Aber natürlich gibt es eine ganze Reihe von Maßnahmen, die du ergreifen kannst, z. B. proaktives Herunterladen im Hintergrund, Steuerung der Hardware-Medientasten oder Multitasking und App-Verknüpfungen. Wenn du eine ausführliche Liste und Anweisungen zu all diesen Optionen wünschen, findest du sie hier.

Beachte, dass Progressive Web Apps je nach verwendetem Browser oder Betriebssystem unterschiedlich funktionieren können und nicht jede Funktionalität von jedem System unterstützt wird. Das bedeutet, dass du als Entwickler sicherstellen musst, dass deine PWA so funktioniert, wie du es wünscht, je nachdem, wo du sie verbreiten und nutzen möchtest.

Genauer gesagt sind viele PWA-Funktionen, die auf Android automatisch verfügbar sind, nachdem du das Manifest eingerichtet hast, auf iOS nicht automatisch verfügbar, da Safari sie noch nicht unterstützt. Daher musst du mehr Anpassungen für iOS vornehmen, damit sich deine Web-App mehr wie eine native App anfühlt. Werfen wir einen kurzen Blick auf einige gängige Anpassungen für iOS.

Um allgemeine PWA-Funktionen bereitzustellen, füge diese Tags in den Header der Web-App ein:

<meta name="apple-touch-fullscreen" content="yes" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-title" content="App" />
<br>

Um das App-Symbol einzurichten, benötigst du auch ein paar Zeilen Code:

     <link rel="apple-touch-icon" sizes="152x152"
          href="%PUBLIC_URL%/logo152.png" >
    <link rel="apple-touch-icon" sizes="180x180"
          href="%PUBLIC_URL%/logo180.png" >
    <link rel="apple-touch-icon" sizes="167x167"
          href="%PUBLIC_URL%/logo167.png" >

Splash-Screens müssen für die Bildschirmgröße jedes Geräts spezifiziert werden. Der PWA-Asset-Generator macht diese Aufgabe viel einfacher. Er verwendet ein Bild mit einem Symbol, erstellt Assets und generiert HTML-Links zum Einfügen in die Kopfzeile.

Unter iOS möchtest du wahrscheinlich auch die Statusleiste in der gleichen Farbe wie den Hintergrund gestalten:

<meta name="apple-mobile-web-app-status-bar-style"
      content="black-translucent" />

Um die Nutzer darüber zu informieren, dass sie die App auf iOS installieren können, musst du ein separates Pop-up erstellen und es nur auf iOS anzeigen, wenn die App im Browser geöffnet wird (auf Android wird es automatisch angezeigt). Zunächst musst du prüfen, ob die PWA auf dem iOS-Gerät geöffnet ist:

const isIos = () => { const userAgent = window.navigator.userAgent.toLowerCase(); return /iphone|ipad|ipod/.test( userAgent ); }

Außerdem musst du sicherstellen, dass das Pop-up nicht angezeigt wird, wenn die App bereits über den Startbildschirm geöffnet wurde:

@‎media all and (display-mode: standalone) { .pop-up__container { display: none; } }

Wenn du diese wenigen Schritte befolgst, wird deine PWA sowohl unter iOS als auch unter Android einwandfrei funktionieren.

Vorteile und Nachteile von Progressive Web Apps

Lasse uns zum Schluss noch schnell einige Vor- und Nachteile von PWAs aufzählen:

Die Vorteile von Progressive Web Apps liegen in der plattformübergreifenden Verfügbarkeit, den geringen Entwicklungskosten, der Installation direkt im Browser, wodurch mögliche Probleme mit App-Stores vermieden werden, der Senkung des mobilen Datenverbrauchs, dem Wegfall herkömmlicher App-Updates und einem großartigen Benutzererlebnis.

Nachteile von Progressive Web Apps sind der eingeschränkte Zugriff auf Gerätefunktionen wie Kamera und mobiles Bezahlen (vor allem auf iOS), einige Funktionen wie Push-Benachrichtigungen funktionieren nur auf Android-basierten Browsern, nicht aber z. B. auf Safari, die Tatsache, dass die Nutzer immer noch relativ wenig von der Existenz von PWAs wissen, und PWAs funktionieren möglicherweise nicht auf älteren Geräten.

Alles in allem können wir getrost sagen, dass Progressive Web Apps ein entscheidender Teil der Zukunft des Webdesigns sind. Indem sie das Beste aus nativen Apps und Web-Apps kombinieren, ermöglichen sie eine Reihe neuer Anwendungsfälle, die das Potenzial haben, Geschäftspotenziale zu erschließen. Klingt, als bräuchtest du eine Progressive Web App? Spreche einfach mit unseren Experten unten.