Was macht eine gute progressive Web-App aus?

Die Leistung spielt eine wichtige Rolle für den Erfolg einer Website, da leistungsstarke Websites Nutzer besser binden als langsame. Konzentrieren Sie sich auf die Optimierung für nutzerorientierte Leistungsmesswerte.

Warum

Geschwindigkeit ist entscheidend, damit Nutzer Ihre App verwenden. Wenn die Seitenladezeit von einer auf zehn Sekunden steigt, erhöht sich die Wahrscheinlichkeit, dass ein Nutzer abspringt, um 123%. Die Leistung wird auch nicht durch das Ereignis load beeinträchtigt. Nutzer sollten sich nie fragen müssen, ob ihre Interaktion – z. B. das Klicken auf eine Schaltfläche – registriert wurde oder nicht. Das Scrollen und die Animation sollten flüssig ablaufen. Die Leistung wirkt sich auf die gesamte Nutzererfahrung aus, sowohl auf das Verhalten Ihrer App als auch auf die Wahrnehmung der Nutzer.

Auch wenn alle Anwendungen unterschiedliche Anforderungen haben, basieren die Leistungsaudits in Lighthouse auf den Core Web Vitals. Wenn Sie bei diesen Audits gute Ergebnisse erzielen, ist die Wahrscheinlichkeit höher, dass Ihre Nutzer zufrieden sind. Sie können auch PageSpeed Insights oder den Bericht zur Nutzererfahrung in Chrome verwenden, um realistische Leistungsdaten für Ihre Webanwendung zu erhalten.

Wie

In unserer Anleitung zu kurzen Ladezeiten erfahren Sie, wie Sie dafür sorgen, dass Ihre PWA schnell startet und auch schnell bleibt.

Nutzer können vor der Installation mit einem beliebigen Browser auf Ihre Webanwendung zugreifen.

Warum

Progressive Web-Apps sind in erster Linie Webanwendungen und müssen daher plattformunabhängig funktionieren.

Eine effektive Möglichkeit, dies zu erreichen, besteht laut Jeremy Keith in seinem Buch Resilient Web Design darin, die wichtigsten Funktionen zu identifizieren, diese Funktionen mit der einfachsten Technologie verfügbar zu machen und dann nach Möglichkeit die Nutzerfreundlichkeit zu verbessern. In vielen Fällen bedeutet das, mit nur HTML zu beginnen, um die Hauptfunktionen zu erstellen, und die Nutzerfreundlichkeit mit CSS und JavaScript zu verbessern, um eine ansprechendere Benutzeroberfläche zu schaffen.

Nehmen wir zum Beispiel die Formulareinreichung. Am einfachsten lässt sich das über ein HTML-Formular implementieren, über das eine POST-Anfrage gesendet wird. Anschließend können Sie die Funktion mit JavaScript erweitern, um die Formularvalidierung durchzuführen und das Formular über AJAX zu senden. So wird die Nutzerfreundlichkeit für Nutzer verbessert, die diese Funktion unterstützen.

Ihre Nutzer rufen Ihre Website auf einer Vielzahl von Geräten und in verschiedenen Browsern auf. Sie können sich nicht nur auf die Spitze dieses Spektrums konzentrieren. Mithilfe der Funktionserkennung können Sie die Nutzerfreundlichkeit für möglichst viele potenzielle Nutzer verbessern, auch für Nutzer von Browsern und Geräten, die noch nicht auf dem Markt sind.

Wie

Resilient Web Design von Jeremy Keith ist eine hervorragende Ressource, die beschreibt, wie man Webdesign in dieser plattformübergreifenden, progressiven Methode angehen kann.

Weitere Informationen

• Der Artikel Progressive Verbesserung verstehen von A List Apart ist eine gute Einführung in das Thema.
• Smashing Magazine: Progressive Verbesserung: Was ist das und wie wird sie verwendet? bietet eine praktische Einführung und Links zu weiterführenden Themen.
• Im MDN-Artikel Implementing feature detection (Funktionserkennung implementieren) wird beschrieben, wie eine Funktion durch direkte Abfrage erkannt wird.

Nutzer können Ihre PWA auf jeder Bildschirmgröße verwenden und alle Inhalte sind bei jeder Ansichtsgröße verfügbar.

Warum

Geräte gibt es in verschiedenen Größen und Nutzer können Ihre App in verschiedenen Größen verwenden, auch auf demselben Gerät. Daher ist es wichtig, nicht nur dafür zu sorgen, dass Ihre Inhalte in den Darstellungsbereich passen, sondern auch, dass alle Funktionen und Inhalte Ihrer Website bei allen Darstellungsbereichen 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 unterschiedliche Darstellungsbereiche neu anordnen. Sie sollten aber auf jeden Fall sichtbar sein. Wie Luke Wroblewski in seinem Buch Mobile First erklärt, kann das Design einer Website verbessert werden, wenn Sie klein anfangen und Ihr Design für größere Bildschirme optimieren:

Bei Mobilgeräten müssen sich Softwareentwicklungsteams nur auf die wichtigsten Daten und Aktionen in einer Anwendung 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 den ursprünglichen Artikel von Ethan Marcotte, eine Sammlung wichtiger damit zusammenhängender Konzepte sowie zahlreiche Bücher und Vorträge. Wenn Sie sich auf die Inhaltsaspekte des responsiven Designs konzentrieren möchten, lesen Sie die Artikel inhaltsorientiertes Design und responsive Layouts mit Inhalt nach außen. Die Lektionen in Seven Deadly Mobile Myths von Josh Clark sind zwar auf Mobilgeräte ausgerichtet, aber sie sind ebenso relevant für die Ansichten kleiner responsiver Websites wie für Mobilgeräte im Allgemeinen.

Wenn Nutzer offline sind, ist es für sie einfacher, in Ihrer PWA zu bleiben, als zur Offlineseite 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. Eine PWA sollte niemals die Standard-Offlineseite des Browsers anzeigen. Wenn Sie eine benutzerdefinierte Offlinefunktion bereitstellen, sowohl wenn ein Nutzer eine URL aufruft, die nicht im Cache gespeichert wurde, als auch wenn er versucht, eine Funktion zu verwenden, für die eine Verbindung erforderlich ist, wirkt die Webnutzung so, als wäre sie Teil des Geräts, auf dem sie ausgeführt wird.

Wie

Während des install-Ereignisses eines Service Workers können Sie eine benutzerdefinierte Offlineseite im Voraus im Cache speichern, die angezeigt wird, wenn ein Nutzer offline geht. Weitere Informationen dazu, wie Sie eine solche Seite selbst implementieren, finden Sie unter Offline-Fallback-Seite erstellen. Wenn keine bereitgestellt wird, zeigt Chrome eine einfache Offlineseite an.

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 Webanwendung installieren, sieht sie aus wie alle anderen installierten Apps und funktioniert auch so. Sie wird an derselben Stelle gestartet, an der Nutzer ihre anderen Apps starten. Sie wird in einem eigenen App-Fenster ausgeführt, unabhängig vom Browser, und wird in der Aufgabenliste angezeigt, genau wie andere Apps.

Wie bei gerätespezifischen Apps sind Nutzer, die Ihre Apps installieren, Ihre aktivste Zielgruppe. Die Engagement-Messwerte stimmen oft mit denen von App-Nutzern auf Mobilgeräten überein. Zu diesen Messwerten gehören mehr wiederkehrende Besuche, eine längere Verweildauer auf Ihrer Website und höhere Conversion-Raten als bei typischen Besuchern.

Wie

In unserer Anleitung zur Installation erfahren Sie, wie Sie Ihre PWA installierbar machen.

Wenn keine Internetverbindung erforderlich ist, funktioniert Ihre App sowohl offline als auch online.

Warum

Neben einer benutzerdefinierten Offlineseite erwarten Nutzer, dass PWAs auch offline verwendet werden können. Reise- und Fluggesellschafts-Apps sollten beispielsweise Reisedetails und Bordkarten auch offline verfügbar haben. Musik-, Video- und Podcast-Apps sollten die Offlinewiedergabe ermöglichen. In sozialen Medien und Nachrichten-Apps sollten aktuelle Inhalte im Cache gespeichert werden, damit Nutzer sie offline lesen können. Nutzer erwarten außerdem, dass sie auch offline authentifiziert bleiben. Berücksichtigen Sie daher die Offlineauthentifizierung. Eine Offline-PWA bietet Nutzern eine echte App-ähnliche Nutzererfahrung.

Wie

Nachdem Sie ermittelt haben, welche Funktionen Ihre Nutzer offline nutzen möchten, müssen Sie Ihre Inhalte für Offlinekontexte verfügbar machen und anpassen. Sie können IndexedDB, ein In-Browser-NoSQL-Speichersystem, zum Speichern und Abrufen von Daten und die Hintergrundsynchronisierung verwenden, damit Nutzer auch offline Aktionen ausführen und die Serverkommunikation bis zur Wiederherstellung einer stabilen Verbindung verschieben können. Sie können Dienstarbeiter auch verwenden, um andere Arten von Inhalten wie Bilder, Videodateien und Audiodateien zur Offlinenutzung zu speichern und sichere, langlebige Sitzungen zu implementieren, um Nutzer authentifiziert zu halten. Im Hinblick auf die Nutzerfreundlichkeit können Sie Skelettansichten verwenden, die Nutzern während des Ladevorgangs ein Gefühl für Geschwindigkeit und Inhalt vermitteln und bei Bedarf auf zwischengespeicherte Inhalte oder einen Offline-Indikator zurückgreifen können.

Alle Nutzerinteraktionen erfüllen die Anforderungen der WCAG 2.0.

Warum

Die meisten Nutzer möchten Ihre PWA irgendwann einmal auf eine Weise verwenden, die den Anforderungen der WCAG 2.0 für Barrierefreiheit entspricht. Die Fähigkeit von Menschen, mit Ihrer PWA zu interagieren und sie zu verstehen, ist vielfältig und die Anforderungen können vorübergehend oder dauerhaft sein. Wenn Sie Ihre PWA barrierefrei gestalten, können alle Nutzer sie verwenden.

Wie

Ein guter Ausgangspunkt ist die Einführung in die Barrierefreiheit im Web des W3C. Die meisten Tests der Barrierefreiheit müssen manuell durchgeführt werden. Mit Tools wie den Accessibility-Audits in Lighthouse, axe und Accessibility Insights können Sie einige Tests zur Barrierefreiheit automatisieren. Es ist auch wichtig, semantisch korrekte Elemente zu verwenden, anstatt diese Elemente selbst neu zu erstellen, z. B. a- und button-Elemente. So wird sichergestellt, dass bei der Entwicklung erweiterter Funktionen die Anforderungen an die Barrierefreiheit erfüllt werden (z. B. wann Pfeile oder Tabs verwendet werden sollten). A11Y Nutrition Cards bietet hervorragende Tipps zu einigen gängigen Komponenten.

Ihre PWA 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. Tatsächlich stammt mehr als die Hälfte aller Websitezugriffe über die organische Suche. Damit potenzielle Nutzer Ihre PWA finden können, müssen kanonische URLs für Inhalte vorhanden sein und Suchmaschinen müssen Ihre Website indexieren können. Dies gilt insbesondere beim clientseitigen Rendering.

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 Suchmaschinenoptimierungs-Audits 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 in Ihrer PWA strukturierte Daten mithilfe von Schemas von Schema.org einbinden.

Ihre PWA kann mit einer Maus, einer Tastatur, einem Eingabestift oder per Touchbedienung verwendet werden.

Warum

Geräte bieten eine Vielzahl von Eingabemethoden und Nutzer sollten nahtlos zwischen ihnen wechseln können, während sie Ihre App verwenden. Ebenso wichtig ist, dass die Eingabemethoden nicht von der Bildschirmgröße abhängen. Das bedeutet, dass große Darstellungsbereiche Touchbedienung und kleine Darstellungsbereiche Tastaturen und Mäuse unterstützen müssen. Sorgen Sie nach bestem Wissen und Gewissen dafür, dass Ihre App und alle ihre Funktionen die Verwendung jeder Eingabemethode unterstützen, die Nutzer auswählen können. Optimieren Sie die Nutzung, um gegebenenfalls auch gerätespezifische Steuerelemente zuzulassen, z. B. „Zum Aktualisieren wischen“.

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 Eingabestiften. Wenn Sie sowohl Touchbedienung als auch Tastatur unterstützen möchten, müssen Sie die richtigen semantischen Elemente (z. B. Anker, Schaltflächen und Formularsteuerelemente) verwenden und sie nicht mit nicht semantischem HTML neu erstellen. Wenn Sie Interaktionen einbinden, die durch Bewegen des Mauszeigers aktiviert werden, achten Sie darauf, dass sie auch durch Klicken oder Tippen aktiviert werden können.

Wenn Sie um die Erlaubnis zur Verwendung leistungsstarker APIs bitten, geben Sie einen Kontext an und fragen Sie nur, wenn die API benötigt wird.

Warum

APIs, die eine Berechtigungsanfrage auslösen, z. B. für Benachrichtigungen, Standortermittlung und Anmeldedaten, sind absichtlich so konzipiert, dass sie für Nutzer störend sind, 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 einer Seite, akzeptieren Nutzer diese Berechtigungen mit geringerer Wahrscheinlichkeit und misstrauen ihnen in Zukunft eher. Stattdessen sollten Sie diese Aufforderungen erst auslösen, nachdem Sie dem Nutzer im Kontext erklärt 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, um zu erfahren, wie Sie Berechtigungsanfragen entwerfen, die sich zwar auf Mobilgeräte konzentrieren, aber auf alle PWAs anwenden lassen.

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

Warum

Die Entwicklung einer modernen Webanwendung ist sehr komplex. Wenn Sie Ihre Anwendung auf dem neuesten Stand halten und Ihre Codebasis gesund ist, können Sie leichter neue Funktionen bereitstellen, die die anderen in dieser Checkliste aufgeführten Ziele erfüllen.

Wie

Es gibt eine Reihe von Prüfungen mit hoher Priorität, die für eine gesunde Codebasis sorgen:

• Verwenden Sie keine Bibliotheken mit bekannten Sicherheitslücken.
• Verwenden Sie keine veralteten APIs.
• Entfernen Sie unsichere Programmierpraktiken aus Ihrer Codebasis, z. B. die Verwendung von document.write() oder nicht passiven Scroll-Ereignis-Listenern.
• Sie können sogar proaktiv programmieren, damit Ihre PWA nicht abstürzt, wenn Analysetools oder andere Drittanbieterbibliotheken nicht geladen werden.
• Sie sollten eine statische Codeanalyse wie Lint-Tools sowie automatisierte Tests in mehreren Browsern und Release-Kanälen verlangen. Mit diesen Techniken können Sie Fehler erkennen, bevor sie in die Produktion gelangen.