Was macht eine gute progressive Web-App aus?

Pete LePage
Sam Richard

Progressive Web-Apps (PWAs) werden mit modernen APIs entwickelt und optimiert, um alle Nutzer an sämtlichen Standorten und auf allen Geräten mit einer einzigen Codebasis zu erreichen und gleichzeitig einen erweiterten Funktionsumfang, Zuverlässigkeit und Installierbarkeit zu bieten. Die wichtigen und optimalen Checklisten und Empfehlungen helfen Ihnen dabei, die bestmögliche Nutzererfahrung zu schaffen.

Checkliste für Core Progressive Web-Apps

In der Checkliste für progressive Web-Apps wird beschrieben, was eine App installierbar und für alle Nutzer nutzbar macht, unabhängig von Größe oder Eingabetyp.

Startet schnell, bleibt schnell

Die Leistung spielt eine wichtige Rolle für den Erfolg einer Online-Erfahrung, da schnelle Websites Nutzer stärker binden als langsame. Konzentrieren Sie sich auf die Optimierung nutzerorientierter Leistungsmesswerte.

Warum

Die Geschwindigkeit ist entscheidend dafür, dass Nutzer Ihre App verwenden. Wenn die Seitenladezeiten von einer Sekunde auf zehn Sekunden steigen, erhöht sich die Wahrscheinlichkeit, dass ein Nutzer abspringt, um 123%. Die Leistung endet auch nicht mit dem load-Ereignis. Nutzer sollten sich nie fragen, ob ihre Interaktion, z. B. das Klicken auf eine Schaltfläche, registriert wurde oder nicht. Scrollen und Animationen sollten flüssig sein. Die Leistung wirkt sich auf die gesamte Nutzererfahrung aus, sowohl auf das Verhalten Ihrer App als auch auf die Wahrnehmung durch die Nutzer.

Obwohl alle Anwendungen unterschiedliche Anforderungen haben, basieren die Leistungsprüfungen in Lighthouse auf den Core Web Vitals. Wenn Sie bei diesen Prüfungen gut abschneiden, ist es wahrscheinlicher, dass Ihre Nutzer eine positive Erfahrung machen. Sie können auch PageSpeed Insights oder den Bericht zur Nutzererfahrung in Chrome verwenden, um Leistungsdaten aus der Praxis für Ihre Web-App zu erhalten.

Wie

In unserem Leitfaden zu schnellen Ladezeiten erfahren Sie, wie Sie dafür sorgen, dass Ihre PWA schnell startet und schnell bleibt.

Funktioniert in jedem Browser

Nutzer können vor der Installation Ihrer Web-App einen beliebigen Browser verwenden, um darauf zuzugreifen.

Warum

Progressive Web-Apps sind in erster Linie Web-Apps und müssen daher in allen Browsern funktionieren.

Eine effektive Methode hierfür besteht darin, wie Jeremy Keith in Resilient Web Design beschreibt, die Kernfunktionen zu identifizieren, diese Funktionen mit der einfachsten möglichen Technologie verfügbar zu machen und dann das Erlebnis nach Möglichkeit zu verbessern. In vielen Fällen bedeutet das, dass Sie mit HTML beginnen, um die Kernfunktionen zu erstellen, und die Nutzerfreundlichkeit mit CSS und JavaScript verbessern, um eine ansprechendere Benutzeroberfläche zu schaffen.

Nehmen wir als Beispiel das Einreichen von Formularen. Am einfachsten lässt sich das mit einem HTML-Formular implementieren, das eine POST-Anfrage sendet. Anschließend können Sie die Nutzerfreundlichkeit mit JavaScript verbessern, indem Sie die Formularvalidierung durchführen und das Formular über AJAX senden.

Ihre Nutzer rufen Ihre Website auf einer Vielzahl von Geräten und in verschiedenen Browsern auf. Sie können nicht nur auf das obere Ende dieses Spektrums abzielen. Verwenden Sie die Funktionserkennung, um eine nutzbare Erfahrung für die größtmögliche Anzahl potenzieller Nutzer zu bieten, einschließlich derer, die Browser und Geräte verwenden, die es noch nicht gibt.

Wie

Resilient Web Design von Jeremy Keith ist eine hervorragende Ressource, in der beschrieben wird, wie man bei dieser browserübergreifenden, progressiven Methodik über Webdesign nachdenken sollte.

Weitere Informationen

An jede Bildschirmgröße anpassbar

Nutzer können Ihre PWA auf jedem Bildschirm verwenden und alle Inhalte sind bei jeder Viewport-Größe verfügbar.

Warum

Geräte gibt es in verschiedenen Größen und Nutzer verwenden Ihre Anwendung möglicherweise in verschiedenen Größen, auch auf demselben Gerät. Daher ist es wichtig, dass Ihre Inhalte in den Darstellungsbereich passen und dass alle Funktionen und Inhalte Ihrer Website bei allen Darstellungsbereichsgrößen nutzbar sind.

Die Aufgaben, die Nutzer erledigen möchten, und die Inhalte, auf die sie zugreifen möchten, ändern sich nicht mit der Größe des Darstellungsbereichs. Sie können Ihre Inhalte für verschiedene Ansichtsfenstergrößen neu anordnen. Sie sollten aber immer alle Inhalte sehen können. Wie Luke Wroblewski in seinem Buch Mobile First schreibt, kann es das Design einer Website verbessern, wenn man klein anfängt und das Design für größere Bildschirme anpasst:

„Bei Mobilgeräten müssen sich Softwareentwicklungsteams auf die wichtigsten Daten und Aktionen in einer Anwendung konzentrieren. Auf einem Bildschirm mit 320 × 480 Pixeln ist einfach kein Platz für unnötige Elemente. Sie müssen Prioritäten setzen.“

Wie

Es gibt viele Ressourcen zum responsiven Design, darunter Ethan Marcottes Originalartikel und eine Sammlung wichtiger Konzepte, sowie zahlreiche Bücher und Vorträge.

Wenn Sie sich auf die inhaltlichen Aspekte des responsiven Designs konzentrieren möchten, lesen Sie Folgendes:

Benutzerdefinierte Offlineseite bereitstellen

Wenn Nutzer offline sind, ist es besser, sie in Ihrer PWA zu halten, als zur Offline-Seite des Standardbrowsers zurückzukehren.

Warum

Nutzer erwarten, dass installierte Apps unabhängig von ihrem Verbindungsstatus funktionieren. Eine plattformspezifische App zeigt nie eine leere Seite an, wenn sie offline ist, und eine PWA sollte nie die Standard-Offlineseite des Browsers anzeigen. Wenn Sie eine benutzerdefinierte Offline-Erfahrung anbieten, sowohl wenn ein Nutzer zu einer URL navigiert, die nicht im Cache gespeichert ist, als auch wenn ein Nutzer versucht, eine Funktion zu verwenden, die eine Verbindung erfordert, fühlt sich Ihre Webanwendung wie ein Teil des Geräts an, auf dem sie ausgeführt wird.

Wie

Während des install-Ereignisses eines Service Workers können Sie eine benutzerdefinierte Offline-Seite vorab im Cache speichern, die angezeigt wird, wenn ein Nutzer offline geht. Hier erfahren Sie, wie Sie eine Offline-Fallbackseite erstellen. Chrome zeigt weiterhin eine einfache Offline-Seite an, wenn keine angegeben ist.

Installierbar

Nutzer, die Apps auf ihrem Gerät installieren oder hinzufügen, interagieren in der Regel häufiger mit diesen Apps.

Warum

Wenn Sie eine Progressive Web-App installieren, sieht sie aus wie alle anderen installierten Apps und lässt sich auch so verwenden. Sie wird an derselben Stelle gestartet wie andere Apps. Sie wird in einem eigenen App-Fenster ausgeführt, das vom Browser getrennt ist, und erscheint wie andere Apps in der Aufgabenliste.

Wie bei gerätespezifischen Apps sind Nutzer, die Ihre Apps installieren, Ihre aktivsten Nutzer. Die Interaktionsmesswerte sind oft mit denen von App-Nutzern auf Mobilgeräten vergleichbar. Diese Messwerte umfassen mehr wiederholte Besuche, längere Verweildauer auf Ihrer Website und höhere Conversion-Raten als bei typischen Besuchern.

Wie

Folgen Sie unserer Installationsanleitung.

Checkliste für optimale progressive Web-Apps

Um eine wirklich gute PWA zu erstellen, die sich wie eine erstklassige App anfühlt, benötigen Sie mehr als nur die Kern-Checkliste. Die optimale PWA-Checkliste soll dafür sorgen, dass sich Ihre PWA wie ein Teil des Geräts anfühlt, auf dem sie ausgeführt wird, und gleichzeitig die Stärken des Webs nutzt.

Offline-Nutzung

Wenn eine Verbindung nicht unbedingt erforderlich ist, funktioniert Ihre App offline genauso wie online.

Warum

Nutzer erwarten, dass PWAs offline verwendet werden können. Reise- und Fluggesellschafts-Apps sollten beispielsweise Reisedetails und Bordkarten offline verfügbar machen. Musik-, Video- und Podcast-Apps sollten die Offlinewiedergabe ermöglichen. Soziale Netzwerke und Nachrichten-Apps sollten aktuelle Inhalte im Cache speichern, damit Nutzer sie offline lesen können. Nutzer erwarten auch, dass sie authentifiziert bleiben, wenn sie offline sind. Planen Sie daher die Offline-Authentifizierung ein.

Eine Offline-PWA bietet Nutzern eine echte App-ähnliche Erfahrung.

Wie

Nachdem Sie ermittelt haben, welche Funktionen Ihre Nutzer offline nutzen möchten, müssen Sie Ihre Inhalte verfügbar machen und an Offline-Kontexte anpassen. Mit IndexedDB, einem NoSQL-Speichersystem im Browser, können Sie Daten speichern und abrufen. Mit Hintergrundsynchronisierung können Nutzer Aktionen ausführen, während sie offline sind, und die Serverkommunikation aufschieben, bis der Nutzer wieder eine stabile Verbindung hat. Mit Service Workern können Sie andere Arten von Inhalten wie Bilder, Video- und Audiodateien für die Offlineverwendung speichern und sichere, langlebige Sitzungen implementieren, um Nutzer authentifiziert zu halten.

Aus Nutzersicht können Sie Skelettbildschirme verwenden, die Nutzern während des Ladens den Eindruck von Geschwindigkeit und Inhalt vermitteln. Bei Bedarf kann dann auf zwischengespeicherte Inhalte oder eine Offline-Anzeige zurückgegriffen werden.

Vollständig barrierefrei

Alle Nutzerinteraktionen entsprechen dem aktuellen internationalen Standard für barrierefreie Webinhalte (Web Content Accessibility Guidelines, WCAG).

Warum

Die meisten Nutzer möchten Ihre PWA irgendwann einmal auf eine Weise verwenden, die von den WCAG abgedeckt wird. Die Fähigkeit von Menschen, mit Ihrer PWA zu interagieren und sie zu verstehen, ist unterschiedlich und Bedürfnisse können vorübergehend oder dauerhaft sein. Wenn Sie Ihre PWA barrierefrei gestalten, können alle sie nutzen.

Wie

Die Einführung in die Barrierefreiheit im Web des W3C ist ein guter Ausgangspunkt. Die meisten Tests für Bedienungshilfen müssen manuell durchgeführt werden. Mit Lighthouse-Prüfung der Barrierefreiheit, axe und Accessibility Insights können Sie einige Tests zur Barrierefreiheit automatisieren. Außerdem ist es wichtig, semantisch korrekte Elemente zu verwenden, anstatt diese Elemente selbst zu erstellen, z. B. <a>- und <button>-Elemente. So wird sichergestellt, dass bei der Entwicklung komplexerer Funktionen die Anforderungen an die Barrierefreiheit erfüllt werden, z. B. wann Pfeile und wann Tabs verwendet werden sollten.

A11Y Nutrition Cards bietet hervorragende Ratschläge für einige gängige Komponenten.

Ihre PWA kann über die Suche gefunden werden.

Warum

Einer der größten Vorteile des Internets ist die Möglichkeit, Websites und Apps über die Suche zu finden. Tatsächlich stammt mehr als die Hälfte aller Websitezugriffe aus der organischen Suche. Es ist wichtig, dass kanonische URLs für Inhalte vorhanden sind und Suchmaschinen Ihre Website indexieren können, damit potenzielle Nutzer Ihre PWA finden. Dies gilt insbesondere bei der clientseitigen Darstellung.

Wie

Achten Sie zuerst darauf, dass jede URL einen eindeutigen, beschreibenden Titel und eine Meta-Beschreibung hat. Anschließend können Sie die Google Search Console und die SEO-Prüfungen in Lighthouse verwenden, um Probleme mit der Auffindbarkeit Ihrer PWA zu beheben.

Sie können auch die Tools für Websiteinhaber von Bing oder Yandex verwenden und strukturierte Daten mit Schemas von Schema.org in Ihre PWA einfügen.

Funktioniert mit jedem Eingabetyp

Ihre PWA lässt sich mit einer Maus, einer Tastatur, einem Eingabestift oder per Touchscreen bedienen.

Warum

Geräte bieten eine Vielzahl von Eingabemethoden und Nutzer sollten beim Verwenden Ihrer Anwendung nahtlos zwischen ihnen wechseln können. Ebenso wichtig ist, dass Eingabemethoden nicht von der Bildschirmgröße abhängen. Das bedeutet, dass große Darstellungsbereiche Touch-Eingaben und kleine Darstellungsbereiche Tastaturen und Mäuse unterstützen müssen. Achten Sie nach Möglichkeit darauf, dass Ihre Anwendung und alle ihre Funktionen die Verwendung jeder Eingabemethode unterstützen, die der Nutzer möglicherweise wählt. Verbessern Sie die Nutzerfreundlichkeit, indem Sie auch eingabespezifische Steuerelemente wie „Zum Aktualisieren ziehen“ ermöglichen.

Wie

Die Pointer Events API bietet eine einheitliche Schnittstelle für die Arbeit mit verschiedenen Eingabeoptionen und eignet sich besonders gut für die Unterstützung von Stifteingaben. Wenn Sie sowohl Touch- als auch Tastatureingabe unterstützen möchten, müssen Sie die richtigen semantischen Elemente (Anker, Schaltflächen, Formularsteuerelemente usw.) verwenden und sie nicht mit nicht semantischem HTML neu erstellen. Wenn Sie Interaktionen einfügen, die bei Mouseover aktiviert werden, achten Sie darauf, dass sie auch durch Klicken oder Tippen aktiviert werden können.

Kontext für Berechtigungsanfragen bereitstellen

Wenn Sie die Berechtigung zur Verwendung leistungsstarker APIs anfordern, geben Sie Kontext an und fragen Sie nur, wenn die API benötigt wird.

Warum

APIs, die eine Berechtigungsaufforderung auslösen, z. B. Benachrichtigungen, Geolocation und Anmeldedaten, sind bewusst so konzipiert, dass sie Nutzer unterbrechen, da sie in der Regel mit leistungsstarken Funktionen zusammenhängen, für die eine Einwilligung erforderlich ist. Wenn diese Aufforderungen ohne zusätzlichen Kontext ausgelöst werden, z. B. beim Laden der Seite, ist es weniger wahrscheinlich, dass Nutzer diese Berechtigungen akzeptieren. Außerdem kann es dazu führen, dass sie der App in Zukunft weniger vertrauen.

Lösen Sie diese Aufforderungen stattdessen erst aus, nachdem Sie dem Nutzer im Kontext erklärt haben, warum Sie diese Berechtigung benötigen.

Wie

Im Artikel Berechtigungs-UX und im UX Planet-Artikel The Right Ways to Ask Users for Permissions (Die richtigen Wege, Nutzer nach Berechtigungen zu fragen) finden Sie Informationen dazu, wie Sie Berechtigungsaufforderungen gestalten können, die zwar auf Mobilgeräte ausgerichtet sind, aber für alle PWAs gelten.

Entspricht den Best Practices für fehlerfreien Code

Wenn Sie Ihre Codebasis in gutem Zustand halten, können Sie Ihre Ziele leichter erreichen und neue Funktionen bereitstellen.

Warum

Die Entwicklung einer modernen Webanwendung ist ein komplexer Prozess. Wenn Sie Ihre Anwendung auf dem neuesten Stand halten und Ihre Codebasis in gutem Zustand ist, können Sie leichter neue Funktionen bereitstellen, die den anderen in dieser Checkliste aufgeführten Zielen entsprechen.

Wie

Es gibt eine Reihe von Prüfungen mit hoher Priorität, um eine fehlerfreie Codebasis zu gewährleisten:

  • Verwenden Sie keine Bibliotheken mit bekannten Sicherheitslücken.
  • Verwenden Sie keine verworfenen APIs.
  • Entfernen Sie unsichere Programmierpraktiken aus Ihrem Code, z. B. document.write() oder nicht passive Listener für Scroll-Ereignisse.
  • Sie können sogar defensiv programmieren, um sicherzustellen, dass Ihre PWA nicht abstürzt, wenn Analysen oder andere Drittanbieterbibliotheken nicht geladen werden.
  • Erwägen Sie, statische Codeanalysen wie Linting sowie automatisierte Tests in mehreren Browsern und Release-Versionen zu verlangen. Mit diesen Techniken lassen sich Fehler erkennen, bevor sie in die Produktion gelangen.