Progressive Web-Apps (PWAs) werden mit modernen APIs entwickelt und optimiert. Sie bieten erweiterte Funktionen, Zuverlässigkeit und Installierbarkeit und erreichen mit nur einer Codebasis jeden, überall und auf jedem Gerät. Orientieren Sie sich an den wichtigsten und optimalen Checklisten und Empfehlungen, damit Sie das bestmögliche Ergebnis erzielen.
Checkliste für progressive Web-Apps
In der Checkliste für progressive Web-Apps wird beschrieben, was eine App unabhängig von Größe oder Eingabetyp für alle Nutzer installierbar und nutzbar macht.
Starten schnell, bleiben schnell
Die Leistung spielt eine wichtige Rolle für den Erfolg jeder Online-Erfahrung, da Websites mit hoher Leistung Nutzer stärker ansprechen und binden als leistungsschwache Websites. Websites sollten sich auf die Optimierung im Hinblick auf nutzerorientierte Leistungsmesswerte konzentrieren.
Gute Gründe
Die Geschwindigkeit ist entscheidend dafür, dass Nutzer Ihre App verwenden. 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 die 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.
Funktioniert in jedem Browser
Nutzer können vor der Installation jeden beliebigen Browser für den Zugriff auf Ihre Webanwendung verwenden.
Gute Gründe
Progressive Web-Apps sind in erster Linie Web-Apps. Das bedeutet, dass sie nicht nur in einem, sondern in mehreren Browsern funktionieren müssen.
Eine effektive Möglichkeit besteht darin, wie Jeremy Keith von Resilient Web Design die Kernfunktionen zu identifizieren, diese Funktionen mithilfe möglichst einfachster Technologie zur Verfügung zu stellen 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 Nutzererfahrung zu optimieren.
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 mit AJAX zu senden. So wird es für Nutzer, die es unterstützen können, verbessert.
Nutzer können Ihre Website auf verschiedenen Geräten und in verschiedenen Browsern aufrufen. Eine Ausrichtung auf das obere Ende des Spektrums ist nicht möglich. Mit 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
Jeremy Keith's Resilient Web Design ist eine hervorragende Ressource, die beschreibt, wie man Webdesign in dieser browserübergreifenden, progressiven Methodik versteht.
Weitere Informationen
- Das Video Understanding Progressive Enhancement von List Apart bietet eine gute Einführung in das Thema.
- Der Artikel Progressive Enhancement: What It Is, And How To Use It? des Smashing Magazine bietet eine praktische Einführung und Links zu fortgeschritteneren Themen.
- MDN hat einen Artikel mit dem Titel Feature-Erkennung implementieren. Darin wird erläutert, wie man ein Feature durch direkte Abfrage erkennt.
Reagiert auf jede Bildschirmgröße
Nutzer können Ihre 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 verfügbar und Nutzer können Ihre App in unterschiedlichen Größen verwenden, sogar auf demselben Gerät. Daher ist es wichtig, dass Ihre Inhalte nicht nur in den Darstellungsbereich passen, sondern auch, dass alle Funktionen und Inhalte Ihrer Website in allen Größen des Darstellungsbereichs verwendet werden können.
Die Aufgaben, die Nutzer erledigen möchten, und die Inhalte, auf die sie zugreifen möchten, ändern sich nicht je nach 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 das Design einer Website tatsächlich verbessert werden kann, wenn man klein anfängt und dann groß statt umgekehrt:
Bei Mobilgeräten müssen sich Softwareentwicklungsteams nur auf die wichtigsten Daten und Aktionen in einer Anwendung konzentrieren. In einem Bildschirm mit 320 x 480 Pixeln ist 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 sich auf die inhaltlichen Aspekte des responsiven Webdesigns konzentrieren möchten, können Sie sich über Content-First-Design und responsive Layouts mit Inhalten informieren. 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.
Stellt eine benutzerdefinierte Offlineseite bereit
Wenn Nutzer offline sind, ist es einfacher, sie in Ihrer PWA zu belassen, als wenn sie zur Standard-Offlineseite des Browsers wechseln.
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. Wenn ein Nutzer eine URL aufruft, die nicht im Cache gespeichert ist, oder versucht, eine Funktion zu verwenden, für die eine Verbindung erforderlich ist, fühlt es sich wie als Teil des Geräts an, auf dem es 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 Offlineseiten können Sie sich ein Beispiel dafür in Aktion ansehen und erfahren, wie Sie es selbst implementieren.
Kann installiert werden
Nutzer, die Apps auf ihrem Gerät installieren oder hinzufügen, 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. Er wird dort gestartet, wo Nutzer auch andere 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 ein Nutzer Ihre App aus einem App-Shop installiert. Nutzer, die Ihre Apps installieren, sind Ihre aktivste Zielgruppe und haben bessere Engagement-Messwerte als herkömmliche Besucher, die oft gleichwertig mit App-Nutzern auf Mobilgeräten sind. Zu diesen Messwerten gehören mehr wiederholte Besuche, 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 und wie Sie sie testen können, um sie selbst zu installieren.
Checkliste für optimale progressive Web-Apps
Um eine wirklich großartige progressive Web-App zu erstellen, die sich wie eine erstklassige App anfühlt, benötigen Sie mehr als nur eine Checkliste. Bei der Checkliste für optimale progressive Web-Apps geht es darum, der PWA das Gefühl zu geben, dass sie Teil des Geräts ist, auf dem sie ausgeführt wird, und gleichzeitig die Leistungsfähigkeit des Webs optimal nutzen.
Bietet Offline-Nutzung
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 offline verwendet werden können. Beispielsweise sollten in Apps für Reise- und Fluggesellschaften Reisedetails und Bordkarten offline verfügbar sein. Musik-, Video- und Podcasting-Apps sollten die Offlinewiedergabe ermöglichen. Social Apps und Nachrichten-Apps sollten aktuelle Inhalte im Cache speichern, damit Nutzer sie offline lesen können. Nutzer erwarten außerdem, dass die Authentifizierung auch offline stattfindet, wählen Sie daher eine Offline-Authentifizierung aus. Eine Offline-PWA bietet Nutzern eine App-ähnliche Erfahrung.
Wie
Nachdem Sie festgelegt haben, welche Funktionen Ihre Nutzer offline verwenden möchten, müssen Sie die Inhalte verfügbar und an Offlinekontexte anpassen. Darüber hinaus können Sie IndexedDB, ein browserinternes NoSQL-Speichersystem, zum Speichern und Abrufen von Daten sowie die Hintergrundsynchronisierung verwenden, damit Nutzer offline Aktionen ausführen und die Serverkommunikation aufschieben können, 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 Offlinenutzung zu speichern. Im Hinblick auf die Nutzererfahrung können Sie Skeleton Screens verwenden, die Nutzern während des Ladevorgangs einen Eindruck von Geschwindigkeit und Inhalt vermitteln. Diese können dann bei Bedarf auf zwischengespeicherte Inhalte oder eine Offlineanzeige zurückgreifen.
Es ist uneingeschränkt zugänglich.
Alle Nutzerinteraktionen erfüllen die Anforderungen an die Barrierefreiheit gemäß WCAG 2.0.
Gute Gründe
Die meisten Menschen werden irgendwann in ihrem Leben Ihre PWA auf eine Weise nutzen wollen, die den WCAG 2.0-Anforderungen für Barrierefreiheit unterliegt. Die Fähigkeit des Menschen, mit Ihrer PWA zu interagieren und sie zu verstehen, gibt ein ganzes Spektrum und Bedürfnisse, kann temporär oder dauerhaft sein. Wenn Sie Ihre PWA barrierefrei gestalten, ist sie für alle zugänglich.
Wie
Die Einführung in die Web-Barrierefreiheit 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 der Barrierefreiheit automatisieren. Außerdem ist es wichtig, die semantisch korrekten Elemente zu verwenden, anstatt diese Elemente selbst neu zu erstellen. Dazu gehören z. B. a- und button-Elemente. So wird sichergestellt, dass bei der Entwicklung erweiterter Funktionen die Erwartungen an die Barrierefreiheit erfüllt werden (z. B. wann Pfeile und wann Tabs verwendet werden sollen).
A11Y Nutrition Cards gibt diesbezüglich für einige gängige Komponenten hervorragende Tipps.
Können über die Suche gefunden werden
Ihre PWA lässt sich ü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. 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 Ihre Website indexieren können, damit Nutzer Ihre PWA finden können. Dies gilt insbesondere für das clientseitige Rendering.
Wie
Achten Sie zuerst darauf, dass jede URL einen eindeutigen, aussagekräftigen Titel und eine Meta-Beschreibung hat. Anschließend können Sie die Google Search Console und die Prüfungen zur Suchmaschinenoptimierung in Lighthouse verwenden, um Probleme mit der Sichtbarkeit Ihrer PWA zu beheben. Sie können auch die Webmaster-Tools von Bing oder Yandex verwenden und strukturierte Daten mithilfe von Schemas von Schema.org in Ihre PWA aufnehmen.
Funktioniert mit jedem Eingabetyp
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 während der Verwendung Ihrer Anwendung nahtlos zwischen diesen wechseln können. Genauso wichtig ist, dass Eingabemethoden nicht von der Bildschirmgröße abhängig sein sollten. Das heißt, große Darstellungsbereiche müssen Touchfunktionen und kleine Darstellungsbereiche Tastaturen und Mäuse unterstützen. Achten Sie nach besten Kräften darauf, dass Ihre Anwendung und alle ihre Funktionen jede Eingabemethode des Nutzers unterstützen. Gegebenenfalls sollten Sie auch die Nutzererfahrung verbessern, 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 für die Barrierefreiheit geeignet ist). Interaktionen, die durch Bewegen des Mauszeigers aktiviert werden, müssen auch durch Klicken oder Tippen ausgelöst werden.
Stellt Kontext für Berechtigungsanfragen bereit
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 den Nutzer störend sind, da sie häufig 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 es weniger wahrscheinlich, 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 mitgeteilt 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 verstehen, wie Berechtigungsaufforderungen erstellt werden, die zwar auf Mobilgeräte ausgerichtet sind, aber für alle PWAs gelten.
Erfüllt die Best Practices für fehlerfreien Code
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 veralteten APIs verwenden, entfernen Sie Antimuster im Web aus der Codebasis (z. B. document.write() oder nicht passive Scroll-Event-Listener) und sogar defensive Codierungen, damit Ihre PWA nicht kaputtgeht, 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. Mit diesen Techniken können Sie Fehler erkennen,
bevor sie in die Produktion gelangen.