PWA Checkliste & optimale Vorgehensweise

Progressive Webanwendungen (PWAs) haben in letzter Zeit stark an Dynamik gewonnen. Das ist keine Überraschung! PWAs sind schnell, zuverlässig und ansprechend und bieten gleichzeitig wünschenswerte Funktionen in Verbindung mit einem hohen Komfort für Mobiltelefonnutzer und Entwickler.
Es ist keine Überraschung, dass das Konzept, eine einzige Anwendung für alle Plattformen zu schreiben, die von einem einzigen Code gesteuert wird, in der Welt der Web-Entwicklung der letzte Schrei und der Trend der Stunde ist.

Insbesondere bei der Entwicklung von progressiven Webanwendungen sind oft nur wenige Änderungen und geringfügige Optimierungen an bestehenden Websites erforderlich, um zufriedenstellende Ergebnisse zu erzielen. Ganz zu schweigen von dem riesigen Pool an Unterstützung, auf den Entwickler im Internet zurückgreifen können, wo eine große Community und Marktführer ihre Tipps und Tricks für die Implementierung hervorragender PBAs austauschen.

Der Aufbau einer einfachen PBA ist zwar einfach, aber das bedeutet nicht, dass Sie es sich leicht machen müssen! Die Festlegung und Fertigstellung einer Mindest-Checkliste für die PWA-Entwicklung ist nur der Anfang. Es lohnt sich auf jeden Fall, die Extrameile zu gehen, um die Vorteile dieser Technologie wirklich zu nutzen.

Deshalb werden wir in diesem Artikel untersuchen, was eine PWA -Checkliste mindestens enthalten sollte, welche anderen Lösungen eingeführt werden müssen, um die positiven Ergebnisse der PWA -Einführung zu maximieren, und welche Werkzeuge zur Verfügung stehen, um sicherzustellen, dass wir eine PWA erstellen, die sich von anderen abhebt.

Technisch gesehen ist eine PWA eine Website mit einem Manifest. Konzeptionell gibt es noch viel mehr! Es ist eine Möglichkeit (die einzige), eine Website auf dem Startbildschirm eines mobilen Geräts zu speichern, ohne den App-Store der Plattform aufrufen zu müssen. Ganz zu schweigen davon, dass es kostenlos ist! Vor diesem Hintergrund wollen wir uns die vier Elemente ansehen, die eine PIA mindestens enthalten sollte, um die grundlegenden Anforderungen und Praktiken zu erfüllen, und eine Checkliste beschreiben:

1. Manifest Datei : manifest.json

Die Webmanifestdatei ist ein JSON-Repository mit Metadaten zu Ihrer Website, das Sie im Stammverzeichnis Ihrer Webanwendung abgelegt haben. Es sammelt alle Informationen, die Sie für die Konfiguration des Erscheinungsbildes der PWA benötigen. Die wichtigsten Details sind die Icons, die Themenfarbe, der Titel, der Kurztitel und die Darstellung als Standalone (als PWA). Dadurch weiß das Gerät, wie die PWA nach der Installation oder beim Hinzufügen zum Hauptbildschirm aussieht und wie sie sich beim Start verhält.

Die JSON-Datei enthält grundlegende Daten und ist sehr einfach. Sie könnte zum Beispiel so aussehen:

{
"short_name": "PWA",
"name": "Meine PWA",
"icons": [
{
"src": "/images/icon192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "/images/icon512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": "/pwa/",
"background_color": "#262626",
"display": "standalone",
"scope": "/pwa/",
"theme_color": "#262626"
}

2. Service Worker

Ein Service Worker ist eigentlich eine JavaScript-Datei, die zwischen dem Browser und dem Server sitzt. Sie ist die wichtigste PWA-Komponente, die Sie an die Wurzel der Webanwendung setzen, da sie im Hintergrund sowohl im Namen des Browsers als auch des Servers Anfragen bearbeitet und Antworten sendet. Die Idee dahinter ist, durch das Hosting der einzelnen Webseiten Ihrer Anwendung die Offline-Fähigkeit und den Zugriff auf die PWA-Funktionen zu ermöglichen. Dank des Service Workers müssen die Nutzer nicht warten, bis die Daten beim nächsten Öffnen der Anwendung geladen sind. Dies ermöglicht auch die Implementierung von Instant Messaging.

3. HTTPS

Der Service Worker muss über HTTPS bereitgestellt werden, daher muss der PWA ein SSL-Zertifikat auf dem Webserver enthalten. Die beliebteste (um nicht zu sagen: einfachste und kostenloseste) Methode ist die Verschlüsselung mit Let’s Encrypt.

4. Icons

Keine Anwendung gibt es ohne Icons, auch eine PWA nicht. Ganz zu schweigen davon, dass dies im Manifest vermerkt sein sollte. Das Symbol wird beim Start der PWA vom Hauptbildschirm aus verwendet. Die einfachste Lösung wäre ein einziges 512 x 512 Pixel großes Symbol, aber die PWA kann viele Symbole in verschiedenen Größen haben. Sinnvoll ist es neben der Größe von 512x512px Icons zusätzlich in einer Größe von 192×192 Pixel (wie im Beipiel oben) in die manifest aufzunehmen.

Leider noch nicht ganz fertig…

Wie bereits erwähnt, handelt es sich hierbei nur um ein notwendiges Minimum und einen Weg des geringsten Widerstands, den wir definitiv nicht empfehlen. Die PWA-Konstruktion ist ziemlich nahtlos, so dass sich der zusätzliche Aufwand lohnt, um die Nutzer wirklich zufrieden zu stellen und die Wahrscheinlichkeit eines Gesamterfolgs zu erhöhen.

Eine Reihe von Zusatzfunktionen heben die Basis- PWA auf ein vorbildliches Niveau. Webentwickler sollten sie aus drei Hauptperspektiven betrachten: Aussehen und Qualität, Sicherheit und Leistung, Technologie und Entwicklungslösungen. Lassen Sie uns in die Tiefe gehen und herausfinden, wie jeder dieser Punkte Ihnen helfen kann, der Zeit voraus zu sein:

Die Vermeidung von häufigen Fehlern in Bezug auf die Benutzerfreundlichkeit und das Erscheinungsbild ist der Schlüsse. Webentwickler müssen sich darüber im Klaren sein, dass das Design für die PWA eher einer nativen mobilen App als einer responsiven Web-App entspricht. Bei der Umgestaltung herkömmlicher Web-Designs für die mobile Nutzung können leicht schwerwiegende Fehler gemacht werden.

Bei der Gestaltung eines PWA ist es wichtig, die Probleme im Zusammenhang mit responsivem Feedback und Bildlaufstörungen anzugehen, insbesondere bei Websites mit großen Feeds oder endlosem Scrollen. Nichts ärgert Nutzer mehr, als wenn das Erscheinungsbild bröckelt oder die Anwendung leer ist. Es ist gute PWA-Praxis, niemals einen horizontalen Bildlauf zu erzwingen, es sei denn, es ist notwendig. Die Einstellungen für Breite oder Höhe können ganz weggelassen werden. Wenn man dies einschränkt, erhöht sich die Wahrscheinlichkeit, dass das Layout zerstört wird. Es ist eine gute Idee, einen Rahmenbildschirm einzuführen, um das Problem der blockierten Bildschirmübergänge in langsamen Netzen zu lösen und einen reibungslosen Ablauf zu gewährleisten.

Eine weitere gute Praxis ist die Verwendung von Geräteschriften anstelle von benutzerdefinierten Schriftarten. Lokale Anwendungen verwenden lokale Schriftarten, weil sie das Ereignis ohne Netzverbindung sofort laden und die Benutzer in der Regel bereits mit ihnen vertraut sind. Verzichten Sie außerdem auf Rastergrafiken und halten Sie sich an SVG-UI-Elemente wie die einfache Navigation am unteren Rand.

Um die Benutzeroberfläche und das Aussehen der PWA zu verbessern und sie näher an die native App heranzuführen, können Sie auch blaue Blitze aus dem CSS entfernen, die Textauswahl deaktivieren, Hervorhebungen abschalten, die Navigation so einfach wie möglich gestalten (wählen Sie eine Navigation von unten, keine Hamburger-Menüs) und sicherstellen, dass die Seiten auf allen mobilen Geräten responsive sind. Der Inhalt springt beim Laden der Seite nicht umher.

Nicht zuletzt lohnt es sich, die Google-APIs zu nutzen, die das Web-Erlebnis erheblich bereichern können. Am beliebtesten sind Lösungen zur Erleichterung der Verwaltung von Berechtigungsnachweisen und Zahlungsanträgen. Ersteres ist praktisch, weil die Nutzer die Seite oft verlassen, wenn sie sehen, dass sie sich anmelden müssen. Es ist auch gut, über die API auf die im Browser gespeicherten Anmeldeinformationen zuzugreifen. Anstatt die Nutzer zu zwingen, langwierige Zahlungsformulare auszufüllen, bevor sie sich abmelden, kann die API das gesamte Verfahren auf einen einzigen API-Aufruf beschränken.

Heute geht es bei reichhaltigen Erlebnissen vor allem um Leistung. Konzentrieren Sie sich darauf, weniger Skripte zu laden und stellen Sie sicher, dass diese asynchron geladen werden. Eine Erhöhung der Ladegeschwindigkeit und Leistung ist auch möglich, wenn die Anwendung klein gehalten wird. Webentwickler können mit Hilfe von Source-Map-Browser-Tools die schwerwiegendsten Abhängigkeiten ermitteln und beseitigen.

Die Leistung ist auch bei geringer oder fehlender Internetanbindung entscheidend. Achten Sie darauf, dass Ihre Seite schnell lädt, auch in einem 3G-Netz. Sie verwendet Cache-First-Netzwerke und stellt sicher, dass alle URLs in der App auch dann geladen werden, wenn sie offline sind. Darüber hinaus sollte das ORS die Nutzer ordnungsgemäß darüber informieren, dass sie offline sind.

Was die Sicherheit betrifft, so ist HTTPS der absolute Standard für Pbv. Stellen Sie sicher, dass Ihre Website über dieses Zertifikat bedient wird! Nutzen Sie auch das PRPL-Modell, das für die Strukturierung und Bedienung von Pbv verwendet wird. Es versucht, die Interaktionszeit so optimal wie möglich zu halten und eine maximale Cache-Effizienz zu gewährleisten. Der Name der Dekodierung übersetzt es am besten:

• kritische Ressourcen für ursprünglichen URL-Route pushen
• Rendering der ursprünglichen Route
• Verbleibende Routen Pre-Cache speichern
• Lazy-Load und Erstellung verbleibender Routen nach Bedarf

Es ist wichtig, daran zu denken, dass die Leistung des PWA-Ansatzes entscheidend ist. Sie können dies besser verstehen, wenn Sie PageSpeed Insights (versuchen Sie, eine Punktzahl von 85 zu übertreffen) und den SpeedIndex von Sitesetest (Zielwert über 4000 in einem 3G-Netzwerk) verwenden. Beide Lösungen werden Ihnen Aufschluss darüber geben, wie Sie sie steigern können.

Es gibt eine Reihe von technischen Lösungen für Entwickler, die sich lohnen, um Ihre PWA hervorzuheben. So wird z. B. das serverseitige Rendering empfohlen, da es die Geschwindigkeit erhöht, mit der die Benutzer mit den Inhalten interagieren, selbst wenn JavaScript deaktiviert ist oder nicht funktioniert. Dies ist auch für die Suchmaschinenoptimierung von Vorteil, da Suchmaschinen die PWA leichter indexieren können, was ebenfalls von Vorteil ist. Um dies zu erreichen, müssen Sie sicherstellen, dass Ihre Inhalte zugänglich sind und jede Seite eine URL hat.

Vergessen Sie nicht die Grundlagen (eine Mindest-Checkliste) wie ein Web-Manifest und die Zwischenspeicherung von Servicepersonal. Stellen Sie sicher, dass Ihre Website in allen Browsern funktioniert. Vergessen Sie auch nicht, Metadaten für die Funktion Zum Startbildschirm hinzufügen anzugeben.

Was die Grundlagen der PWA-Architektur betrifft, so verwenden Sie das Google Application Shell-Modell. Dies ist eine großartige Möglichkeit, robuste und sofort ladbare Bildschirme zu erstellen – genau wie in nativen Anwendungen. Die Anwendungs-Shell ist das Minimum an HTML, CSS und JavaScript, das erforderlich ist, um Schnittstellen im Offline-Cache zu aktivieren. Dies führt zu einer zuverlässigen und schnellen Leistung, da die Shell nicht jedes Mal geladen wird, wenn der Benutzer die Anwendung besucht. Diese Methode ist zuverlässig, um die Shell mit Hilfe eines Service Workers abzufangen und die Anwendung am Laufen zu halten. Der Inhalt wird dann mit JavaScript geladen. Praktisch, nicht wahr?

Was Google betrifft, so tut das Unternehmen alles, was es kann, um hohe Standards und Praktiken im Bereich Pbv zu fördern. Sie veröffentlichen eine breite Palette von Kursen und Schulungsmaterialien und stellen Tools zur Verfügung, die das Testen und Implementieren von PMV erleichtern – buchstäblich ein Paradies für aufgeschlossene und wissbegierige Entwickler! Diese Lösungen sind nützlich, vor allem, wenn Sie die Checkliste ausgefüllt haben. Schauen wir uns zwei der beliebtesten Tools genauer an, um den Umfang der verfügbaren Hilfe zu veranschaulichen:

• Lighthouse, ein automatisiertes Open-Source-Tool zur Verbesserung der Qualität von Webseiten. Sie können es auf jeder Webseite ausführen, ob öffentlich oder mit Authentifizierung. Dazu gehören Prüfungen der Leistungsfähigkeit, der Barrierefreiheit, progressiver Webanwendungen und vieles mehr. Beacon erstellt Audits darüber, wie gut eine Seite bei Tests abgeschnitten hat, und liefert einfache Indikatoren zur Verbesserung Ihrer Leistung.
• Desktop ist eine Reihe von Bibliotheken und Node-Modulen, die es einfach machen, Assets zu hosten und den vollen Nutzen aus den Funktionen zu ziehen, die zum Aufbau von Pbas verwendet werden. Mit diesen JavaScript-Bibliotheken können Entwickler problemlos Offline-Unterstützung für Webanwendungen hinzufügen. Caching und Serving von Dateien zur Verbesserung der Leistung, Stabilität auch bei unzuverlässigen Verbindungen und Verbesserung der Benutzerfreundlichkeit – die Arbeit mit der Workbox macht alles viel einfacher!

Zum Schluß…

Wie Sie sehen, ist es nicht sehr schwierig, die grundlegenden Anforderungen der bewährten PWA-Praxis zu erfüllen. Der Spaß fängt an, wenn wir versuchen, es auf die nächste Stufe zu heben, es zu verfeinern und die Benutzerfreundlichkeit und Effizienz ernst zu nehmen. Das ist wichtig, vor allem, weil der PWA wirklich auf dem Vormarsch ist und eine großartige Benutzererfahrung und benutzerfreundliche technische Lösungen bietet. Mit einer PWA -Checkliste, wie sie in diesem Artikel aufgeführt ist, ist es relativ einfach, das Nutzererlebnis zu bereichern und eine Lösung zu schaffen, die sympathisch ist und geteilt werden kann.