Was macht eine gute progressive Web-App aus?

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

Warum

Die Geschwindigkeit ist entscheidend dafür, dass Nutzer Ihre App verwenden. Wenn die Seitenladezeit von einer Sekunde auf zehn Sekunden ansteigt, 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.

Nutzer können mit jedem beliebigen Browser auf Ihre Web-App zugreifen, bevor sie installiert wird.

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 Nutzererlebnis 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. Danach können Sie die Nutzerfreundlichkeit mit JavaScript verbessern, indem Sie Formulareingaben validieren 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

• Understanding 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 MDN-Artikel Funktionserkennung implementieren wird beschrieben, wie Sie eine Funktion durch direkte Abfrage erkennen.

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

Warum

Geräte sind in verschiedenen Größen erhältlich und Nutzer verwenden Ihre Anwendung möglicherweise in verschiedenen Größen, auch auf demselben Gerät. Daher ist es wichtig, dass Ihre Inhalte nicht nur in den Darstellungsbereich passen, sondern 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 Darstellungsbereichsgrößen neu anordnen. Sie sollten aber immer alle Inhalte finden 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, eine Sammlung wichtiger Konzepte sowie zahlreiche Bücher und Vorträge. Wenn Sie sich auf die Inhaltsaspekte des responsiven Designs konzentrieren möchten, lesen Sie die Abschnitte Content-First-Design und Responsive Layouts mit Content-Out-Ansatz. Die Lektionen in Seven Deadly Mobile Myths von Josh Clark konzentrieren sich zwar auf Mobilgeräte, sind aber für kleine Ansichten responsiver Websites genauso relevant wie für Mobilgeräte im Allgemeinen.

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

Warum

Nutzer erwarten, dass installierte Apps unabhängig vom 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 wurde, als auch wenn ein Nutzer versucht, eine Funktion zu verwenden, die eine Verbindung erfordert, fühlt sich Ihre Weboberfläche 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. Unter Offline-Fallbackseite erstellen erfahren Sie, wie Sie eine solche Seite selbst implementieren. Wenn keine bereitgestellt wird, zeigt Chrome eine einfache Offline-Seite 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 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 Engagement-Messwerte sind oft mit denen von App-Nutzern auf Mobilgeräten vergleichbar. Zu diesen Messwerten gehören mehr wiederholte Besuche, längere Aufenthaltszeiten 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 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. Apps für soziale Netzwerke und Nachrichten-Apps sollten aktuelle Inhalte im Cache speichern, damit Nutzer sie offline lesen können. Nutzer erwarten auch, dass sie offline authentifiziert bleiben. 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 erwarten, müssen Sie Ihre Inhalte für die Offlineverwendung verfügbar machen und 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. Sie können Service Worker auch verwenden, um andere Arten von Inhalten wie Bilder, Videodateien und Audiodateien für die Offlineverwendung zu speichern und sichere, langlebige Sitzungen zu implementieren, um Nutzer authentifiziert zu halten. Aus Nutzersicht können Sie Skelettbildschirme verwenden, die den Nutzern während des Ladens den Eindruck von Geschwindigkeit und Inhalten vermitteln. Bei Bedarf kann dann auf zwischengespeicherte Inhalte oder einen Offlinestatus zurückgegriffen werden.

Alle Nutzerinteraktionen entsprechen den WCAG 2.0-Anforderungen für Barrierefreiheit.

Warum

Die meisten Nutzer möchten Ihre PWA irgendwann einmal so verwenden, wie es in den WCAG 2.0-Anforderungen für Barrierefreiheit beschrieben ist. Die Fähigkeit von Menschen, mit Ihrer PWA zu interagieren und sie zu verstehen, ist unterschiedlich und kann vorübergehend oder dauerhaft sein. Wenn Sie Ihre PWA barrierefrei gestalten, können alle sie nutzen.

Wie

Die Einführung in die Web-Barrierefreiheit des W3C ist ein guter Ausgangspunkt. Die meisten Tests für Bedienungshilfen müssen manuell durchgeführt werden. Tools wie die Barrierefreiheitsprüfungen in Lighthouse, axe und Accessibility Insights können Ihnen helfen, einige Barrierefreiheitstests zu automatisieren. Außerdem ist es wichtig, semantisch korrekte Elemente zu verwenden, anstatt diese Elemente selbst zu erstellen, z. B. die Elemente a und button. So wird sichergestellt, dass bei der Entwicklung komplexerer Funktionen die Anforderungen an die Barrierefreiheit erfüllt werden (z. B. wann Pfeile im Vergleich zu Tabs verwendet werden sollten). A11Y Nutrition Cards enthält hervorragende Ratschläge zu einigen gängigen Komponenten.

Ihre PWA kann leicht ü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 Einführung des clientseitigen Renderings.

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 Bing- oder Yandex-Tools für Websiteinhaber verwenden und strukturierte Daten mit Schemas von Schema.org in Ihre PWA einfügen.

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 nahtlos zwischen ihnen wechseln können, während sie Ihre Anwendung verwenden. Ebenso wichtig ist, dass Eingabemethoden nicht von der Bildschirmgröße abhängen. Das bedeutet, dass große Viewports Touch-Eingaben und kleine Viewports Tastatur- und Mauseingaben unterstützen müssen. Sorgen Sie nach besten Kräften dafür, 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 (z. B. „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 Tastatureingaben 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 einem Mouseover aktiviert werden, müssen Sie dafür sorgen, dass sie auch durch Klicken oder Tippen aktiviert werden können.

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 stören, 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 ist es wahrscheinlicher, dass sie ihnen in Zukunft misstrauen. Lösen Sie diese Aufforderungen stattdessen erst aus, nachdem Sie dem Nutzer im Kontext erläutert haben, warum Sie diese Berechtigung benötigen.

Wie

Der Artikel Berechtigungs-UX und The Right Ways to Ask Users for Permissions von UX Planet sind gute Ressourcen, um zu verstehen, wie Berechtigungsaufforderungen gestaltet werden sollten, die zwar auf Mobilgeräte ausgerichtet sind, aber für alle PWAs gelten.

Wenn Sie Ihren Code gesund 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 Ihren Code sauber halten, können Sie leichter neue Funktionen bereitstellen, die den anderen Zielen in dieser Checkliste 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 Ihrer Codebasis, z. B. die Verwendung von 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.
• Sie sollten statische Codeanalysen wie Linting sowie automatisierte Tests in mehreren Browsern und Release-Versionen vorschreiben. Mit diesen Techniken lassen sich Fehler erkennen, bevor sie in die Produktion gelangen.