Haupt / Computing

9 erstaunliche PWA-Geheimnisse

Progressive Web Apps (PWAs) sind eine neue Grenze in sich anpassendes Webdesign und sie werden immer beliebter. Die PWA-Unterstützung begann mit Chrome unter Android und ist jetzt in den meisten anderen Android-Browsern wie Opera, Firefox, Samsung Internet und UCWeb sowie auf iPhones und iPads von iOS 11.3 und Edge für Windows und Chrome unter Desktop-Betriebssystemen verfügbar.

Um Ihnen zu helfen, ein Gut zu schaffen Benutzererfahrung Für dieses wachsende Publikum werden wir einige wichtige Tricks und Ideen teilen. Weitere Ratschläge finden Sie in unserem Artikel über Wie erstelle ich eine App? .

01. WebAPK vs Android Verknüpfung

Im Jahr 2017 hat Chrome eine neue Funktion für Android-Benutzer eingeführt: WebAPK. Wenn Ihre Benutzer Ihre PWA installieren (sofern sie den Anforderungen entspricht), erstellt ein Google Play-Server im laufenden Betrieb eine APK (Android Package, ein nativer App-Container) und installiert sie auf dem Gerät, als ob sie aus dem Play Store stammt . Ihr Benutzer muss keine unsicheren Quellen aktivieren oder andere Einstellungen berühren.

Wenn die PWA installiert ist, wird sie auf dem Startbildschirm, im App-Starter, in den Einstellungen und als jede andere erstklassige Bürger-App im Betriebssystem angezeigt, einschließlich Informationen zu Akku und im System verwendetem Speicherplatz.

Wenn Ihre PWA nicht alle Anforderungen erfüllt, der Wiedergabedienst nicht verfügbar ist, ein Verbindungsproblem vorliegt oder ein anderer Android-Browser wie Firefox oder Samsung Internet verwendet wird, wird eine Standardverknüpfung zum Startbildschirm erstellt. Dieses Symbol wird ab Android 8+ als Browser gekennzeichnet.

WebAPK ermöglicht auch eine nette, aber gefährliche Funktion, die Sie beachten müssen: Die PWA besitzt die Domäne und den Pfad innerhalb der Grenzen des Android-Betriebssystems. Basierend auf dem Bereichsattribut Ihres Web-App-Manifests wird jeder Link, den der Benutzer zu diesem Bereich erhält, an Ihre Vollbild-App und nicht an den Browser weitergeleitet. Dies bedeutet, dass Sie auf die von Ihnen verwendeten URLs achten müssen.

Angenommen, Sie haben eine PWA, die mobile Benutzer bedient, und sie befindet sich im Stammordner Ihrer Domain. Wenn die App über WebAPK installiert wird, gehört nun die gesamte Domain der PWA. Wenn Sie eine Umfrage unter / Umfrage haben, die Sie über Facebook teilen, oder eine PDF-Datei mit Nutzungsbedingungen, die Sie per E-Mail an Ihre Benutzer unter /terms.pdf senden, öffnet das Betriebssystem PWA und nicht den Browser, wenn Sie auf diese Links klicken. Es ist wichtig zu überprüfen, ob Ihr PWA-Routing-System über diese URLs Bescheid weiß und wie sie bereitgestellt werden, und, falls nicht, sie in einem Browser in einem anderen Bereich zu öffnen.

Wir können

Wir können das Web-App-Installationsbanner eines Browsers nicht anpassen, aber wir können sie verschieben, nachdem wir dem Benutzer weitere Informationen angezeigt haben

Mehrere Browser laden den Benutzer ein, Ihre PWA zu installieren, wenn bestimmte Bedingungen erfüllt sind, einschließlich wiederkehrender Besuche dieses Benutzers für Ihre PWA. Im Moment enthält das Banner nicht genügend Informationen, warum ein Benutzer akzeptieren sollte. Wir können jedoch Ereignisse verwenden, um das Banner zu vermeiden und, was noch wichtiger ist, es auf etwas zu verschieben, das mit größerer Wahrscheinlichkeit Akzeptanz erzeugt, z. B. ein Installationssymbol.

