Was macht eine gute progressive Web-App aus?

Die Leistung spielt eine wichtige Rolle für den Erfolg jeder Onlineerfahrung, da Websites mit hoher Leistung Nutzer stärker ansprechen und binden als solche mit schlechter Leistung. Websites sollten im Hinblick auf nutzerorientierte Leistungsmesswerte optimiert werden.

Gute Gründe

Die Geschwindigkeit ist entscheidend, damit Nutzer deine App nutzen. Wenn sich die Seitenladezeit von einer Sekunde auf zehn Sekunden verkürzt, steigt die Wahrscheinlichkeit, dass ein Nutzer abspringt, um 123%. Die Leistung endet 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 flüssig wirken. Die Leistung wirkt sich auf die gesamte Erfahrung aus – von der Wahrnehmung der Anwendung durch den Nutzer bis hin zur tatsächlichen Leistung.

Zwar haben alle Anwendungen unterschiedliche Anforderungen, aber die Leistungsprüfungen in Lighthouse basieren auf den Core Web Vitals. Wenn bei diesen Prüfungen hohe Bewertungen vergeben werden, steigt die Wahrscheinlichkeit, dass die App für Nutzer angenehm ist. Sie können auch PageSpeed Insights oder den Bericht zur Nutzererfahrung in Chrome verwenden, um reale Leistungsdaten Ihrer Webanwendung zu erhalten.

Wie

In unserem Leitfaden zu kurzen 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 Webanwendung zugreifen, bevor sie installiert wird.

Gute Gründe

Progressive Web-Apps sind in erster Linie Web-Apps. Das bedeutet, dass sie nicht nur in einem, sondern auch in mehreren Browsern funktionieren müssen.

Eine effektive Möglichkeit dafür besteht darin, wie Jeremy Keith in Resilient Web Design die Hauptfunktionen zu identifizieren, diese mit möglichst einfachster Technologie verfügbar zu machen und die Nutzererfahrung dann nach Möglichkeit zu verbessern. In vielen Fällen bedeutet dies, dass Sie mit HTML beginnen, um die Hauptfunktionen zu erstellen, und dann die Nutzererfahrung mit CSS und JavaScript verbessern, um die Nutzerfreundlichkeit zu verbessern.

Nehmen wir z. B. die Formulareinreichung. Die einfachste Möglichkeit zur Implementierung ist ein HTML-Formular, das eine POST-Anfrage sendet. Danach können Sie JavaScript verwenden, um eine Formularvalidierung durchzuführen und das Formular über AJAX zu senden. So wird es für Nutzer, die es unterstützen können, verbessert.

Sorge dafür, dass die Nutzer deine Website auf verschiedenen Geräten und in unterschiedlichen Browsern nutzen können. Sie können nicht einfach nur das obere Ende des Spektrums ansprechen. Mithilfe der Funktionserkennung können Sie eine möglichst nutzerfreundliche Umgebung für eine möglichst große Bandbreite von potenziellen Nutzern bereitstellen, einschließlich derer, die Browser und Geräte verwenden, die es derzeit vielleicht nicht gibt.

Wie

Das Dokument Resilient Web Design von Jeremy Keith ist eine hervorragende Ressource. Darin wird beschrieben, wie man Webdesign mit dieser browserübergreifenden, progressiven Methodik realisiert.

Weitere Informationen

• Das Video Understanding Progressive Enhancement von List Apart bietet eine gute Einführung in das Thema.
• Progressive Enhancement: What It Is, And How To Use It? des Smashing Magazine bietet eine praktische Einführung und Links zu weiterführenden Themen.
• MDN bietet einen Artikel mit dem Titel Feature-Erkennung implementieren. Darin wird erläutert, wie man ein Feature durch direkte Abfrage erkennt.

Nutzer können deine PWA für jede Bildschirmgröße verwenden und alle Inhalte sind in jeder Größe verfügbar.

Gute Gründe

Die Geräte sind in verschiedenen Größen erhältlich und Nutzer können Ihre App in unterschiedlichen Größen verwenden, auch auf demselben Gerät. Daher ist es wichtig, dass deine Inhalte nicht nur in den Darstellungsbereich passen, sondern auch, dass alle Funktionen und Inhalte deiner Website in allen Größen des Darstellungsbereichs verwendbar 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. Die Inhalte können in verschiedenen Größen des Darstellungsbereichs neu angeordnet werden und sollten immer vorhanden sein. Luke Wroblewski sagt in seinem Buch „Mobile First“, dass sich das Design einer Website tatsächlich verbessern lässt, wenn man klein anfängt und dann groß statt umgekehrt:

