Erste Schritte
Progressive Web-Apps sind nach wie vor Websites mit erweiterten Funktionen. Sie sind nicht an einen bestimmten Technology Stack gebunden und Sie können mit einer neuen Website von vorn beginnen oder Ihre bestehende Website ohne eine vollständige Überarbeitung aktualisieren. In diesem Leitfaden erfahren Sie, wie Sie eine gute Implementierung des PWA-Musters erstellen. Hier sind einige Strategien für den Einstieg:
Installierbar machen
Fang klein an! Bei diesem Ansatz beginnen wir mit einer einfachen Manifestdatei, einer einfachen Offline-Seite und einem Service Worker, der die Offline-Seite bereitstellt und wichtige CSS- und JavaScript-Elemente im Cache speichert. Dank des wichtigen CSS- und JavaScript-Cachings können Sie Ihre bestehende Webanwendung auch offline verwenden und gleichzeitig die Leistung verbessern.
Fokus auf ein Element
Wählen Sie eine neue Funktion aus, die erhebliche Auswirkungen auf Ihre Nutzer oder Ihr Unternehmen hat, z. B. Push-Benachrichtigungen oder Dateiverarbeitung. So können Sie Ihre PWA in die Praxis umsetzen, ohne zu viele Änderungen gleichzeitig vornehmen zu müssen.
Einfache Version erstellen
Nehmen Sie einen vorhandenen Bereich Ihrer App oder eine bestimmte User Journey, wie die Videowiedergabe oder den Zugriff auf eine Bordkarte, und machen Sie sie als eigenständige PWA für die Offlinenutzung. So können Sie mit einem einfachen Test die Nutzererfahrung mit PWAs überdenken.
Fangen Sie von Grund auf an
Diese Strategie ist sehr sinnvoll, wenn Sie Ihre Website neu gestalten oder von vorn beginnen können. Damit lassen sich PWA-Designmuster leichter einbauen als mit anderen Strategien, insbesondere die Vorteile der Service Worker von Anfang an.
Store-App aktualisieren
Wenn Sie eine PWA in App-Shops veröffentlichen möchten, können Sie sie in einen PWA‐Launcher einbinden und in Stores wie den Google Play Store oder den Windows Store hochladen. Wenn Sie bereits eine plattformspezifische App haben, können Sie sie durch die im Store veröffentlichte PWA ersetzen.
Mit diesem Ansatz erhalten Ihre vorhandenen Nutzer ein Upgrade auf die PWA. Neue Nutzer können die PWA weiterhin über den Browser oder die App-Shops verwenden oder installieren. Außerdem haben Sie eine einzige App für alle, was Kosten und Zeit spart und die Nutzererfahrung verbessert.
PWA-Checkliste
Eine progressive Web-App ist eine Website, die die Frage aufwirft: Wann wird aus ihr eine progressive Web-App? Die Antwort ist nicht ganz einfach. Da sich das PWA-Konzept nicht auf eine bestimmte Technologie oder einen bestimmten Stack bezieht, ist PWA ein Muster mit verschiedenen technischen Komponenten.
Auch wenn es für alle Browser keine speziellen Regeln gibt, gibt es eine Reihe von Empfehlungen, die sogenannte Checkliste für progressive Web-Apps. Sie sollen Ihnen dabei helfen, eine PWA zu erstellen, die bei den Nutzern gut ankommt.
Grundlegende Anforderungen
Da PWAs alle Geräte umfassen, von Mobilgeräten bis hin zu Desktop-Computern, geht es in der zentralen Checkliste für progressive Web-Apps darum, was du tun musst, damit deine App für alle Nutzer unabhängig von der Bildschirmgröße oder dem Eingabetyp installierbar und zuverlässig wird.
Die Kernanforderungen sind:
Starten schnell, bleiben schnell
Die Leistung spielt eine wichtige Rolle für den Erfolg von Online-Erfahrungen, da Websites mit hoher Leistung Nutzer stärker ansprechen und binden als leistungsschwache Websites. Websites sollten im Hinblick auf nutzerorientierte Leistungsmesswerte optimiert werden.
Funktioniert in jedem Browser
Progressive Web-Apps sind zuerst Web-Apps. Sie müssen also nicht nur in einem, sondern auch in mehreren Browsern funktionieren. Es muss jedoch nicht in allen Browsern dasselbe sein. Es kann einige Funktionen geben, die von einem Browser nicht unterstützt werden, und es gibt ein Fallback, um die Nutzerfreundlichkeit zu verbessern.
Reagiert auf jede Bildschirmgröße
Nutzer können Ihre PWA auf jeder Bildschirmgröße verwenden und alle Inhalte sind in jeder Größe verfügbar.
Stellt eine benutzerdefinierte Offlineseite bereit
Wenn Nutzer offline sind, können sie in Ihrer PWA eine nahtlose und nativähnliche Nutzererfahrung bieten, als wenn sie zur Standard-Offlineseite des Browsers wechseln.
Kann installiert werden
Nutzer, die Apps installieren oder zu ihrem Startbildschirm hinzufügen, interagieren in der Regel häufiger mit diesen Apps. Wenn die PWA installiert ist, stehen ihnen möglicherweise mehr Funktionen zur Verfügung, um die Nutzerfreundlichkeit zu verbessern.
Optimale PWA-Eigenschaften
Um eine wirklich großartige progressive Web-App zu erstellen, die wie eine erstklassige App wirkt, benötigen Sie mehr als nur eine Checkliste. Bei der Checkliste für optimale progressive Web-Apps geht es darum, Ihre PWA kompetent und zuverlässig zu gestalten und dabei die Vorteile des Webs zu nutzen.
Bietet Offline-Nutzung
Wenn Sie Nutzern ermöglichen, Ihre PWA offline zu verwenden, bieten Sie ihnen ein App-ähnliches Erlebnis. Ermitteln Sie dazu die Funktionen, die keine Verbindung benötigen, sodass Nutzer zumindest auf einen Teil der Funktionen zugreifen können.
Es ist uneingeschränkt zugänglich.
Stellen Sie sicher, dass alle Inhalte und Interaktionen der Anwendung für Screenreader verständlich sind, nur mit einer Tastatur verwendet werden können, dass der Fokus deutlich ist und der Farbkontrast stark ist. Wenn Sie Ihre PWA barrierefrei gestalten, sorgen sie dafür, dass sie für alle nutzbar ist.
Nutzt leistungsstarke Funktionen, sofern verfügbar
Von Push-Messaging, WASM und WebGL bis zum Zugriff auf das Dateisystem, zur Kontaktauswahl und zur Einbindung in App-Shops. Die Tools zum Erstellen leistungsstarker, umfassend eingebundener PWAs bieten Ihnen die Möglichkeit, Nutzern voll funktionsfähige Funktionen zu bieten, die bisher nur Plattform-Apps vorbehalten waren, die sie überall hin mitnehmen können.
über die Suche gefunden werden kann
Mehr als die Hälfte aller Websitezugriffe erfolgt über die organische Suche. Es ist wichtig, dass für die Inhalte kanonische URLs vorhanden sind und Ihre Website von Suchmaschinen indexiert werden kann, damit Nutzer Ihre PWA finden.
Funktioniert mit jedem Eingabetyp
Nutzer sollten bei der reibungslosen Verwendung Ihrer App zwischen Eingabetypen wechseln können und die Eingabemethoden sollten nicht von der Bildschirmgröße abhängen.
Stellt Kontext für Berechtigungsanfragen bereit
Aufforderungen nur für Berechtigungen wie Benachrichtigungen, Standortbestimmung und Anmeldedaten auslösen, nachdem ein Kontext angegeben wurde, um die Wahrscheinlichkeit zu erhöhen, dass der Nutzer die Aufforderungen akzeptiert.
Erfüllt die Best Practices für fehlerfreien Code
Wenn Sie Ihre Anwendung auf dem neuesten Stand halten und Ihre Codebasis fehlerfrei halten, fällt es Ihnen leichter, neue Funktionen bereitzustellen, die die anderen in dieser Checkliste aufgeführten Ziele erfüllen.