Der erste Schritt besteht darin, das Erscheinen des Banners abzubrechen und das Ereignisobjekt zur späteren Verwendung zu speichern:

// global variable for the event object var installPromptEvent; window.addEventListener('beforeinstallprompt', function(event) { event.preventDefault(); installPromptEvent = event; });

Der nächste Schritt besteht darin, eine Benutzeroberfläche bereitzustellen, um die Vorteile der Installation zu erläutern, oder eine Schaltfläche Installieren. Diese Benutzeroberfläche ruft unsere nächste Funktion auf:

function callInstallPrompt() { // We can't fire the dialog before preventing default browser dialog if (installPromptEvent !== undefined) { installPromptEvent.prompt(); } }

In kompatiblen Browsern löst die Web Share API den bekannten Freigabedialog des Betriebssystems aus

Wenn sich Ihre PWA im Vollbildmodus befindet, gibt es keine URL-Leiste oder Freigabeaktion im Browser, über die der Benutzer Inhalte für soziale Netzwerke freigeben kann. Wir können die Web Share API nutzen und einen Fallback haben, um native soziale Apps zu öffnen.

function share() { var text = 'Add text to share with the URL'; if ('share' in navigator) { navigator.share({ title: document.title, text: text, url: location.href, }) } else { // Here we use the WhatsApp API as fallback; remember to encode your text for URI location.href = 'https://api.whatsapp.com/send?text=' + encodeURIComponent(text + ' - ') + location.href } }

04. Analytics-Tracking

Wenn Sie eine PWA haben, möchten Sie so viele Ereignisse wie möglich verfolgen. Schauen wir uns also alles an, was wir derzeit messen können. Sie können Google Analytics-APIs oder andere Analysetools verwenden, um diese Ereignisse später zu verfolgen.

window.addEventListener('appinstalled', function(event) { // Track event: The app was installed (banner or manual installation) }); window.addEventListener('beforeinstallprompt', function(event) { // Track event: The web app banner has appeared event.userChoice.then(function(result) { if (result.outcome === 'accepted') { // Track event: The web app banner was accepted } else { // Track event: The web app banner was dismissed } }); });

Das nächste wichtige Tracking-Ereignis ist, wenn der Benutzer die App vom Startbildschirm aus öffnet. Das bedeutet, dass der Benutzer auf das Symbol der App geklickt oder unter Android mit WebAPK-Unterstützung auch auf einen Link geklickt hat, der auf den PWA-Bereich verweist.

Der einfachste Weg, dies zu tun, besteht darin, das Attribut start_url des Manifests zu verwenden und der URL ein Tracking-Ereignis hinzuzufügen, das automatisch als Ursprung aus einem Analytics-Skript verwendet werden kann, z.

start_url: '/?utm_source=standalone&utm_medium=pwa'

Das folgende Skript hinterlässt einen booleschen Wert, der angibt, ob sich der Benutzer derzeit in einem Browser (true) oder in einem eigenständigen App-Modus (false) befindet:

var isPWAinBrowser = true; // replace standalone with fullscreen or minimal-ui according to your manifest if (matchMedia('(display-mode: standalone)').matches) { // Android and iOS 11.3+ isPWAinBrowser = false; } else if ('standalone' in navigator) { // useful for iOS < 11.3 isPWAinBrowser = !navigator.standalone; }

Wenn Sie dann Push-Benachrichtigungen verwenden, können Sie mehrere Ereignisse im Servicemitarbeiter verfolgen, z.

self.addEventListener('push', function(e) { // Track event: Push Message Received }); self.addEventListener('notificationclick', function(e) { // Track event: Push Message Clicked, you can read e.action.id to track actions }); self.addEventListener('notificationclose', function(e) { // Track event: Push Message Dismissed });

05. Erstellen Sie eine kompatible iOS PWA

Stellen Sie beim Ausführen von PWAs unter iOS immer sicher, dass Sie Ihre Statusleistendefinition überprüfen, um unterschiedliche Statusleistenerfahrungen zu erzielen

Während viele glauben, dass die PWA-Unterstützung zum ersten Mal auf iOS 11.3 landen wird, ist die Wahrheit, dass das Konzept - wenn auch mit einem anderen Namen - von Steve Jobs vor mehr als zehn Jahren auf der WWDC 07 vorgestellt wurde. Deshalb unterstützte iOS den Startbildschirm und Offline-Apps für eine Weile unter Verwendung älterer Techniken. Ab iOS 11.3 werden jedoch dieselben Spezifikationen wie für Android unterstützt.

Wenn Sie vor iOS 11.3 noch eine Installationserfahrung anbieten möchten, müssen Sie Meta-Tags hinzufügen oder eine Polyfill verwenden, die dieser Autor unter https://github.com/firtman/iWAM erstellt hat

Jetzt ist Ihre PWA offline-fähig und kann unter iOS installiert werden, auch wenn Sie sich nicht für iOS anmelden. Es ist wichtig, einige Unterschiede zu verstehen, die sich auf Ihre PWA-Benutzererfahrung unter iOS auswirken können:

Symbole unter iOS müssen quadratisch und nicht transparent sein, um Probleme mit der Benutzeroberfläche zu vermeiden. Verwenden Sie nicht das gleiche Symbol wie auf Android. Verwenden Sie 120x120 und 180x180 für iPhones.
Wenn Sie ein SPA haben oder auf andere Seiten in Ihrem Bereich verlinken, gehen Sie vorsichtig mit der Navigation um, da iOS-Benutzer keine Möglichkeit haben, vorwärts oder rückwärts zu gehen, wenn Sie keine Navigationslinks in Ihrer Benutzeroberfläche bereitstellen. Wischgesten funktionieren bei Vollbild-PWAs nicht.
Ab den ersten Versionen von iOS 11.3 lädt das Betriebssystem PWAs bei jedem Zugriff auf die App neu. Wenn der Benutzer die App verlassen muss, um später wiederzukommen (z. B. für einen bidirektionalen Authentifizierungsprozess), denken Sie an Ihre Die App startet standardmäßig von vorne.

06. Daten im Hintergrund synchronisieren

Servicemitarbeiter haben einen separaten Lebenszyklus vom PWA-Fenster oder der Registerkarte des Browsers. Aus diesem Grund können Sie Netzwerkvorgänge im Hintergrund ausführen, auch nachdem der Benutzer die PWA geschlossen hat. Wenn ein Vorgang aussteht und zu diesem Zeitpunkt kein Netzwerkzugriff verfügbar ist, lässt uns die Engine im Hintergrund verarbeiten, wenn später eine Verbindung erkannt wird.

Die Hintergrundsynchronisierungs-API ist derzeit nur in einigen Browsern verfügbar, daher müssen Sie einen Fallback bereitstellen. Die Idee ist, dass Ihre PWA ein Flag mit einem String-Tag setzt, das angibt, dass eine Hintergrundsynchronisierung durchgeführt werden muss.

navigator.serviceWorker.ready.then(function(reg) { reg.sync.register('myTag') });

Dann hören wir auf dem ServiceWorker das Ereignis und wenn es das Label ist, erwarten wir, dass wir ein Versprechen zurückgeben. Wenn das Versprechen erfüllt ist, wird der Vorgang als abgeschlossen markiert. Wenn nicht, wird es später im Hintergrund weiter versucht.

self.addEventListener('sync', function(event) { if (event.tag === 'myTag') { event.waitUntil(doAsyncOperationForMyTag()); } });

Wenn Ihre Benutzer Ihre PWA-Inhalte in sozialen Netzwerken teilen oder Pseudobrowser verwenden (Browser ohne eigene Engine, aber mit Webansichten), müssen Sie sich einiger Probleme bewusst sein.

Beispielsweise verwendet Facebook ein WebView in den Android- und iOS-Apps, um ein In-App-Browsing-Erlebnis zu bieten, wenn die Benutzer auf einen Link klicken. Unter Android unterstützen die meisten WebViews keine Servicemitarbeiter und können Ihre PWA nicht installieren. Wenn der Benutzer Ihre Inhalte über Facebook öffnet, verhält sich Ihre PWA so, als wäre sie ein nicht kompatibler Browser ohne zwischengespeicherte Dateien oder Sitzungsdetails .

Ab iOS 11.3 unterstützt WebView Servicemitarbeiter, ist jedoch ein Klon derselben PWA, die der Benutzer in Safari oder sogar in anderen Pseudo-Browsern wie Chrome oder Firefox unter iOS verwendet hat.

Wenn Sie daher ein Installationsbanner oder ein Installationshinweisdialogfeld rendern, in dem der Wert der Installation Ihrer App erläutert wird, überprüfen Sie, ob Sie sich in einer WebView befinden, da der Benutzer Ihre Schritte nicht ausführen kann. Blenden Sie diese Informationen aus oder laden Sie den Benutzer ein, die URL im Standardbrowser zu öffnen. Dies gilt unter anderem für Facebook unter Android, Facebook unter iOS, Chrome unter iOS und Firefox unter iOS. Es ist schwierig, eine Live-Überprüfung durchzuführen, ob Sie sich in einem WebView befinden oder nicht, aber es gibt eine Hilfswerkzeug verfügbar .

08. Test auf Android-Geräten und Emulatoren

Das Testen von Servicemitarbeitern und Web App Manifest erfordert https mit Ausnahme von localhost. Während lokale Desktop-Tests anfangs in Ordnung sind, möchten wir unsere PWAs irgendwann auf Android-Geräten in Aktion sehen. Wie können wir das machen? Der Zugriff auf einen Entwicklungsserver von unserem Telefon oder Android-Emulator aus funktioniert nicht, da es sich nicht um https und aus Sicht des Android-Betriebssystems nicht um localhost handelt.

Die Lösung wird mit den Chrome Developer Tools angezeigt. Wenn wir zu chrome: // gehen und einen Emulator oder ein reales Gerät mit angeschlossenem USB-Debugging untersuchen und öffnen, können wir die Portweiterleitung aktivieren. Dann wird http: // localhost auf unserem Android-Gerät an den localhost unseres Host-Computers oder einen anderen Host weitergeleitet. Mit diesem Trick rendert Android die PWA ordnungsgemäß über eine nicht sichere Verbindung. Beachten Sie jedoch, dass WebAPK das Paket zwar erstellt und installiert, im Standalone-Modus jedoch möglicherweise nicht funktioniert.

09. Veröffentlichung in Geschäften

PWA Builder ist ein Microsoft Online-Tool zum Erstellen von speicherkompatiblen PWA-Paketen für Windows 10 und andere Betriebssysteme

Während der PWA-Ansatz nicht mit Blick auf die Geschäfte begann, wurden einige Angebote, darunter Twitter Lite und Google Maps Go im Play Store, PWAs in den Geschäften anbieten. Wenn Sie daran interessiert sind, Ihre PWA zu vertreiben, ohne sie mit Cordova zu verpacken, stehen Ihnen folgende Optionen zur Verfügung:

Microsoft Store: Sie können eine PWA für Windows 10 mit dem offiziellen Tool von erstellen pwabuilder.com
Google Play Store: Zum Zeitpunkt des Schreibens können Sie mit den auf Canary Channel verfügbaren vertrauenswürdigen Webaktivitäten eine Android-App erstellen, die nur eine PWA öffnet, die Sie besitzen, und diese im Store verteilt, wodurch eine ähnliche Lösung wie bei WebAPK erstellt wird. Sie können mehr lernen Hier .
Apple App Store: Derzeit gibt es keine offiziellen Lösungen für die Verteilung von PWAs. WKWebView unterstützt jedoch Servicemitarbeiter ab iOS 11.3, sodass es nicht schwierig ist, einen einfachen Wrapper für eine PWA zu erstellen. Die Frage ist, wird Apple es im Store genehmigen? Apple möchte keine Lösungen, die nur Websites mit einem Wrapper sind.

Dieser Artikel wurde ursprünglich in Ausgabe 304 von veröffentlicht Netz , das weltweit meistverkaufte Magazin für Webdesigner und Entwickler. Ausgabe 304 hier kaufen oder Abonnieren Sie hier .

Zum Thema passende Artikel: