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 sich die Seitenladezeit von einer Sekunde auf zehn Sekunden erhöht, steigt die Wahrscheinlichkeit, dass ein Nutzer abspringt, um 123%. Die Leistung endet auch nicht mit dem Ereignis load. Nutzer sollten sich nie fragen müssen, ob ihre Interaktion – z. B. das Klicken auf eine Schaltfläche – registriert wurde oder nicht. Scrollen und Animationen sollten flüssig ablaufen. 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 eine hohe Punktzahl erzielen, erhöht sich die Wahrscheinlichkeit, dass Ihre Nutzer die App optimal 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 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 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 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 mit einem HTML-Formular implementieren, über das eine POST-Anfrage gesendet wird. Anschließend können Sie die Nutzung von JavaScript verbessern, 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. 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 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.
• Progressive Enhancement: What It Is, And How To Use It? von Smashing Magazine 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 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. 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. 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 erklärt, kann das Design einer Website verbessert werden, wenn Sie klein anfangen und Ihr Design für größere Bildschirme optimieren:

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. 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. 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 ein Nutzer 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 im Voraus im Cache speichern, die angezeigt wird, wenn ein Nutzer offline geht. Informationen zur Implementierung finden Sie unter Offline-Fallback-Seite erstellen. Hinweis: Chrome zeigt eine einfache Offlineseite an, wenn keine angegeben ist.

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 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 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 nutzen möchten, müssen Sie Ihre Inhalte für Offlinekontexte verfügbar und anpassbar machen. 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. 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 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 an die Barrierefreiheit.

Warum

Die meisten Nutzer möchten Ihre PWA irgendwann einmal auf eine Weise verwenden, die den Anforderungen der WCAG 2.0 entspricht. 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 der 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. 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). 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. 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 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 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. Verbessern Sie gegebenenfalls die Nutzererfahrung, um auch eingabespezifische Steuerelemente wie Pull-to-Refresh zu 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 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 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, die für eine gesunde Codebasis sorgen:

• 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).
• Sie können sogar proaktiv programmieren, damit Ihre PWA nicht abstürzt, wenn Analysetools oder andere Drittanbieterbibliotheken nicht geladen werden.
• Erwägen Sie, eine statische Codeanalyse wie Linting sowie automatisierte Tests in mehreren Browsern und Release-Versionen zu verlangen. Mit diesen Techniken können Sie Fehler erkennen, bevor sie in die Produktion gelangen.