In letzter Zeit wurde viel über progressive Web-Apps diskutiert. Sie sind zwar noch ein relativ neues Modell, aber ihre Prinzipien können gleichermaßen Apps verbessern, die mit Vanilla JS, React, Polymer, Angular oder einem anderen Framework erstellt wurden. In diesem Beitrag fasse ich einige Optionen und Anwendungen zusammen, die Ihnen den Einstieg in Ihre eigene progressive Web-App erleichtern.
Was ist eine progressive Web-App?
Denken Sie daran, dass progressive Web-Apps überall funktionieren, aber in modernen Browsern überholt sind. Progressive Enhancement ist ein Grundgerüst des Modells.
Aaron Gustafson verglich Progressive Enhancement mit einem ganz besonderen M&M-Modell. Die Erdnuss ist Ihr Inhalt, die Schokoladenmantel ist Ihre Präsentationsschicht und Ihr JavaScript ist die Bonbonschale. Die Farbe dieser Schicht kann variieren und die Darstellung kann je nach den Funktionen des Browsers, der sie verwendet, variieren.
Sie können sich die Schokoschale als den Ort vorstellen, an dem viele Funktionen progressiver Web-Apps verfügbar sind. Sie kombinieren das Beste aus dem Web und den besten Apps. Sie sind für Nutzer bereits beim ersten Besuch in einem Browser-Tab nützlich. Es ist keine Installation erforderlich.
Da Nutzer durch wiederholte Nutzung eine Beziehung zu diesen Apps aufbauen, wird die Candy Shell noch süßer: Sie lädt dank Service Worker bei langsamen Netzwerkverbindungen sehr schnell, sendet relevante Push-Benachrichtigungen und verfügt über ein erstklassiges Symbol auf dem Startbildschirm, über das sie als Vollbild angezeigt werden können. Außerdem können sie intelligente Web-App-Installationsbanner nutzen.
Progressive Web-Apps sind
- Progressiv – Arbeitet für jeden Nutzer unabhängig von der Browserauswahl, da bei ihnen Progressive Enhancement als Hauptmandant verwendet wird.
- Responsiv: Passt alle Formfaktoren an, ob Computer, Smartphone, Tablet oder irgendetwas anderes.
- Konnektivitätsunabhängig – Mit Service Workern können Sie auch offline oder in Netzwerken mit geringer Qualität arbeiten.
- App-ähnlich: Das App-Shell-Modell wird verwendet, um Navigationsfunktionen und Interaktionen im App-Stil bereitzustellen.
- Aktuell – Dank des Service Worker-Aktualisierungsprozesses immer auf dem neuesten Stand
- Sicher – Werden über TLS bereitgestellt, um Spionage zu verhindern und zu gewährleisten, dass Inhalte nicht manipuliert wurden.
- Sichtbar – sind dank W3C-Manifesten und Service Worker-Registrierungsbereich als „Anwendungen“ identifizierbar, sodass sie von Suchmaschinen gefunden werden können.
- Erneute Interaktionen: Einfachere erneute Interaktionen durch Funktionen wie Push-Benachrichtigungen
- Installierbar: Gestatten Sie Nutzern, die nützlichsten Apps auf dem Startbildschirm zu behalten, ohne dass sie sich um einen App-Shop kümmern müssen.
- Verknüpfbar – Einfache Freigabe über URL, keine komplexe Installation
Progressive Web-Apps gibt es ebenfalls nicht nur in Chrome für Android. Unten sehen Sie, wie die progressive Web-App Pokedex in Firefox für Android (Beta) funktioniert. Die ersten Funktionen des Cachings "Zum Startbildschirm hinzufügen" und "Service Worker" werden problemlos ausgeführt.
Einer der schönen Aspekte des "progressiven" Charakters ist, dass Funktionen nach und nach freigeschaltet werden können, wenn Browseranbieter eine bessere Unterstützung für sie bereitstellen. Progressive Web-Apps wie Pokedex funktionieren natürlich auch in Opera auf Android-Geräten hervorragend, wobei es einige wichtige Implementierungsunterschiede gibt:
Wenn Sie mehr über progressive Web-Apps erfahren möchten, lesen Sie den Blogpost von Alex Russell. Paul Kinlan hat außerdem ein sehr nützliches Stack Overflow-Tag für progressive Web-Apps gestartet, das sich näher ansehen sollte.
Grundprinzip
Web-App-Manifest
Das Manifest ermöglicht es Ihrer Webanwendung, auf dem Startbildschirm des Nutzers eine nativere Präsenz zu haben. Sie ermöglicht das Starten der App im Vollbildmodus (ohne URL-Leiste) und bietet Kontrolle über die Bildschirmausrichtung. Bei neueren Versionen von Chrome für Android können ein Ladebildschirm und eine Designfarbe für die Adressleiste definiert werden. Es wird auch verwendet, um eine Reihe von Symbolen nach Größe und Dichte zu definieren, die für den oben genannten Start- und Startbildschirmsymbol verwendet werden.
Eine Beispielmanifestdatei finden Sie im Web Starter Kit und in den Google Chrome-Beispielen. Bruce Lawson hat einen Manifest Generator geschrieben und Mounir Lamouri hat außerdem einen praktischen Web Manifest-Validator geschrieben, den Sie sich ansehen sollten.
Bei meinen persönlichen 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. Das Modul favicons Node kann im Rahmen Ihres Build-Prozesses eine ähnliche Ausgabe erzielen.
Chromium-basierte Browser (Chrome, Opera usw.) unterstützen Web-App-Manifeste derzeit, wobei Firefox aktiv an der Unterstützung arbeitet und diese von Edge als in Betracht gezogen auflistet. WebKit/Safari hat noch keine öffentlichen Signale über die Absichten der Implementierung der Funktion veröffentlicht.
Weitere Informationen finden Sie unter Installierbare Web-Apps mit dem Web-App-Manifest in Chrome für Android in den Web Fundamentals.
Banner „Zum Startbildschirm hinzufügen“
Chrome für Android unterstützt bereits seit geraumer Zeit das Hinzufügen Ihrer Website zum Startbildschirm. In neueren Versionen wird aber auch proaktiv vorgeschlagen, Websites über native Web-App-Installationsbanner hinzuzufügen.
Damit Ihre App in den Aufforderungen zur App-Installation angezeigt wird, müssen folgende Voraussetzungen erfüllt sein:
- Sie müssen ein gültiges Web-App-Manifest haben.
- über HTTPS bereitgestellt werden (siehe letsencrypt für ein kostenloses Zertifikat)
- Es muss ein gültiger Service Worker registriert sein
- zweimal besucht werden, mit mindestens 5 Minuten zwischen den Besuchen
Es gibt eine Reihe von Beispielen für App-Installationsbanner, die von einfachen Bannern bis hin zu komplexeren Anwendungsfällen wie der Anzeige ähnlicher Apps reichen.
Service Worker für Offline-Caching
Ein Service Worker ist ein Skript, das im Hintergrund getrennt von Ihrer Webseite ausgeführt wird. Er reagiert auf Ereignisse, z. B. auf Netzwerkanfragen von Seiten, die er bereitstellt. Die Lebensdauer eines Service Workers ist bewusst kurz.
Er wird aktiviert, wenn ein Ereignis empfangen wird, und wird nur so lange ausgeführt, wie er benötigt, um ihn zu verarbeiten. Mit einem Service Worker können Sie die Cache API verwenden, um Ressourcen im Cache zu speichern. Außerdem können Sie damit Nutzern eine Offlinenutzung bieten.
Service Worker sind für das Offline-Caching leistungsstark, bieten jedoch auch erhebliche Leistungssteigerungen, da sie bei wiederholten Besuchen Ihrer Website oder Webanwendung sofort geladen werden. Sie können Ihre Anwendungs-Shell im Cache speichern, sodass sie offline funktioniert und deren Inhalt mit JavaScript füllt.
Für Google Chrome ist eine umfassende Auswahl an Service Worker-Beispielen verfügbar. Jake Archibalds Offline-Cookbook ist ein Muss und ich empfehle Paul Kinlan, Ihre erste Offline-Web-App auszuprobieren, wenn Sie noch nicht mit Servicemitarbeitern vertraut sind.
Unser Team unterhält auch eine Reihe von Dienstprogrammen für Service Worker-Hilfsprogrammen und Build-Tools, die unserer Meinung nach nützlich sind, um den Aufwand bei der Einrichtung des Service Workers zu reduzieren. Sie sind auf der Seite Service Worker-Bibliotheken aufgeführt. Die zwei wichtigsten sind:
- sw-precache: Tool zur Erstellungszeit, das ein Service Worker-Skript generiert, mit dem die Shell Ihrer Webanwendung vorab im Cache gespeichert werden kann
- sw-toolbox: Eine Bibliothek, die Laufzeit-Caching für selten verwendete Ressourcen bietet
Jeff Posnick hat eine kurze Einführung zu sw-precache geschrieben: Offline-first, fast, with the sw-precache Modul und ein Codelab zu demselben Tool, das Sie möglicherweise nützlich finden.
Chrome, Opera und Firefox haben alle Support für Service Worker implementiert, wobei Edge positive öffentliche Signale über das Interesse an der Funktion hat. Safari äußerte im Rahmen des vorgeschlagenen Fünf-Jahres-Plans von einem Entwickler kurzzeitig das Interesse daran.
Push-Benachrichtigungen für erneute Interaktion
Sie können so effektiv Web-Apps erstellen, mit denen Nutzer außerhalb eines Tabs interagieren können. Der Browser kann geschlossen werden und die Nutzer müssen Ihre Web-App nicht einmal aktiv verwenden, um mit der Website oder App zu interagieren. Die Funktion erfordert sowohl einen Service Worker als auch ein Web-App-Manifest, das auf einigen der zuvor zusammengefassten Funktionen aufbaut.
Die Push API ist in Chrome implementiert, wird in Firefox derzeit entwickelt und in Edge wird in Betracht gezogen. Es gibt noch keine öffentlichen Signale von Safari über die Absicht, diese Funktion zu implementieren.
Push-Benachrichtigungen im offenen Web ist eine umfassende Einführung in die Push-Einrichtung von Matt Gaunt. Außerdem ist ein Codelab für Push-Benachrichtigungen in den Web Fundamentals verfügbar.
Michael van Ouwerkerk vom Chrome-Team hat auch eine 6-minütige Einleitung zu „Push“, wenn du eher Videos neigst.
Überlagerung in erweiterten Funktionen
Denken Sie daran, dass die Nutzererfahrung je nach Browser, mit dem Ihre Webanwendung angezeigt wird, unterschiedlich aussehen kann. Sie haben die Kontrolle über die Hard Candy Shell.
Auf diese Weise können zusätzliche Funktionen der Webplattform wie die Hintergrundsynchronisierung (zur Synchronisierung von Daten mit einem Server, selbst wenn die Web-App geschlossen ist) und Web Bluetooth (zur Kommunikation mit Bluetooth-Geräten aus der Web-App) integriert werden.
Die One-Shot-Hintergrundsynchronisierung wurde in Chrome aktiviert. Jake Archibald hat ein Video seiner Offline-Wikipedia-App und einen Artikel hochgeladen, in dem er die Funktionsweise der App demonstriert. Francois Beaufort bietet außerdem eine Reihe von Web-Bluetooth-Beispielen an, wenn Sie diese API ausprobieren möchten.
Framework-freundlich
Die oben genannten Prinzipien können Sie auf eine vorhandene Anwendung oder ein vorhandenes Framework anwenden, mit dem Sie arbeiten. Weitere Prinzipien, die Sie bei der Entwicklung Ihrer progressiven Web-App beachten sollten, sind das nutzerorientierte RAIL-Leistungsmodell und FLIP-basierte Animationen.
Ich bin zuversichtlich, dass im Jahr 2016 eine wachsende Anzahl von Standardformeln und Seed-Projekten organisch zur Unterstützung von progressiven Web-Apps als Kernfunktion werden wird. Bis dahin ist die Hürde, diese Funktionen zu Ihren eigenen Apps hinzuzufügen, nicht sehr hoch und es ist IMHO die Mühe wert.
Architektur
Bei progressiven Web-App-Modellen gibt es unterschiedliche „All-in“-Ansätze, aber ein gängiger Ansatz besteht darin, sie um eine Application Shell herum zu entwickeln. Dies ist keine zwingende Voraussetzung, hat aber einige Vorteile.
Die Anwendungs-Shell-Architektur unterstützt das Speichern Ihrer Anwendungs-Shell (Benutzeroberfläche) im Cache, damit sie offline funktioniert und ihren Inhalt mit JavaScript füllt. Bei wiederholten Besuchen erhalten Sie so ohne Netzwerkverbindung sehr schnell aussagekräftige Pixel auf dem Bildschirm, auch wenn Ihre Inhalte schließlich von dort stammen. Dies bringt erhebliche Leistungssteigerungen mit sich.
Jeremy Keith hat kürzlich kommentiert, dass bei diesem Modell das serverseitige Rendering möglicherweise nicht als Fallback angesehen werden sollte, sondern das clientseitige Rendering als Verbesserung. Das ist faires Feedback.
Im Application Shell-Modell sollte so oft wie möglich serverseitiges Rendering verwendet werden. Das clientseitige progressive Rendering sollte als Erweiterung genutzt werden, so wie wir die Erfahrung „verbessern“, wenn Service Worker unterstützt wird. Es gibt viele Möglichkeiten, dies zu erreichen.
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.
Erste Schritte mit Textbausteinen
Anwendungs-Shell
Das app-shell-Repository enthält eine fast vollständige Implementierung der Application Shell-Architektur. Sie hat ein Back-End, das in Express.js geschrieben ist, und ein Front-End in ES2015.
Da es sowohl clientseitige als auch serverseitige Teile des Modells abdeckt und dort ziemlich viel passiert, dauert es einige Zeit, sich mit der Codebasis vertraut zu machen. Sie ist sonst unsere umfangreichste progressive Web-App als Ausgangspunkt. Im nächsten Schritt werden wir uns bei diesem Projekt auf Docs konzentrieren.
Starterkit aus Polymer
Der offizielle Ausgangspunkt für Polymer-Web-Apps unterstützt die folgenden Funktionen von progressiven Web-Apps:
- Manifest für 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 von PSK unterstützt einige der erweiterten Leistungsmuster (z. B. Application Shell-Modell, asynchrones Laden), die in einigen Progressive Polymer-Web-Apps zu finden sind.
Wir versuchen, diese Muster 2016 in PSK zu integrieren, aber erste Experimente zu diesem Thema finden Sie in der Polymer App Zuperkulblog von Rob Dodson und im hervorragenden Vortrag zu Polymer Perf Patterns von Eric Bidelman.
Web-Starterkit
Unser Ziel für neue einfache Projekte sind die folgenden progressiven Web-App-Funktionen:
- Manifest für Webanwendung
- Ladebildschirm von Chrome für Android
- Pre-Caching für Service Worker dank sw-precache
Wenn Sie lieber mit Vanilla JS/ES2015 arbeiten und Polymer nicht verwenden können, kann sich das Web Starter Kit als Referenz erweisen, von dem Sie Code-Snippets wiederverwenden oder stehlen können.
Progressive Web-Apps mit und ohne Frameworks
Eine Reihe von progressiven Open-Source-Web-Apps wurden bereits von Mitgliedern der Community mit und ohne JS-Bibliotheken und -Frameworks entwickelt. Wenn Sie nach Inspiration suchen, können die folgenden Repositories als Anhaltspunkte hilfreich sein. Die sind auch verdammt gute Apps.
Vanille-JavaScript
- Voice Memos von Paul Lewis basiert auf einer ähnlichen Architektur wie
app-shell(write-up) - Offline-Wikipedia von Jake Archibald (Video)
- Air Horner von Paul Kinlan
- Guitar Tuner von Paul Lewis (write-up)
Polymer
- Zuperkulblog von Rob Dodson (Folien)
React
Virtual-DOM
- Pokedex von Nolan Lawson ist eine hervorragende progressive Web-App, bei der für das progressive Rendering der Ansatz „Alles in einem Web-Worker“ angewendet wird. (Nachtrag)
Angular.js
- Timey.in von Kenneth Auchenberg – verwendet auch
sw-precachefür das Ressourcen-Precaching
Abschlusshinweise
Wie bereits erwähnt, sind progressive Web-Apps noch in den Kinderschuhen, aber es ist eine aufregende Zeit, um mit den zugrunde liegenden Methoden zu experimentieren und herauszufinden, wie gut sie sich auf Ihre eigenen Web-Apps anwenden lassen.
Paul Kinlan plant derzeit die Web Fundamentals-Anleitung zu progressiven Web-Apps. Wenn Sie Feedback zu bestimmten Themen haben, können Sie den Thread gern kommentieren.
Weitere Informationen
- Progressive Web-Apps: Tabs entkommen, ohne die Seele zu verlieren
- Warum sind progressive Web-Apps die Zukunft der Webentwicklung?
- Progressive Web-Apps: bereit für die Hauptsendezeit
- Mit ServiceWorker progressive Apps entwickeln
- Progressive Web-Apps sind die Zukunft
- Progressive Web-Apps: eine neue Nutzererfahrung auf Mobilgeräten
- Jetzt neu: Pokedex.org – eine progressive Web-App für Pokémon-Fans
- Zusammenfassung zum Chrome Developer Summit: Progressive Web-Apps