In letzter Zeit wird viel über Progressive Web-Apps diskutiert. Sie sind zwar noch relativ neu, können aber Apps, die mit Vanilla JS, React, Polymer, Angular oder einem anderen Framework erstellt wurden, gleichermaßen verbessern. In diesem Post fasse ich einige Optionen und Referenz-Apps für den Einstieg in Ihre eigene progressive Web-App zusammen.
Was ist eine progressive Web-App?
Progressive Web-Apps funktionieren überall, werden aber in modernen Browsern optimiert. Progressive Enhancement ist ein Rückgrat des Modells.
Aaron Gustafson verglich Progressive Enhancement mit einem Peanut M&M. Die Erdnuss ist Ihr Inhalt, der Schokoladenüberzug ist Ihre Präsentationsschicht und Ihr JavaScript ist die Bonbonhülle. Die Farbe dieser Ebene und ihre Darstellung können je nach den Funktionen des Browsers, der sie verwendet, variieren.
Die Süßigkeitenhülle ist sozusagen der Ort, an dem viele Funktionen von progressiven Web-Apps zu finden sind. Sie vereinen das Beste aus dem Web und den besten Apps. Sie sind ab dem ersten Aufrufen eines Browsertabs für Nutzer hilfreich, es ist keine Installation erforderlich.
Durch die wiederholte Verwendung dieser Apps wird die Süßigkeitenhülle noch schöner: Die App lädt bei langsamen Netzwerkverbindungen sehr schnell (dank Servicemitarbeiter), sendet relevante Push-Benachrichtigungen und hat ein erstklassiges Symbol auf dem Startbildschirm des Nutzers, das die Apps im Vollbildmodus laden kann. Außerdem profitieren sie von smarten Installationsbannern für Web-Apps.
Progressive Web-Apps sind
- Progressive – Arbeiten für jeden Nutzer, unabhängig von der Browserauswahl, da Progressive Enhancement als Hauptmandant entwickelt wird.
- Responsiv: Passen Sie jeden Formfaktor an, egal ob Computer, Smartphone, Tablet oder andere Komponenten.
- Verbindungsunabhängig: Durch Service Worker können Sie offline oder in Netzwerken von geringer Qualität arbeiten.
- App-ähnlich: Verwenden Sie das App-Shell-Modell, um Navigationen und Interaktionen im App-Stil bereitzustellen.
- Aktuell: Dank des Service Worker-Aktualisierungsprozesses sind Sie immer auf dem neuesten Stand.
- Sicher: Wird über TLS bereitgestellt, um Snooping zu verhindern und sicherzustellen, dass Inhalte nicht manipuliert wurden.
- Auffindbar – dank W3C-Manifesten und dem Service Worker-Registrierungsbereich, mit dem Suchmaschinen sie finden können, werden sie als "Anwendungen" erkannt.
- Erneut ansprechen: Mit Funktionen wie Push-Benachrichtigungen können Sie Nutzer leichter wieder ansprechen.
- Installierbar: Nutzer können die nützlichsten Apps auf ihrem Startbildschirm ohne App-Shop speichern.
- Verknüpfbar: Einfaches Teilen über eine URL und keine komplexe Installation.
Progressive Web-Apps gibt es auch nicht nur in Chrome für Android. Unten sehen Sie die progressive Web-App Pokedex, die in Firefox für Android (Beta) funktioniert. Die ersten Funktionen zum Hinzufügen zum Startbildschirm und die Service Worker-Caching-Funktionen werden problemlos ausgeführt.
Einer der schönen Aspekte dieses Modells besteht darin, dass Funktionen nach und nach freigeschaltet werden können, wenn die Browseranbieter einen besseren Support für sie bereitstellen. Progressive Web-Apps wie Pokedex funktionieren auch gut in Opera auf Android, mit einigen wichtigen Unterschieden bei der Implementierung:
Weitere Informationen zu progressiven Web-Apps finden Sie im ursprünglichen Blogpost von Alex Russell, in dem sie vorgestellt werden. Paul Kinlan hat außerdem ein sehr nützliches Stack Overflow-Tag für progressive Web-Apps gestartet, die sich ansehen sollten.
Grundprinzip
Web-App-Manifest
Mit dem Manifest kann Ihre Webanwendung auf dem Startbildschirm des Nutzers eine nativ ähnlichere Präsenz haben. Sie ermöglicht das Starten der App im Vollbildmodus (ohne URL-Leiste) und bietet Kontrolle über die Bildschirmausrichtung. In neueren Versionen von Chrome unter Android können ein Ladebildschirm und eine Designfarbe für die Adressleiste definiert werden. Außerdem wird damit eine Reihe von Symbolen nach Größe und Dichte definiert, die für den oben genannten Start- und Startbildschirmsymbol verwendet werden.
Eine Beispielmanifestdatei finden Sie im Web Starter Kit und darüber in den Google Chrome-Beispielen. Bruce Lawson hat einen Manifest Generator verfasst und Mounir Lamouri hat auch einen praktischen Web Manifest Validator geschrieben, den Sie sich ansehen sollten.
Bei meinen privaten Projekten verwende ich realfavicongenerator, um Symbole in der richtigen Größe sowohl für das Web-App-Manifest als auch für die Verwendung unter iOS, Desktop usw. zu generieren. Mit dem favicons Node-Modul kann im Rahmen Ihres Build-Prozesses auch eine ähnliche Ausgabe erzielt werden.
Chromium-basierte Browser (Chrome, Opera usw.) unterstützen schon heute Web-App-Manifeste. Firefox wird aktiv an der Unterstützung arbeiten und Edge listet sie als Wird geprüft auf. WebKit/Safari hat bisher noch keine öffentlichen Signale zu ihrer Absicht veröffentlicht, die Funktion zu implementieren.
Weitere Informationen finden Sie unter Installierbare Web-Apps mit dem Web-App-Manifest in Chrome für Android in Web Fundamentals.
Banner „Zum Startbildschirm hinzufügen“
In Chrome für Android wird das Hinzufügen von Websites zum Startbildschirm schon seit geraumer Zeit unterstützt. Mit neueren Versionen wird das Hinzufügen von Websites auch proaktiv über native Web-App-Installationsbanner unterstützt.
Damit Ihre App-Installationsaufforderungen angezeigt werden, muss Folgendes zutreffen:
- Sie haben ein gültiges Web-App-Manifest.
- über HTTPS bereitgestellt werden (kostenloses Zertifikat finden Sie unter letsencrypt).
- Es muss ein gültiger Service Worker registriert sein.
- Zweimal besucht werden, mit mindestens 5 Minuten zwischen Besuchen
Es sind verschiedene Beispiele für App-Installationsbanner verfügbar. Diese reichen von einfachen Bannern bis hin zu komplexeren Anwendungsfällen wie der Darstellung ähnlicher Apps.
Service Worker für Offline-Caching
Ein Service Worker ist ein Skript, das im Hintergrund unabhängig von Ihrer Webseite ausgeführt wird. Er reagiert auf Ereignisse, einschließlich Netzwerkanfragen von Seiten, die er bereitstellt. Die Lebensdauer eines Service Workers ist bewusst kurz.
Sie wird aktiviert, wenn ein Ereignis eingeht, und wird nur so lange ausgeführt, wie sie zur Verarbeitung benötigt wird. Mit dem Service Worker können Sie die Cache API verwenden, um Ressourcen im Cache zu speichern, und Nutzern so eine Offlinenutzung ermöglichen.
Service Worker eignen sich hervorragend für das Offline-Caching, bieten aber auch erhebliche Leistungssteigerungen in Form eines sofortigen Ladevorgangs für wiederholte Besuche Ihrer Website oder Webanwendung. Sie können Ihre Anwendungs-Shell im Cache speichern, damit sie offline funktioniert, und ihre Inhalte mit JavaScript füllen.
Eine umfassende Auswahl an Service Worker-Beispielen steht in Google Chrome-Beispielen zur Verfügung. Jake Archibalds Offline-Cookbook ist ein absolutes Muss und ich empfehle Ihnen dringend, Paul Kinlans Ihre erste Offline-Web-App auszuprobieren, wenn Sie noch nicht mit dem Service Worker vertraut sind.
Unser Team unterhält auch eine Reihe von Service Worker-Hilfsprogrammen und Build-Tools, mit denen sich der Aufwand für die Einrichtung von Service Workern reduzieren lässt. Sie sind in Service Worker Libraries aufgelistet. Die zwei wichtigsten sind:
- sw-precache: ein Build-Zeit-Tool, das ein Service Worker-Skript generiert, das zum Precaching Ihrer Web-App-Shell nützlich ist
- sw-toolbox: eine Bibliothek, die Laufzeit-Caching für selten verwendete Ressourcen bereitstellt
Jeff Posnick schrieb eine kurze Einführung in Sw-Precache mit dem Titel Offline-First, Fast, mit dem sw-Precache-Modul und einem Codelab für dasselbe Tool, das Sie vielleicht nützlich finden könnten.
Chrome, Opera und Firefox haben alle eine Unterstützung für Service Worker implementiert, wobei Edge positive Signale über das Interesse an dieser Funktion in der Öffentlichkeit hat. Safari hat in dem von einem Entwickler vorgeschlagenen Fünf-Jahres-Plan kurz das Interesse daran erwähnt.
Push-Benachrichtigungen für erneute Interaktion
Sie können auf effektive Weise Web-Apps erstellen, mit denen Nutzer außerhalb eines Tabs interagieren können. Der Browser kann geschlossen werden und der Nutzer muss Ihre Webanwendung nicht einmal aktiv verwenden, um mit der Nutzererfahrung zu interagieren. Für die Funktion sind sowohl ein Service Worker als auch ein Web-App-Manifest erforderlich, das auf einigen der zuvor zusammengefassten Funktionen aufbaut.
Die Push API ist in Chrome implementiert, in Firefox in Entwicklung und in Edge wird geprüft. Es gibt noch keine öffentlichen Signale von Safari, ob diese Funktion implementiert werden soll.
Push-Benachrichtigungen im offenen Web ist eine umfassende Einführung in die Einrichtung von Push-Benachrichtigungen durch Matt Gaunt. In den Web Fundamentals steht außerdem ein Codelab zu Push-Benachrichtigungen zur Verfügung.
Michael van Ouwerkerk vom Chrome-Team hat auch eine 6-minütige Einführung für „Push“, wenn Sie mehr Interesse an Videos haben.
Erweiterte Funktionen übereinanderlegen
Denken Sie daran, dass Ihre Nutzererfahrung je nach Browser, mit dem Sie Ihre Web-App aufrufen, unterschiedlich ausfallen kann. Sie haben die Kontrolle über die Bonbonhülle.
Zusätzliche Funktionen der Webplattform wie die Hintergrundsynchronisierung (zur Datensynchronisierung mit einem Server, selbst wenn deine Web-App geschlossen ist) und Web Bluetooth (für die Kommunikation mit Bluetooth-Geräten über deine Web-App) können auf diese Weise ebenfalls in deine progressive Web-App integriert werden.
Die Hintergrundsynchronisierung mit nur einer Aufnahme wurde in Chrome aktiviert und Jake Archibald hat ein Video seiner Offline-Wikipedia-App sowie einen Artikel erstellt, der diese in Aktion demonstriert. Francois Beaufort bietet auch eine Reihe von Web-Bluetooth-Beispielen an, wenn Sie diese API ausprobieren möchten.
Für Framework geeignet
Es gibt wirklich nichts, das Sie daran hindert, eines der oben genannten Prinzipien auf eine vorhandene Anwendung oder ein vorhandenes Framework anzuwenden. Weitere Prinzipien, die du beim Erstellen deiner progressiven Web-App beachten solltest, sind das nutzerorientierte RAIL-Leistungsmodell und FLIP-basierte Animationen.
Ich hoffe, dass im Jahr 2016 eine zunehmende Anzahl von Textbausteinen und Seed-Projekten zur Unterstützung von progressiven Web-Apps als Kernfunktion hinzukommen wird. Bis dahin ist die Hürde, diese Funktionen zu Ihren eigenen Apps hinzuzufügen, nicht sehr hoch und es ist IMHO wirklich auf jeden Fall die Mühe wert.
Architektur
Im Modell für progressive Web-Apps gibt es unterschiedliche Ebenen, aber ein gängiger Ansatz besteht darin, sie um eine Anwendungs-Shell herum zu erstellen. Diese Anforderung ist nicht zwingend erforderlich, hat aber mehrere Vorteile.
Die Application Shell-Architektur empfiehlt das Caching Ihrer Anwendungs-Shell (die Benutzeroberfläche), damit sie offline funktioniert und ihren Inhalt mithilfe von JavaScript füllt. Bei wiederholten Besuchen können Sie dann sehr schnell aussagekräftige Pixel auf dem Bildschirm sehen, auch wenn Ihre Inhalte irgendwann von dort stammen. Dies führt zu erheblichen Leistungssteigerungen.
Jeremy Keith hat vor Kurzem kommentiert, dass bei diesem Modelltyp das serverseitige Rendering vielleicht nicht als Fallback betrachtet werden sollte, das clientseitige Rendering jedoch als Verbesserung angesehen werden sollte. Das ist faires Feedback.
Im Application Shell-Modell sollte so oft wie möglich serverseitiges Rendering verwendet werden. Das clientseitige Progressive-Rendering sollte auf dieselbe Weise als Verbesserung verwendet werden, wie wir das Erlebnis bei Unterstützung von Service Workern „verbessern“. Es gibt viele Möglichkeiten, dies letztendlich anzugehen.
Ich empfehle Ihnen, unsere Zusammenfassung zur Architektur zu lesen und zu bewerten, wie ähnliche Prinzipien am besten auf Ihre eigene Anwendung und Ihren eigenen Stack angewendet werden könnten.
Textbausteine für die ersten Schritte
Anwendungs-Shell
Das app-shell-Repository enthält eine nahezu vollständige Implementierung der Application Shell-Architektur. Sie hat ein Back-End, das in Express.js geschrieben ist, und ein Front-End, das in ES2015 geschrieben wurde.
Da es sowohl client- als auch serverseitige Teile des Modells abdeckt und eine Menge los ist, wird es einige Zeit dauern, sich mit der Codebasis vertraut zu machen. Aktuell ist es unser umfassendstes Ausgangspunkt für progressive Web-Apps. Google Docs wird unser nächster Schwerpunkt bei diesem Projekt sein.
Polymer-Starterkit
Der offizielle Ausgangspunkt für Polymer-Web-Apps unterstützt die folgenden Funktionen von progressiven Web-Apps:
- Manifest der Webanwendung
- Ladebildschirm von Chrome für Android
- Service Worker-Offline-Caching mit den Platinum SW-Elementen
- Push-Benachrichtigungen (manuelle Einrichtung erforderlich) mit den Platin-Push-Elementen
Die aktuelle Version des PSK unterstützt nicht alle erweiterten Leistungsmuster, die in einigen Progressive-Polymer-Web-Apps zu finden sind, z. B. das Application Shell-Modell oder das asynchrone Laden.
Wir möchten 2016 versuchen, diese Muster in PSK einzupacken. Erste Experimente dazu finden Sie in der Polymer-App Zuperkulblog von Rob Dodson und dem hervorragenden Vortrag zu Polymer Perf Patterns von Eric Bidelman.
Web Starter Kit
Unser bevorzugter Ausgangspunkt für neue einfache Projekte umfasst die folgenden Funktionen für progressive Web-Apps:
- Manifest der Webanwendung
- Ladebildschirm von Chrome für Android
- Pre-Caching von Service Workern dank sw-precache
Wenn Sie lieber mit Vanilla JS/ES2015 arbeiten und Polymer nicht verwenden können, kann sich das Web Starter Kit als Referenzpunkt erweisen, das Sie wiederverwenden oder von dem Sie Code-Snippets stehlen können.
Progressive Web-Apps mit und ohne Frameworks
Eine Reihe von progressiven Open-Source-Web-Apps wurden bereits von Mitgliedern der Community erstellt, sowohl mit als auch ohne JS-Bibliotheken und -Frameworks. Wenn du nach Inspiration suchst, können die folgenden Repositories als Referenz nützlich sein. Sie sind auch einfach verdammt gute Apps.
Vanilla-JavaScript
- Voice Memos von Paul Lewis wurde mit einer ähnlichen Architektur wie
app-shellerstellt (Write-up). - Offline Wikipedia von Jake Archibald (Video)
- Air Horner von Paul Kinlan
- Gitarrenstimmer von Paul Lewis (Verfasser von)
Polymer
- Zuperkulblog von Rob Dodson (Folien)
Reagieren
Virtual-DOM
- Pokedex von Nolan Lawson – hervorragende progressive Web-App, bei der das Progressive-Rendering-Verfahren zum Einsatz kommt. (Rezension)
Angular.js
- Timey.in von Kenneth Auchenberg – verwendet
sw-precacheauch für das Ressourcen-Precaching
Schlussnotizen
Wie bereits erwähnt, befinden sich progressive Web-Apps noch in den Kinderschuhen. Es ist jedoch eine spannende Zeit, mit den zugrunde liegenden Methoden zu experimentieren und zu sehen, wie gut sie auf Ihre eigenen Web-Apps angewendet werden können.
Paul Kinlan plant gerade die Web Fundamentals-Anleitungen zu progressiven Web-Apps. Wenn Sie Feedback zu Bereichen haben, die Sie gerne behandelt haben möchten, können Sie diese gerne im entsprechenden Thread kommentieren.
Weitere Informationen
- Progressive Web-Apps: Tabs entführen, ohne die Seele zu verlieren
- Warum progressive Web-Apps die Zukunft der Webentwicklung sind
- Progressive Web-Apps – bereit für die Primetime
- Mit ServiceWorker eine progressive Anwendung erstellen
- Progressive Web-Apps sind die Zukunft
- Progressive Web-Apps: eine neue Art, Nutzer auf Mobilgeräten zu begeistern
- Jetzt neu: Pokedex.org: eine progressive Web-App für Pokémon-Fans
- Chrome Developer Summit – Zusammenfassung: Progressive Web-Apps