So erstellen Sie eine Progressive Web App

Mobile macht mittlerweile mehr als die Hälfte des Webverkehrs aus, und mit Webanwendungen können Benutzer im Browser Dinge tun, die mit nativen Apps konkurrieren. Es gibt jedoch ein Problem: Die Qualität von Verbindungen und Geräten ist weltweit sehr unterschiedlich.

Die neueste Herausforderung für die Benutzerfreundlichkeit besteht darin, sowohl Benutzer mit blitzschnellen Verbindungen in Seoul als auch Benutzer im ländlichen Indien mit einem veralteten Telefon zu bedienen. Progressive Web Apps sind die Lösung.

PWAs verwenden die progressive Verbesserung, um zuerst die wichtigsten Inhalte zu laden und dann nach Bedarf Präsentations- und Funktions-Extras hinzuzufügen, sodass alle Benutzer so schnell wie möglich die gleiche Kernerfahrung erhalten. Wenn Sie ein möglichst breites Publikum erreichen möchten, sind PWAs der richtige Weg.



Progressive Web Apps bieten zwar viele Vorteile und Funktionen für das Web, erfordern jedoch nicht das Umschreiben Ihrer gesamten Anwendung. Jede App kann durch Hinzufügen einiger zusätzlicher Ebenen in eine PWA konvertiert werden.

Um die besten Ergebnisse zu erzielen, sollten Sie von Anfang an einen starken Schwerpunkt auf die Leistung legen - dies gilt jedoch für jede Web-App. Hier werden wir die Schritte durchgehen, um Ihre App fortschrittlich zu machen.

01. Über HTTPS servieren

Seien wir ehrlich: Sie sollten das trotzdem tun. SSL fügt dem Web eine zusätzliche Sicherheitsebene hinzu, damit sich Ihre Benutzer bei der Verwendung Ihrer Website sicher fühlen. Bei PWAs ist HTTPS unerlässlich, um Servicemitarbeiter einzusetzen und die Installation des Startbildschirms zu ermöglichen. Sie können ein SSL-Zertifikat mit geringem Aufwand bei Ihrem Domain-Registrar erwerben und es dann über Ihren Hosting-Service konfigurieren.

02. Erstellen Sie eine Anwendungsshell

Ihre App-Shell wird als erstes geladen - als erstes, was der Benutzer sieht. Es sollte vollständig in Ihrem Index-HTML-Dokument mit Inline-CSS vorhanden sein, um sicherzustellen, dass es so schnell wie möglich angezeigt wird und Ihr Benutzer nicht länger als nötig auf einen weißen Bildschirm starrt. Die Anwendungsshell ist Teil des Musters der progressiven Verbesserung. Ihre App sollte den Benutzerinhalt so schnell wie möglich bereitstellen und ihn dann schrittweise verbessern, wenn mehr Daten (wahrscheinlich JavaScript) geladen werden.

Das folgende Beispiel stammt aus einer React.js-Anwendung. Dem Benutzer wird in der index.html ein Überblick über die App und ein Ladeindikator angezeigt. Sobald das JavaScript geladen und React gestartet ist, wird die vollständige Anwendung in der Shell gerendert.

Chat

// index.js ReactDOM.render( , document.getElementById('root') );

03. Registrieren Sie einen Servicemitarbeiter

Um das gesamte Spektrum der PWA-Goodies (Push-Benachrichtigungen, Caching, Eingabeaufforderungen installieren) nutzen zu können, benötigen Sie einen Servicemitarbeiter.

Zum Glück sind sie ziemlich einfach einzurichten. Im Folgenden prüfen wir zunächst, ob der Browser des Benutzers Servicemitarbeiter unterstützt. In diesem Fall können wir die hier aufgerufene Service-Worker-Datei registrieren service-worker.js . Beachten Sie, dass Sie zu diesem Zeitpunkt in dieser Datei nichts Besonderes benötigen - sie kann leer sein.

Im folgenden Beispiel wird jedoch gezeigt, wie Sie die drei wichtigsten Lebenszyklusereignisse für Servicemitarbeiter nutzen können. Dies sind 'Installieren', wenn der Benutzer Ihre Seite zum ersten Mal besucht. 'aktivieren', kurz bevor die Registrierung abgeschlossen ist; und 'abrufen', wenn die Anwendung eine Netzwerkanforderung stellt. Der letzte ist für das Caching und die Offline-Fähigkeit relevant.



if ('serviceWorker' in navigator) { window.addEventListener('load', function() { navigator.serviceWorker.register('service-worker.js').then(function(registration) { // Registration was successful console.log('Registered!'); }, function(err) { // registration failed :( console.log('ServiceWorker registration failed: ', err); }).catch(function(err) { console.log(err); }); }); } else { console.log('service worker is not supported'); } // service-worker.js self.addEventListener('install', function() { console.log('Install!'); }); self.addEventListener('activate', event => { console.log('Activate!'); }); self.addEventListener('fetch', function(event) { console.log('Fetch!', event.request); });

04. Push-Benachrichtigungen hinzufügen

Servicemitarbeiter ermöglichen Ihren Benutzern, Push-Benachrichtigungen über die Web-Push-API zu erhalten. Um darauf zuzugreifen, können Sie auf tippen self.registration.pushManager aus Ihrer Service Worker-Datei. Da das Senden von Push-Benachrichtigungen stark von Ihrem Backend-Setup abhängt, werden wir hier nicht darauf eingehen.

Wenn Sie eine App von Grund auf neu starten, enthält der Firebase-Dienst von Google Firebase Cloud Messaging für relativ schmerzlose Push-Benachrichtigungen. Der folgende Code zeigt, wie Sie sich über die Push-API für Push-Benachrichtigungen registrieren.

navigator.serviceWorker.ready.then(function(registration) { if (!registration.pushManager) { alert('No push notifications support.'); return false; } //To subscribe `push notification` from push manager registration.pushManager.subscribe({ userVisibleOnly: true //Always show notification when received }) .then(function (subscription) { console.log('Subscribed.'); }) .catch(function (error) { console.log('Subscription error: ', error); }); })

05. Fügen Sie ein Web-App-Manifest hinzu

Um Ihre Anwendung installierbar zu machen, müssen Sie a manifest.json im Stammverzeichnis der Anwendung. Sie können sich dies als eine Beschreibung Ihrer Anwendung vorstellen, ähnlich wie Sie sie möglicherweise an den App Store senden. Es enthält Symbole, einen Begrüßungsbildschirm, einen Namen und eine Beschreibung.

Es gibt auch einige Konfigurationen dafür, wie Ihre Anwendung angezeigt wird, wenn sie vom Startbildschirm des Benutzers aus gestartet wird: Möchten Sie die Adressleiste im Browser anzeigen oder nicht? Welche Farbe soll die Statusleiste haben? Und so weiter. Beachten Sie, dass eine richtige manifest.json sollte ein vollständiges Spektrum an Symbolgrößen für verschiedene Geräte enthalten. Der folgende Code ist eine Vorschau einiger Eigenschaften, die Ihr Manifest enthalten kann.

{ 'short_name': 'Chat', 'name': 'Chat', 'icons': [ { 'src':'img/', 'sizes': '192x192', 'type': 'image/png' } ], 'start_url': '/?utm_source=homescreen', 'background_color': '#e05a47', 'theme_color': '#e05a47', 'display': 'standalone' }

06. Konfigurieren Sie die Installationsaufforderung

Wenn ein Benutzer eine PWA mit einem Servicemitarbeiter und einem Manifest besucht, fordert Chrome ihn automatisch auf, sie auf seinem Startbildschirm zu installieren. Dabei muss der Benutzer die Site zweimal besuchen, zwischen den Besuchen fünf Minuten.

Die Idee hier ist, zu warten, bis der Benutzer Interesse an Ihrer Anwendung zeigt, und ihn dann zu bitten, sie zu einem festen Bestandteil seines Geräts zu machen (dies steht in scharfem Gegensatz zu dem nativen App-Ansatz, der diese Investition im Voraus verlangt).

Es kann jedoch Fälle geben, in denen Sie die Installationsaufforderung in verschiedenen Situationen anzeigen möchten, z. B. nachdem der Benutzer eine bestimmte nützliche Aktion ausgeführt hat. Dazu fangen wir die vor der Installation sofort Ereignis und speichern Sie es für später, dann stellen Sie die Eingabeaufforderung bereit, wenn wir es für richtig halten.

window.addEventListener('beforeinstallprompt', e => { console.log('beforeinstallprompt Event fired'); e.preventDefault(); // Stash the event so it can be triggered later. this.deferredPrompt = e; return false; }); // When you want to trigger prompt: this.deferredPrompt.prompt(); this.deferredPrompt.userChoice.then(choice => { console.log(choice); }); this.deferredPrompt = null;

07. Analysieren Sie die Leistung Ihrer App

Leistung ist das Herz und die Seele von PWAs. Ihre App sollte für Benutzer unter allen Netzwerkbedingungen schnell sein. Caching- und Offline-Funktionen helfen sehr, aber letztendlich sollte Ihre Anwendung schnell sein, auch wenn der Benutzer nicht über den Browser verfügt, der die Service Worker-Technologie unterstützt. Dies ist die Definition der progressiven Verbesserung - bieten Sie jedem eine großartige Erfahrung, unabhängig von der Modernität des Geräts oder den Netzwerkbedingungen.

Zu diesem Zweck ist das RAIL-System ein nützlicher Satz von Metriken. RAIL wird von Google als 'benutzerzentriertes Leistungsmodell' bezeichnet - eine Reihe von Richtlinien zur Messung der Leistung unserer App.

Das Akronym steht für Antwort (wie lange es dauert, bis Ihre App auf Benutzeraktionen reagiert), Animation (Animationsgeschwindigkeit bei 60 fps halten), Leerlauf (Zeit verwenden, wenn Ihre App nichts anderes unternimmt, um zusätzliche Assets zu laden und zwischenzuspeichern) und Laden (Laden Ihrer App in einer Sekunde oder weniger).

Hier finden Sie eine Tabelle mit aussagekräftigen Benchmarks für das Laden von Anwendungen, die von Meggin Kearney, Tech-Autorin bei, bereitgestellt wurden Google Web Fundamentals .

Verzögerung und Benutzerreaktion

Klicken Sie auf das Symbol oben rechts, um das Bild zu vergrößern

08. Überprüfen Sie Ihre App mit Lighthouse

Google ist der größte Champion, der Progressive Web Apps als Zukunft des Web vorantreibt. Als solches hat es ein nützliches Werkzeug zur Steuerung Ihrer PWA-Entwicklung geliefert.

Früher Lighthouse genannt und als Chrome-Erweiterung geliefert, ist es ab Chrome 60 Teil der Chrome DevTools unter der Registerkarte 'Audits'. Lighthouse führt Ihre Anwendung unter verschiedenen Bedingungen aus und misst ihre Reaktion und ihren Erfolg gemäß den PWA-Richtlinien. Sie erhalten dann eine Punktzahl von 100. Gleichzeitig kann Ihre App auch anhand von Best Practices im Web bewertet werden.

Hülle für MacBook Pro 13

Der folgende Text enthält eine Liste der gemessenen Werte für Lighthouse. Im Gebrauch werden auch Beschreibungen angezeigt.

  • Registriert einen Servicemitarbeiter
  • Antwortet mit 200, wenn offline
  • Enthält Inhalte, wenn JavaScript nicht verfügbar ist
  • Verwendet HTTPS
  • Leitet den HTTP-Verkehr zu HTTPS um
  • Das Laden von Seiten ist in 3G schnell genug
  • Der Benutzer kann aufgefordert werden, die Web-App zu installieren
  • Konfiguriert für einen benutzerdefinierten Begrüßungsbildschirm
  • Die Adressleiste entspricht den Markenfarben
  • Hat ein Tag mit Breite oder Anfangsskala
  • Der Inhalt hat die richtige Größe für das Ansichtsfenster

Dieser Artikel wurde ursprünglich in Web Designer veröffentlicht. Abonnieren Sie hier .

Zum Thema passende Artikel: