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

Die Geschwindigkeit ist entscheidend, damit Nutzer Ihre App verwenden können. Wenn sich die Seitenladezeit von einer Sekunde auf zehn Sekunden erhöht, die Wahrscheinlichkeit, dass ein Nutzer abspringt, um 123 % steigt. Die Leistung entspricht nicht mit dem Ereignis load beenden. Nutzer sollten sich nie fragen, ob die Interaktion, z. B. der Klick auf eine Schaltfläche, registriert ist oder nicht. Scrollen und Animationen sollten sich flüssig anfühlen. 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 Leistungsdaten aus der Praxis 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 stehen an erster Stelle und müssen daher auch funktionieren. in verschiedenen Browsern.

Eine effektive Möglichkeit, dies zu erreichen, besteht laut Jeremy Keith in seinem Buch Resilient Web Design darin, die Hauptfunktionen 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 dies, dass wir um die Kernfunktionen zu erstellen und die Nutzererfahrung mit CSS und JavaScript für mehr Interaktion.

Nehmen wir zum Beispiel die Formulareinreichung. Am einfachsten lässt sich das implementieren, Ein HTML-Formular, mit dem eine POST-Anfrage gesendet wird. Nach der Erstellung die Sie mit JavaScript bereichern können, Validierung und senden das Formular über AJAX. für Nutzende, die sie 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 über Webdesign dieser plattformübergreifenden, progressiven Methode.

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 es 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 ihr gesamter Inhalt ist Größe des Darstellungsbereichs verfügbar.

Warum

Die Geräte gibt es in verschiedenen Größen und Nutzer können Ihre App verschiedenen Größen, sogar auf demselben Gerät. Daher ist es wichtig, dass Ihre Inhalte in den Darstellungsbereich passen, Funktionen und Inhalte für Ihre Website in allen Größen des Darstellungsbereichs 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 und alle sollten immer da sein, eine andere. Wie Luke Wroblewski in seinem Buch Mobile First sagt, Wenn Sie klein anfangen und Ihr Design für größere Bildschirme optimieren, Website-Design:

Softwareentwicklungsteams müssen sich auf Mobilgeräte konzentrieren, nur die wichtigsten Daten und Aktionen in einer Anwendung anzeigen. Es gibt einfach ist auf einem Bildschirm mit 320 x 480 Pixeln kein Platz für überflüssige, Elemente. Sie müssen Prioritäten setzen.

Wie

Es gibt viele Ressourcen zum Thema responsives Design, einschließlich der Original Artikel von Ethan Marcotte, ein wichtigen Konzepten sowie zahlreiche Bücher und Vorträge. Zur Eingrenzung bis hin zu den inhaltlichen Aspekten des responsiven Designs, inhaltsorientiertes Design und Responsive-Layouts ohne Inhalt. 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, können Sie sie in Ihrer PWA speichern. als der Wechsel zurück in den Standardbrowser. Seite.

Warum

Nutzer erwarten, dass installierte Apps unabhängig von ihrer Internetverbindung funktionieren Status. Eine plattformspezifische App zeigt nie eine leere Seite an, offline ist und in einer PWA nie die standardmäßige Offlineseite des Browsers angezeigt wird. 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. Zur Kasse Offline-Fallback-Seite erstellen um zu erfahren, wie Sie sie selbst implementieren. Beachten Sie, dass Chrome Einfache Offlineseite anzeigen, wenn keine angegeben ist.

Nutzer, die Apps auf ihrem Gerät installieren oder hinzufügen, interagieren meist mit diesen Apps mehr.

Warum

Das Erscheinungsbild und die Funktionsweise einer progressiven Web-App alle anderen installierten Apps. Sie wird an derselben Stelle gestartet, an der die Nutzer auch starten. ihre anderen Apps. 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, Ihrer aktiven Zielgruppe und erzielen oft Engagement-Messwerte, die denen in der App entsprechen. mobilen Nutzern angezeigt. 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

Folgen Sie unserer Anleitung zum Installieren. finden Sie weitere Informationen dazu, wie Sie Ihre PWA installierbar machen.

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

Warum

Nutzer erwarten, dass PWAs nicht nur eine benutzerdefinierte Offlineseite bieten, und offline nutzbar sind. So sollten beispielsweise Reise- und Flug-Apps Informationen und Bordkarten sind auch offline jederzeit verfügbar. Musik, und Podcast-Apps 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 bleiben. Daher sollten Sie bei der Entwicklung Offline-Authentifizierung. 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 und anpassbar machen. Sie können IndexedDB, ein In-Browser-NoSQL-Speichersystem, zum Speichern und Abrufen von Daten verwenden und die Hintergrundsynchronisierung nutzen, damit Nutzer auch offline Aktionen ausführen und die Serverkommunikation bis zur Wiederherstellung einer stabilen Verbindung verschieben können. Sie können auch den Dienst andere Inhalte wie Bilder, Videodateien, und Audiodateien, für die Offline-Nutzung sichere, langlebige Sitzungen 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 Barrierefreiheit.

Warum

Die meisten Nutzer möchten Ihre PWA irgendwann in ihrem Leben verwenden. die unter die WCAG 2.0 fallen, Anforderungen an die Barrierefreiheit. Menschen die Fähigkeit, mit den Menschen dass Ihre PWA in einem breiten Spektrum verfügbar ist, und dass ihre Anforderungen temporär oder dauerhaft. Wenn Sie Ihre PWA barrierefrei gestalten, können sie alle nutzen.

Wie

Ein guter Ausgangspunkt ist die Einführung in die Barrierefreiheit im Web des W3C. Bei den meisten Tests zur Barrierefreiheit manuell erledigt werden muss. Tools wie die Bedienungshilfen in Lighthouse, Axe, und Statistiken zur Barrierefreiheit 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 Sie bei Bedarf Erwartungen an die Barrierefreiheit erfüllt werden (z. B. wann Sie Pfeile verwenden sollten) und Tabs). A11Y Nutrition Cards bietet hervorragende Tipps zu einigen gängigen Komponenten.

Ihre PWA kann leicht entdeckt werden über die Suche.

Warum

Einer der größten Vorteile des Webs ist die Möglichkeit, Websites und Apps über die Suche zu finden. Tatsächlich stammen mehr als 50 % aller Websitezugriffe über die organische Suche. Wenn Sie sicherstellen, kanonische URLs für Inhalte existieren und dass Suchmaschinen eure ist wichtig, damit potenzielle Nutzer Ihre PWA finden. Dies ist besonders beim clientseitigen Rendering.

Wie

Achten Sie zuerst darauf, dass jede URL einen eindeutigen, beschreibenden Titel und eine Meta-Beschreibung hat. Dann können Sie die Methode Google Search Console und die Prüfungen zur Suchmaschinenoptimierung in Lighthouse, um Probleme mit der Auffindbarkeit Ihrer PWA zu beheben. Ich können auch die Funktionen von Bing oder die Website von Yandex Tools für Verantwortliche und erwägen, strukturierte Daten mit Schemas aus Schema.org in Ihrer PWA.

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. Genauso Wichtig: Eingabemethoden sollten nicht von der Bildschirmgröße abhängen. große Darstellungsbereiche müssen Berührungen unterstützen und kleine Darstellungsbereiche müssen dies unterstützen. Tastaturen und Mäuse. 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. Erweitern Sie die Funktionen gegebenenfalls, um 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. Zur Unterstützung beider Berührungen und die Tastatur verwenden, achten Sie darauf, dass Sie die richtigen semantischen Elemente verwenden, (Anker, Schaltflächen, Formularsteuerelemente usw.) und nicht mit nicht semantisches HTML. Wenn Sie Interaktionen einbeziehen, die aktiviert werden, wenn der Mauszeiger darauf bewegt wird, dass sie sich auch durch Klicken oder Tippen aktivieren lassen.

Wenn Sie die Berechtigung zur Verwendung von leistungsstarken APIs erhalten, geben Sie den entsprechenden Kontext an wenn die API benötigt wird.

Warum

APIs, die eine Berechtigungsaufforderung auslösen, z. B. Benachrichtigungen, Standortbestimmung und Anmeldedaten, sind absichtlich so konzipiert, dass sie Nutzer stören. da sie sich in der Regel auf leistungsstarke Funktionen beziehen, für die eine Aktivierung 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. Lösen Sie diese Aufforderungen stattdessen erst aus, nachdem dem Nutzer eine kontextbezogene Begründung dafür liefern, warum das erforderlich ist. Berechtigung.

Wie

Die UX-Berechtigung und UX Planet Nutzer richtig um Berechtigungen bitten sind gute Ressourcen, um zu verstehen, wie Berechtigungsaufforderungen gestaltet werden können, auf alle PWAs anzuwenden.

Wenn Ihre Codebasis fehlerfrei ist, können Sie Ihre Ziele leichter erreichen neue Funktionen zu entwickeln.

Warum

Eine moderne Webanwendung hat viel zu bieten. 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, codebase:

• Verwenden Sie keine Bibliotheken mit bekannten Sicherheitslücken.
• Verwenden Sie keine veralteten APIs.
• Entfernen Sie unsichere Codierungspraktiken aus Ihrer Codebasis (z. B. document.write() oder ein nicht-passives Scroll-Ereignis Hörer),
• Sie können sogar defensiv programmieren, damit Ihre PWA auch in Analyse- oder Drittanbieterbibliotheken werden nicht geladen.
• 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.