Was macht eine gute progressive Web-App aus?

Leistung spielt eine entscheidende Rolle für den Erfolg jeglicher Online-Erfahrungen, da Websites mit hoher Leistung Nutzer stärker ansprechen und binden als solche mit schlechter Leistung. Konzentrieren Sie sich auf die Optimierung im Hinblick auf nutzerorientierte Leistungsmesswerte.

Warum

Die Geschwindigkeit ist entscheidend, damit Nutzer Ihre App verwenden können. Wenn die Seitenladezeit von einer Sekunde auf zehn Sekunden steigt, steigt die Wahrscheinlichkeit, dass ein Nutzer abspringt, um 123%. Die Leistung endet auch nicht mit dem Ereignis load. Nutzer sollten sich nie fragen, ob ihre Interaktion, z. B. das Klicken auf eine Schaltfläche, registriert wurde oder nicht. Scrollen und Animationen sollten sich flüssig anfühlen. Die Leistung wirkt sich sowohl auf das Verhalten Ihrer App als auch darauf aus, wie Nutzer sie wahrnehmen.

Obwohl alle Anwendungen unterschiedliche Anforderungen haben, basieren die Leistungsprüfungen in Lighthouse auf den Core Web Vitals. Wenn Sie dabei hohe Punktzahlen erhalten, steigt die Wahrscheinlichkeit, dass Ihre Nutzer sie angenehm nutzen. Mit PageSpeed Insights oder dem Bericht zur Nutzererfahrung in Chrome können Sie reale Leistungsdaten für Ihre Webanwendung abrufen.

Wie

In unserem Leitfaden zu kurzen Ladezeiten erfährst du, wie du dafür sorgst, dass deine PWA schnell startet und läuft.

Nutzer können jeden beliebigen Browser verwenden, um auf Ihre Webanwendung zuzugreifen, bevor diese installiert wird.

Warum

Progressive Web-Apps gelten zuerst als Webanwendungen und müssen deshalb browserübergreifend funktionieren.

Eine effektive Methode besteht darin, laut Jeremy Keith in Resilient Web Design die Kernfunktionen zu ermitteln, diese mit der einfachsten Technologie verfügbar zu machen und die Umgebung dann nach Möglichkeit zu optimieren. In vielen Fällen bedeutet dies, dass Sie nur mit HTML beginnen müssen, um die Kernfunktionen zu erstellen, und dann die Nutzererfahrung mit CSS und JavaScript zu optimieren, um die Nutzererfahrung zu verbessern.

Nehmen wir zum Beispiel die Formulareinreichung. Am einfachsten lässt sich dies mit einem HTML-Formular implementieren, das eine POST-Anfrage sendet. Danach können Sie die JavaScript-Funktionen optimieren, um Formulare zu validieren und das Formular über AJAX zu senden. Dadurch wird die Erfahrung für Nutzer verbessert, die das Formular unterstützen.

Nutzer sehen Ihre Website auf verschiedenen Geräten und in unterschiedlichen Browsern. Eine Ausrichtung auf das obere Ende dieses Spektrums ist nicht möglich. Bieten Sie mithilfe der Funktionserkennung ein breites Spektrum potenzieller Nutzer an, einschließlich Nutzern, die Browser und Geräte verwenden, die es noch nicht gibt.

Wie

Resilient Web Design von Jeremy Keith ist eine hervorragende Ressource, die beschreibt, wie Webdesign in dieser browserübergreifenden, progressiven Methodik beschrieben wird.

Weitere Informationen

• Das Thema Progressive Enhancement von A List Apart ist eine gute Einführung in das Thema.
• Smashing Magazine: Progressive Enhancement: What It Is, And How To Use It? bietet eine praktische Einführung und Links zu weiterführenden Themen.
• Im Artikel Featureerkennung implementieren von MDN wird erläutert, wie ein Feature durch direkte Abfrage erkannt wird.

Nutzer können deine PWA auf jeder Bildschirmgröße verwenden und alle ihre Inhalte sind in jeder Größe des Darstellungsbereichs verfügbar.

Warum

Es gibt verschiedene Größen von Geräten und Nutzer können Ihre App in verschiedenen Größen verwenden, sogar auf demselben Gerät. Deshalb müssen deine Inhalte nicht nur in den Darstellungsbereich passen, sondern auch alle Funktionen und Inhalte deiner Website in allen Größen des Darstellungsbereichs nutzbar sein.

Die Aufgaben, die Nutzer erledigen möchten, und die Inhalte, auf die sie zugreifen möchten, ändern sich mit der Größe des Darstellungsbereichs nicht. Du kannst deine Inhalte für verschiedene Größen des Darstellungsbereichs neu anordnen. Alle Inhalte sollten dabei auf die eine oder andere Weise verfügbar sein. Wie Luke Wroblewski in seinem Buch Mobile First sagt, kann man das Design einer Website verbessern, wenn man klein anfängt und das Design für größere Bildschirme optimiert:

Auf Mobilgeräten müssen sich Softwareentwicklerteams auf die wichtigsten Daten und Aktionen in einer App konzentrieren. Auf einem Bildschirm mit 320 × 480 Pixeln ist einfach kein Platz für überflüssige, unnötige Elemente. Sie müssen Prioritäten setzen.

Wie

Es gibt viele Ressourcen zum responsiven Design, darunter der ursprüngliche Artikel von Ethan Marcotte, eine Sammlung wichtiger Konzepte im Zusammenhang mit diesem Thema sowie zahlreiche Bücher und Vorträge. In den Abschnitten Content-First-Design und Responsive Layouts ohne Inhalt können Sie diese Diskussion auf die inhaltlichen Aspekte des responsiven Designs eingrenzen. Auch wenn der Schwerpunkt auf Mobilgeräten liegt, sind die Lektionen in Seven Deadly Mobile Myths von Josh Clark für kleine Ansichten von responsiven Websites genauso relevant wie für Mobilgeräte im Allgemeinen.

Wenn Nutzer offline sind, ist es einfacher, sie in der PWA aufzubewahren, als wenn sie auf die Offlineseite des Standardbrowsers zurückkehren müssen.

Warum

Nutzer erwarten, dass installierte Apps unabhängig von ihrem Verbindungsstatus funktionieren. Bei einer plattformspezifischen App wird niemals eine leere Seite angezeigt, wenn sie offline ist. Auch in einer PWA sollte nie die standardmäßige Offlineseite des Browsers angezeigt werden. Wenn du eine benutzerdefinierte Offlinenutzung anbietest, fühlt sich deine Weberfahrung als Teil des Geräts an, auf dem sie ausgeführt wird, sowohl wenn ein Nutzer eine URL aufruft, die nicht im Cache gespeichert ist, als auch wenn er versucht, eine Funktion zu verwenden, für die eine Internetverbindung erforderlich ist.

Wie

Während des install-Ereignisses eines Service Workers können Sie eine benutzerdefinierte Offlineseite zur späteren Verwendung im Cache speichern. Wenn ein Nutzer offline geht, können Sie mit der vorab im Cache gespeicherten benutzerdefinierten Offlineseite antworten. In unserem benutzerdefinierten Beispiel für eine Offlineseite sehen Sie, wie dies funktioniert und wie Sie es selbst implementieren.

Nutzer, die Apps auf ihrem Gerät installieren oder hinzufügen, interagieren eher mit diesen Apps.

Warum

Die Installation einer progressiven Web-App entspricht in etwa dem Aussehen, der Funktionsweise und dem Verhalten aller anderen installierten Apps. Sie wird an dem Ort gestartet, an dem die Nutzer ihre anderen Apps starten. Sie wird in einem eigenen Anwendungsfenster ausgeführt, das vom Browser getrennt ist, und wie andere Anwendungen in der Aufgabenliste angezeigt.

Wie bei gerätespezifischen Apps sind Nutzer, die deine Apps installieren, deine aktivste Zielgruppe und die Engagement-Messwerte entsprechen häufig denen von App-Nutzern auf Mobilgeräten. Zu diesen Messwerten gehören mehr wiederholte Besuche, längere Verweildauern auf deiner Website und höhere Conversion-Raten als typische Besucher.

Wie

In unserer Anleitung zum Installieren erfahren Sie, wie Sie Ihre PWA installierbar machen.

