Inhalt
- Der Aufstieg der PWAs
- PWAs heute in Aktion
- Installation
- Offline und sofortiger Start
- Erstklassige Erfahrung
- App Stores
- Plattformintegration
- Design- und UX-Herausforderungen
- Das Jahr der PWAs
So wie Responsive Web Design vor einigen Jahren die Lücke zwischen Desktop- und mobilen Websites geschlossen hat, schließen fortschrittliche Web-App-Techniken derzeit die Lücke zwischen Web und App-Welt. Angesichts der schnellen Konvergenz der Benutzererfahrungen von Desktop- zu mobilen Apps scheint sich ein viel schlankeres und effizienteres Internet zu entwickeln - allerdings unweigerlich nicht ohne wesentliche Änderungen des zugrunde liegenden genetischen Codes.
- So erstellen Sie eine Progressive Web App
Offensichtlich gibt es einige signifikante selektive Drücke, die dies antreiben. Erstens ist das Erstellen nativer Apps für jede Nische nicht unbedingt eine effiziente Ressourcennutzung: Benutzer verschwenden am Ende Hunderte großer Apps, die Bandbreite und wertvollen Speicherplatz verschwenden, und Unternehmen geben viel Geld aus, um Apps nur für die Aufgabe zu erstellen nach ihren ersten Versionen. Und die meisten dieser Apps werden nur von Webinhalten gesteuert: Informationen, die von Webdiensten oder einem Content-Management-System stammen.
Die Definition einer progressiven Web-App ist nicht konkret. Eine PWA ist nur eine Web-App, die mehrere neue APIs und Funktionen in der Webplattform verwendet und die progressive Verbesserung verwendet, um auf jeder Plattform mit derselben Codebasis eine App-ähnliche Erfahrung zu bieten. Es handelt sich eher um eine Reihe von Best Practices und API-Anwendungen, die Ihren Benutzern eine hervorragende App-ähnliche Erfahrung bieten. Es ist also nicht so, als ob Sie eine PWA haben oder nicht. Es ist eher so, als ob Ihre Website mehr oder weniger PWA ist.
Beginnen Sie mit dem Bau einer neuen Website? Versuchen Sie es mit einem Website Builder. Und stellen Sie sicher, dass Sie auch von einem anständigen Webhosting-Service die Unterstützung erhalten, die Sie benötigen. Weitere Informationen finden Sie in unserem Leitfaden zum besten Cloud-Speicher.
Der Aufstieg der PWAs
Während der Name PWA 2015 in dem Artikel "Escaping Tabs Without Losing our Soul" von Alex Russell, der bei Google für das Chrome-Team arbeitet, geprägt wurde, begann ihre Reise dort nicht wirklich. Früher hatten wir HTML-Anwendungen (HTAs), die 1999 von Microsoft erstellt wurden, sowie viele andere Web-App-Plattformen von Nokia, BlackBerry und anderen Unternehmen. 2007 präsentierte Steve Jobs dann die damals einzige Möglichkeit, Apps für das ursprüngliche iPhone zu erstellen: PWAs, allerdings mit einem anderen Namen. Von dort aus startete Chrome, verbesserte einige Jahre später die APIs und erfand den PWA-Namen.
Warum glauben wir, dass es nach so vielen fehlgeschlagenen Erfahrungen, die versucht haben, Webinhalte in die Welt der Apps zu bringen, jetzt funktioniert? In erster Linie sind es die Unternehmen, die jetzt an den Technologien arbeiten und diese fördern, die hinter PWAs stehen, wie Microsoft, Google, Apple und Mozilla, um nur einige zu nennen. Außerdem hat die Leistung der Webplattform einen Punkt erreicht, an dem beim Vergleich einer gut gestalteten PWA mit einer nativen App kein Unterschied mehr wahrgenommen wird. Diese Bedingungen gab es noch nie und aus diesem Grund hat die Web-Community entschieden, dass die Zeit für PWAs gekommen ist.
PWAs heute in Aktion
Heute sind PWAs voll funktionsfähig und installierbar auf:
- Android mit den meisten Browsern, wobei Chrome die beste Erfahrung bietet
- iOS mit Safari
- Chromebooks
- Windows 10 aus dem Microsoft Store
- Funktionstelefone mit KaiOS - einer Gabel von Firefox OS - sind derzeit für Millionen von Benutzern hauptsächlich in Indien verfügbar
Später in diesem Jahr wird auch MacOS, Windows und Linux über Chrome unterstützt. Es ist heute als experimentelles Flag "Desktop PWA" verfügbar, wenn Sie es jetzt ausprobieren möchten. Die Installation unter Windows on Edge ohne Nutzung des Speichers erfolgt ebenfalls später, obwohl kein bestimmter Zeitrahmen definiert ist.
Wenn Sie die Liste erneut lesen, können Sie sehen, dass jede Plattform in den folgenden Monaten Unterstützung für vollständig installierbare PWAs hat oder haben wird. Und da eine PWA nur eine Website mit Funktionen ist, die nur in kompatiblen Browsern aktiviert werden, können wir aufgrund ihrer Grundfunktionalität sogar sagen, dass sie mit allen Browsern kompatibel ist.
Außerdem werden derzeit PWAs aus den meisten CLIs für verschiedene Frameworks generiert, einschließlich Angular 6+ CLI, React Create App, PWA Starter Kit von Polymer und Preact CLI. Schließlich kam das Ionic Framework-Team auf die Idee von Capacitor, einem Open-Source-Cordova-Ersatz, der native PWAs in jedem App Store ermöglicht.
Installation
Einer der kritischen Aspekte einer PWA ist die Installation der App. Dieser Vorgang erfolgt in zwei optionalen Schritten: Herunterladen und Offline-Speichern der App-Dateien sowie Installation der Symbole im Betriebssystem. Da beide Schritte optional sind, können Sie eine Offline-Erfahrung im Browser oder ein Symbol ohne Offline-Installation anbieten. Eine echte PWA sollte jedoch beides enthalten: Sie muss unter HTTPS mit TLS bereitgestellt werden, und der Benutzer entscheidet, ob er sie im Browser oder in seinem eigenen installierten Symbol verwendet.
Offline und sofortiger Start
Das Gehirn einer PWA ist der Servicemitarbeiter, eine auf dem Gerät des Benutzers installierte JavaScript-Datei, die dafür verantwortlich ist, die Dateien der App herunterzuladen, in einem Cache zu speichern und sie später bei Bedarf bereitzustellen. Sobald der Service Worker installiert ist, fungiert er als Netzwerk-Proxy für jede Ressource, die die Webanwendung benötigt: Er kann entscheiden, ob er sie aus dem Netzwerk abruft oder aus dem lokalen Cache bereitstellt, wodurch die App offline und auch in nur einer Minute verfügbar ist ein paar Millisekunden, selbst wenn der Benutzer eine Verbindung hat, die einen nativen App-Start emuliert.
Um einen Servicemitarbeiter zu installieren, muss Ihr HTML-Dokument Folgendes enthalten:
if ("serviceWorker" im Navigator) navigator.serviceWorker.register ("sw.js");
Dadurch wird die Datei "sw.js" für den aktuellen Ordner in der aktuellen Domäne auf den Geräten der Benutzer installiert - ein Konzept, das als Bereich bezeichnet wird. Nach der Installation werden die nächsten Besuche einer URL in ihrem Bereich von diesem Servicemitarbeiter verwaltet.
Nehmen wir an, wir haben eine PWA mit vier Dateien: index.html, app.js, app.css und logo.png. Das erste, was Sie tun müssen, ist, diese Dateien im Cache der Datei sw.js zu installieren.
const resources = ["index.html", "app.js", "app.css", "logo.png"]; selbst. addEventListener ("install", event => {event. waitUntil (caches.open ("myPWAcache") .then (cache => cache.addAll (resources));});
Damit die PWA immer aus dem Cache bereitgestellt wird, müssen wir auf das Abrufereignis im Service Worker warten und die zu verwendende Cache-Richtlinie festlegen, z. B. zuerst mit dem folgenden Snippet zwischenspeichern.
self.addEventListener ("fetch", e => e.respondWith (caches.match (e.request). then (res => res);
In diesem Fall erhält die Engine jedes Mal, wenn der Benutzer auf die PWA zugreift (sowohl über einen Browser als auch über ein installiertes Symbol), die Dateien aus dem Cache. Ein Vorteil von PWAs gegenüber nativen Apps besteht darin, dass Geräte bei einer Änderung nicht alle Dateien erneut herunterladen müssen, sondern nur die Datei, die sich in einem transparenten Prozess geändert hat. Außerdem können wir bei Bedarf weiterhin Teile der App herunterladen.
Die Herausforderung besteht jedoch darin, woher wissen Sie, welche Dateien auf dem Server aktualisiert wurden, damit Sie sie im Cache ersetzen können? Wenn Sie keinen Low-Level-Service-Worker schreiben möchten, um dies zu verwalten, können Sie die Open-Source-Bibliothek Workbox verwenden, die Sie bei der Generierung des Service-Workers und des Ressourcenmanifests zum Aktualisieren des installierten Pakets unterstützt.
Beachten Sie, dass die Dateien Ihrer PWA gelöscht werden, wenn Speicherdruck auf dem Gerät herrscht, es sei denn, Sie fordern Persistent Storage an, falls verfügbar:
if ("Speicher" in Navigator && "Persist" in navigator.storage) navigator.storage.persist ();
In Chrome und den meisten Android-Browsern kann Ihre App nicht mehr als fünf Prozent des verfügbaren Speicherplatzes nutzen. Unter iOS sind es nur 50 MB (fast 50 MB) pro Host. In Edge ist es je nach Gesamtspeichergröße variabel und im Windows Store unbegrenzt.
Erstklassige Erfahrung
Wir haben das Gehirn und jetzt ist es Zeit für das Herz: das Web-App-Manifest. Der Zweck, eine Website in eine PWA zu verwandeln, besteht nicht nur darin, sicherzustellen, dass sie schnell oder offline verfügbar ist, sondern auch, dass sie ein eigenes Symbol im Betriebssystem hat und wie jede andere installierte App ein völlig eigenständiges Erlebnis bietet.
Das Manifest ist eine JSON-Datei, die Metadaten für die PWA definiert, die von einem Browser oder einem App Store verwendet werden, um das Installationsverhalten zu definieren.
Die Datei definiert mehrere Eigenschaften als Metadaten für Ihre PWA. Jedes Betriebssystem liest diese Eigenschaften und versucht sein Bestes, um der von Ihnen bevorzugten Erfahrung zu entsprechen. Beispielsweise liest Android "Anzeige: Standalone" und erstellt ein normales App-Erlebnis. Mit "display: minimal-ui" wird eine Erfahrung mit einer sichtbaren URL und einem TLS-Zertifikat erstellt - nützlich für sicherheitsrelevante Apps. Mit "Anzeige: Vollbild" werden vollständig immersive Apps ohne Statusleiste oder sichtbare Zurück-Schaltfläche erstellt. Eine Reihe von Symbolen und Farben definiert, wie die Begrüßungsbildschirme oder Titelleisten für das Fenster Ihrer App aussehen.
Es gibt einige Manifestgeneratoren, z. B. den Web App Manifest Generator oder PWA Builder, die die Größe des Symbols in verschiedenen Auflösungen ändern, wenn Sie eine hochauflösende Auflösung (mindestens 512 Pixel) angeben.
Wenn Sie die Manifestdatei in Ihrem HTML-Dokument verknüpft haben, können Benutzer die App je nach Browser mit verschiedenen Techniken installieren, die normalerweise als "Zum Startbildschirm hinzufügen", "Installieren" oder "Nur Hinzufügen" bezeichnet werden. Wenn Ihre PWA von Bing gecrawlt werden kann, fügt Microsoft sie automatisch dem Microsoft Store hinzu, damit Windows 10-Benutzer sie von dort aus installieren können.
Unter einigen Betriebssystemen kann Ihre PWA Links erfassen. Dies bedeutet, dass nach der Installation der App durch den Benutzer alle URLs im Rahmen Ihres Manifests innerhalb der Grenzen Ihrer App und nicht im Browser geöffnet werden, unabhängig davon, ob sie im Browser oder in anderen Apps wie WhatsApp oder Facebook angezeigt werden oder eine E-Mail.
Wenn Sie die hier definierten PWA-Anforderungen erfüllen, bieten einige Plattformen Umgebungs-Badging (ein kleines Symbol normalerweise in der URL-Leiste, das angibt, dass das Web installierbar ist) oder ein Web-App-Banner. Wenn Sie möchten, können Sie auch Ihre eigene benutzerdefinierte Installationsschaltfläche mithilfe des folgenden Snippets hinzufügen:
window.addEventListener ("beforeinstallpr ompt", Funktion (e) {e.prompt (); // zeigt die native Eingabeaufforderung für die Installation an})
Wenn die PWA installiert ist, wird das Ereignis "Appinstalled" auf dem Fensterobjekt ausgelöst, sodass Sie Statistiken verfolgen können, die darauf warten.
App Stores
Einer der Hauptvorteile der Installation über einen Browser besteht darin, dass der Genehmigungsprozess für den App Store vermieden werden muss oder Sie zahlen müssen, um ein Publisher zu sein. Dies bringt offensichtliche Vorteile mit sich, z. B. das sofortige Veröffentlichen, das Erstellen privater Apps für Unternehmen oder Apps, die nicht in den Filialen akzeptiert werden sollten.
Aber einige Unternehmen wollen im Laden sein. Ab heute sind die einzigen Geschäfte, die PWAs offiziell akzeptieren, der Windows Store und der kaiOS Store. Glücklicherweise können wir mit Tools wie Capacitor (derzeit in Alpha) oder PWA Builder native Pakete auch für andere Plattformen erstellen und signieren.
Im Google Play Store sind bereits einige PWAs veröffentlicht, z. B. Twitter Lite und Google Maps Go, die derzeit benutzerdefiniert implementiert werden. Chrome bietet eine Lösung von Chrome 68 über vertrauenswürdige Webaktivitäten an. Ab diesem Zeitpunkt können wir ein Android-Paket (APK) mit einem Launcher für unsere PWA erstellen und in den Store hochladen. Für den Microsoft Store unter Windows 10 hilft die Site PWA Builder derzeit bei der Generierung eines APPX Windows 10-Pakets. Mithilfe einer Webansicht können Sie möglicherweise manuell eine iOS-App für den App Store erstellen. Beachten Sie jedoch die Regeln des Stores.
Plattformintegration
Durch die Implementierung fortschrittlicher Verbesserungstechniken können Sie viele Funktionen nutzen, darunter Push-Benachrichtigungen, Kamera- und Mikrofonzugriff, Geolokalisierung, Sensoren, Zahlungen, Freigabedialoge und Offline-Speicher. Alle diese Funktionen werden direkt im Sicherheitsmodell des Browsers ausgeführt, einschließlich Berechtigungsdialogen.
Wir können auch mit anderen Apps über URI-Schemata wie das Öffnen von Twitter, YouTube oder WhatsApp über deren URLs oder benutzerdefinierte URIs wie WhatsApp: // kommunizieren.
Wenn wir native PWAs erstellen, die mit Capacitor oder im Microsoft Store im Store veröffentlicht werden, können wir eine Brücke zu nativen APIs schlagen, mit denen wir praktisch jeden nativen Code ausführen können. Diese Integration mit Windows 10 umfasst den Hardwarezugriff, aber auch die Integration mit dem Betriebssystem und bietet Optionen wie Pin to Start. Mit der Twitter-PWA können Sie beispielsweise jeden Benutzer an Ihren Startbildschirm anheften.
Design- und UX-Herausforderungen
Das Entwerfen von PWAs ist mit einzigartigen Herausforderungen verbunden. Daher ist es wichtig, einige Zeit mit Nachforschungen zu verbringen, so viel wie möglich zu testen und Folgendes zu berücksichtigen:
- Benutzer erwarten App-ähnliche Erlebnisse.
- Der Installationsprozess ist noch neu, daher müssen wir zusätzliche Anstrengungen unternehmen, um zu erklären, wie die App installiert wird.
- Das Aktualisieren der App im Hintergrund ohne Benutzerinteraktion ist großartig, bringt aber auch einige Herausforderungen für die UX mit sich.
- Auf dem Desktop nimmt das reaktionsschnelle Webdesign eine neue Grenze ein, da PWA-Fenster winzig sein können und viel kleiner als ein mobiles Ansichtsfenster. Dies bedeutet, dass wir bestimmte Ansichten oder kleine Widgets für dieses Format erstellen müssen, wie dies heute in Chrome OS der Fall ist.
- Push-Benachrichtigungen sollten nur dem Benutzer einen Mehrwert bieten. Lernen Sie also, im richtigen Moment zu fragen, und verpassen Sie nicht die Gelegenheit, Nachrichten zu senden, die nicht nützlich oder interessant sind.
- Wir müssen für die Webleistung und für den Offline-Zugriff entwerfen.
Das Jahr der PWAs
Mit iOS und Desktop in diesem Jahr sind PWAs heute überall. Wir müssen uns jedoch daran erinnern, dass ihre Reise gerade erst beginnt. Erwarten Sie daher häufige Änderungen und halten Sie sich mit den neuesten Techniken und Ideen auf dem Laufenden, um eine hervorragende Benutzererfahrung zu erzielen, während sich die Plattform weiterentwickelt.
Dieser Artikel wurde ursprünglich in Ausgabe 308 von veröffentlicht Netz, das weltweit meistverkaufte Magazin für Webdesigner und Entwickler. Ausgabe 308 hier kaufen oder Abonnieren Sie hier.