> Für Mobilgeräte müssen sich Softwareentwicklungsteams auf die > wichtigsten Daten und Aktionen in einer Anwendung konzentrieren. Auf einem 320 x 480-Pixel-Bildschirm 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 Originalartikel von Ethan Marcotte, eine Sammlung wichtiger Konzepte im Zusammenhang mit diesem Design sowie eine Fülle von Büchern und Vorträgen. Wenn Sie diese Diskussion auf die inhaltlichen Aspekte des responsiven Webdesigns eingrenzen möchten, können Sie sich über Content-First-Design und responsive Layouts mit Inhalten informieren. Und obwohl der Fokus auf Mobilgeräten liegt, sind die Lektionen in Seven Deadly Mobile Myths von Josh Clark für kleine Ansichten responsiver Websites genauso relevant wie für Mobilgeräte.

Wenn Nutzer offline sind, ist es einfacher, sie in der PWA zu belassen, als wenn sie zur Offlineseite des Standardbrowsers zurückkehren.

Gute Gründe

Nutzer erwarten installierte Apps unabhängig von ihrem Verbindungsstatus. Eine plattformspezifische App zeigt niemals eine leere Seite an, wenn sie offline ist, und eine progressive Web-App sollte niemals die Standard-Offlineseite des Browsers anzeigen. Durch die Bereitstellung einer benutzerdefinierten Offlinenutzung – sowohl dann, 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 Verbindung erforderlich ist –, fühlt es sich an, 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 zur späteren Verwendung vorab im Cache speichern. Wenn ein Nutzer offline geht, können Sie mit der vorab im Cache gespeicherten benutzerdefinierten Offlineseite antworten. Anhand unseres benutzerdefinierten Beispiels für eine Offlineseite können Sie sich ein Beispiel dafür in Aktion ansehen und erfahren, wie Sie es selbst implementieren.

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

Gute Gründe

Durch die Installation einer progressiven Web-App kann sie wie alle anderen installierten Apps aussehen und funktionieren. Sie wird dort gestartet, wo 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.

Warum sollten Nutzer Ihre PWA installieren? Aus dem gleichen Grund, aus dem Sie möchten, dass Nutzer Ihre App aus einem App-Shop installieren. Nutzer, die Ihre Apps installieren, sind Ihre aktivste Zielgruppe. Sie erzielen bessere Engagement-Messwerte als herkömmliche Besucher, die oft gleichwertig mit App-Nutzern auf Mobilgeräten sind. Zu diesen Messwerten gehören mehr Wiederholungsbesuche, längere Verweildauern auf der Website und höhere Conversion-Raten.

Wie

In unserer Anleitung zum Installieren erfahren Sie, wie Sie Ihre PWA installierbar machen, wie Sie testen, ob sie installierbar ist, und wie Sie es selbst versuchen.

Wenn keine Verbindung unbedingt erforderlich ist, funktioniert Ihre Anwendung offline genauso wie online.

Gute Gründe

Nutzer erwarten nicht nur eine benutzerdefinierte Offlineseite, sondern auch, dass progressive Web-Apps auch offline verwendet werden können. So sollten beispielsweise in Apps für Reise- und Fluggesellschaften Reisedetails und Bordkarten offline verfügbar sein. Musik-, Video- und Podcast-Apps sollten die Offlinewiedergabe unterstützen. Social Apps und Nachrichten-Apps sollten aktuelle Inhalte im Cache speichern, damit Nutzer sie auch offline lesen können. Nutzer erwarten außerdem, dass die Authentifizierung auch offline aufrechterhalten bleibt. Wählen Sie daher eine Offlineauthentifizierung aus. Eine Offline-PWA bietet Nutzern ein App-ähnliches Erlebnis.

Wie

Nachdem Sie ermittelt haben, welche Funktionen Ihre Nutzer offline verwenden möchten, müssen Sie die Inhalte verfügbar machen und an Offlinekontexte anpassen. Darüber hinaus können Sie IndexedDB, ein browserinternes NoSQL-Speichersystem, zum Speichern und Abrufen von Daten verwenden, und die Hintergrundsynchronisierung, damit Nutzer offline Aktionen ausführen und die Serverkommunikation aufschieben können, bis der Nutzer wieder eine stabile Verbindung hat. Mit Service Workern können Sie auch andere Arten von Inhalten wie Bilder, Videodateien und Audiodateien für die Offlinenutzung speichern und sichere, langlebige Sitzungen implementieren, um die Authentifizierung der Nutzer zu gewährleisten. Im Hinblick auf die Nutzererfahrung können Sie Skeleton Screens verwenden, die Nutzern beim Laden einen Eindruck von Geschwindigkeit und Inhalten vermitteln. Diese können dann bei Bedarf auf zwischengespeicherte Inhalte oder eine Offlineanzeige zurückgreifen.

Alle Nutzerinteraktionen erfüllen die Anforderungen an die Barrierefreiheit gemäß WCAG 2.0.