Wenn eine Verbindung nicht unbedingt erforderlich ist, funktioniert Ihre Anwendung offline und online.

Warum

Nutzer erwarten aber nicht nur, dass sie eine benutzerdefinierte Offlineseite bereitstellen, sondern auch, dass sie offline nutzbar sind. So sollten beispielsweise in Reise- und Flug-Apps Informationen zu Reisedetails und Bordkarten immer verfügbar sein, wenn sie offline sind. Musik-, Video- und Podcast-Apps sollten die Offlinewiedergabe zulassen. Social-Media- und Nachrichten-Apps sollten aktuelle Inhalte im Cache speichern, damit Nutzer sie offline lesen können. Nutzer erwarten auch, dass sie offline authentifiziert werden. Daher sollten Sie auf die Offlineauthentifizierung achten. Eine Offline-PWA bietet Nutzern eine echte App-ähnliche Umgebung.

Wie

Nachdem Sie ermittelt haben, welche Funktionen Ihre Nutzer offline verwenden möchten, müssen Sie Ihre Inhalte verfügbar machen und an Offlinekontexte anpassen können. Mit IndexedDB, einem browserinternen NoSQL-Speichersystem, können Sie Daten speichern und abrufen. Die Hintergrundsynchronisierung ermöglicht es Nutzern, offline Aktionen auszuführen und die Serverkommunikation so lange zu verschieben, bis sie wieder eine stabile Verbindung haben. Mit Service Workern können Sie auch andere Inhalte wie Bilder, Videodateien und Audiodateien für die Offlinenutzung speichern und sichere, langlebige Sitzungen implementieren, damit Nutzer authentifiziert bleiben. Aus Sicht der Nutzerfreundlichkeit können Sie Rasterbildschirme verwenden, die Nutzern beim Laden einen Eindruck von Geschwindigkeit und Inhalten vermitteln. Diese können dann bei Bedarf auf im Cache gespeicherte Inhalte oder eine Offlineanzeige zurückgreifen.

Alle Nutzerinteraktionen erfüllen die WCAG 2.0-Anforderungen an Barrierefreiheit.

Warum

Die meisten Nutzer möchten irgendwann in ihrem Leben deine PWA so verwenden, dass sie den WCAG 2.0-Anforderungen an Barrierefreiheit entsprechen. Die Fähigkeit der Menschen, mit deiner PWA zu interagieren und sie zu verstehen, besteht in einem breiten Spektrum und Anforderungen können vorübergehend oder dauerhaft sein. Wenn Sie Ihre PWA barrierefrei gestalten, kann sie von allen verwendet werden.

Wie

Ein guter Ausgangspunkt ist das W3C-Dokument Introduction to Web Accessibility (Einführung in die Barrierefreiheit im Internet). Die meisten Tests zur Barrierefreiheit müssen manuell durchgeführt werden. Mit Tools wie den Prüfungen zur Barrierefreiheit in Lighthouse, 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 neu zu erstellen, z. B. die Elemente a und button. So wird sichergestellt, dass die Erwartungen an die Barrierefreiheit erfüllt werden, wenn Sie erweiterte Funktionen entwickeln müssen (z. B. wann Sie Pfeile oder Tabs verwenden sollten). Auf den A11Y Nutrition Cards findest du hilfreiche Tipps zu einigen gängigen Komponenten.

Sie kann über die Suche gefunden werden.

Warum

Einer der größten Vorteile des Webs ist die Möglichkeit, Websites und Apps über die Suche zu finden. Mehr als die Hälfte aller Websitezugriffe erfolgen über die organische Suche. Es ist wichtig, dass kanonische URLs für Inhalte vorhanden sind und Suchmaschinen deine Website indexieren können, damit potenzielle Nutzer deine PWA finden können. Dies gilt insbesondere für clientseitiges Rendering.

Wie

Achte darauf, dass jede URL einen eindeutigen, aussagekräftigen Titel und eine Meta-Beschreibung hat. Anschließend kannst du die Google Search Console und die Prüfungen zur Suchmaschinenoptimierung in Lighthouse verwenden, um Probleme mit der Auffindbarkeit deiner PWA zu beheben. Sie können auch die Tools von Bing oder Yandex für Websiteinhaber verwenden und strukturierte Daten mithilfe von Schemas aus Schema.org in Ihre PWA einbinden.

Ihre PWA lässt sich gleichermaßen mit einer Maus, einer Tastatur, einem Eingabestift oder einer Touchbedienung verwenden.

Warum

Geräte bieten eine Vielzahl von Eingabemethoden und Nutzer sollten während der Verwendung Ihrer Anwendung nahtlos zwischen ihnen wechseln können. Außerdem sollten Eingabemethoden nicht von der Bildschirmgröße abhängig sein. Das bedeutet, dass große Darstellungsbereiche Touch-Gesten und kleine Darstellungsbereiche Tastaturen und Mäuse unterstützen müssen. Achte darauf, dass deine Anwendung und alle ihre Funktionen die Verwendung jeder Eingabemethode unterstützen, die dein Nutzer auswählen könnte. Verbessern Sie gegebenenfalls die Nutzererfahrung, um auch eingabespezifische Steuerelemente wie Pull-to-Refresh zu ermöglichen.

Wie

Die Pointer Events API bietet eine einheitliche Oberfläche für die Arbeit mit verschiedenen Eingabeoptionen und eignet sich besonders für die Unterstützung von Eingabestiften. Damit Touch- und Tastaturfunktionen unterstützt werden, solltest du darauf achten, die richtigen semantischen Elemente (Anker, Schaltflächen, Formularsteuerelemente usw.) zu verwenden und sie nicht mit nicht semantischem HTML neu zu erstellen. Achten Sie beim Einbeziehen von Interaktionen, die ausgelöst werden, wenn der Mauszeiger darauf bewegt wird, so, dass sie auch durch Klicken oder Tippen aktiviert werden können.

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

Warum

APIs, die eine Berechtigungsaufforderung auslösen, z. B. Benachrichtigungen, Standortbestimmung und Anmeldedaten, sind absichtlich so konzipiert, dass sie Nutzer stören, da sie in der Regel mit leistungsstarken Funktionen zusammenhängen, für die eine Aktivierung erforderlich ist. Werden diese Aufforderungen ohne zusätzlichen Kontext ausgelöst, z. B. beim Seitenaufbau, ist die Wahrscheinlichkeit geringer, dass Nutzer diese Berechtigungen akzeptieren und ihnen in Zukunft misstrauen. Lösen Sie diese Aufforderungen erst aus, nachdem Sie dem Nutzer eine kontextbezogene Begründung dafür geliefert haben, warum Sie diese Berechtigung benötigen.

Wie

Der Artikel Permission UX und der Artikel The Right Ways to Ask Users for Permissions von UX Planet sind gute Ressourcen zum Entwerfen von Berechtigungsaufforderungen, die sich zwar auf Mobilgeräte beziehen, aber für alle PWAs gelten.

Eine fehlerfreie Codebasis erleichtert es Ihnen, Ihre Ziele zu erreichen und neue Features bereitzustellen.

Warum

Eine moderne Webanwendung hat viel zu bieten. Wenn Sie Ihre Anwendung auf dem neuesten Stand und fehlerfrei halten, ist es für Sie einfacher, neue Features bereitzustellen, mit denen die anderen in dieser Checkliste aufgeführten Ziele erfüllt werden.

Wie

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

• Vermeiden Sie die Verwendung von Bibliotheken mit bekannten Sicherheitslücken.
• Verwenden Sie keine verworfenen APIs.
• Entfernen Sie unsichere Codierungspraktiken aus Ihrer Codebasis (z. B. die Verwendung von document.write() oder nicht-passive Scroll-Event-Listener).
• Du kannst sogar defensiv programmieren, damit deine PWA auch dann funktioniert, wenn Analysen oder andere Bibliotheken von Drittanbietern nicht geladen werden.
• Erwägen Sie, eine statische Codeanalyse wie Linting sowie automatisierte Tests in mehreren Browsern und Release-Versionen zu verlangen. Diese Techniken können dabei helfen, Fehler zu erkennen, bevor sie in die Produktion übernommen werden.