Gute Gründe

Die meisten Menschen werden irgendwann in ihrem Leben die Vorteile Ihrer PWA im Rahmen der WCAG 2.0-Anforderungen für Barrierefreiheit nutzen wollen. Die Fähigkeit des Menschen, mit Ihrer PWA zu interagieren und sie zu verstehen, besteht in einem Spektrum und Anforderungen können vorübergehend oder dauerhaft sein. Wenn du deine PWA barrierefrei machst, ist sie für alle zugänglich.

Wie

Die Introduction to Web Accessibility von W3C ist ein guter Ausgangspunkt. Die meisten Tests der Barrierefreiheit müssen manuell durchgeführt werden. Mit Tools wie den Accessibility-Prüfungen 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. Beispiele hierfür sind die Elemente a und button. Wenn Sie erweiterte Funktionen erstellen müssen, werden die Erwartungen an die Barrierefreiheit erfüllt, z. B. wann Sie Pfeile und Tabs verwenden sollten. A11Y Nutrition Cards bietet dazu ausgezeichnete Empfehlungen für einige gängige Komponenten.

Ihre PWA lässt sich ganz einfach über die Suche finden.

Gute Gründe

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 aus der organischen Suche. Es ist wichtig, dass kanonische URLs für Inhalte vorhanden sind und Suchmaschinen deine Website indexieren können, damit Nutzer deine PWA finden können. Dies gilt insbesondere für das clientseitige 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 der Suchmaschinenoptimierung in Lighthouse verwenden, um Probleme mit der Sichtbarkeit deiner PWA zu beheben. Sie können auch die Webmaster-Tools von Bing oder Yandex verwenden und strukturierte Daten über Schemas von Schema.org in Ihre PWA aufnehmen.

Sie können Ihre PWA mit einer Maus, einer Tastatur, einem Eingabestift oder Touch-Geste verwenden.

Gute Gründe

Geräte bieten eine Vielzahl von Eingabemethoden und Nutzer sollten in der Lage sein, während der Verwendung Ihrer Anwendung nahtlos zwischen diesen zu wechseln. Genauso wichtig ist, dass Eingabemethoden nicht von der Bildschirmgröße abhängen sollten. Das bedeutet, dass große Darstellungsbereiche Touchfunktionen und kleine Darstellungsbereiche Tastaturen und Mäuse unterstützen müssen. Achten Sie nach besten Kräften darauf, dass Ihre Anwendung und alle ihre Funktionen jede Eingabemethode unterstützen, die der Nutzer verwenden möchte. Gegebenenfalls sollten Sie auch die Umgebung optimieren, um auch eingabespezifische Steuerelemente zu ermöglichen (z. B. zum Aktualisieren ziehen).

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 des Eingabestifts. Damit sowohl die Touchbedienung als auch die Tastatur unterstützt werden, musst du die richtigen semantischen Elemente (Anker, Schaltflächen, Formularsteuerelemente usw.) verwenden und diese nicht mit nicht semantischem HTML neu erstellen, was die Barrierefreiheit verbessert. Interaktionen, die durch Bewegen des Mauszeigers aktiviert werden, müssen auch durch Klicken oder Tippen aktiviert werden.

Wenn Sie um die Berechtigung zur Verwendung leistungsstarker APIs bitten, geben Sie Kontext an und fragen Sie nur dann, wenn die API erforderlich ist.

Gute Gründe

APIs, die eine Berechtigungsaufforderung auslösen (z. B. Benachrichtigungen, Standortbestimmung 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 Aktivierung erforderlich ist. Werden diese Aufforderungen ohne zusätzlichen Kontext ausgelöst, z. B. beim Seitenaufbau, sinkt die Wahrscheinlichkeit, dass Nutzer diese Berechtigungen akzeptieren und ihnen in Zukunft misstrauen werden. Lösen Sie diese Aufforderungen stattdessen nur aus, nachdem Sie dem Nutzer im Kontext begründet haben, warum Sie diese Berechtigung benötigen.

Wie

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

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

Gute Gründe

Bei der Entwicklung einer modernen Webanwendung spielt sich viel aus. Wenn Sie Ihre Anwendung auf dem neuesten Stand halten und Ihre Codebasis fehlerfrei halten, fällt es Ihnen leichter, neue Features bereitzustellen, die die anderen in dieser Checkliste aufgeführten Ziele erfüllen.

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, stellen Sie sicher, dass Sie keine eingestellten APIs verwenden, entfernen Sie Antimuster im Web aus Ihrer Codebasis (z. B. document.write() oder nicht passive Scroll-Ereignis-Listener) und sogar die defensive Codierung, damit Ihre PWA nicht unterbrochen wird, 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. Diese Techniken können dabei helfen, Fehler zu erkennen, bevor sie in die Produktion gelangen.