Progressive Web Apps mit JavaScript & Angular 2: das Web wird nativ(er)

Mobilen Web Apps wird ja immer nachgesagt, dass sie zu viel Web und zu wenig Apps sind – sich also zu wenig nativ anfühlen. Mit Progressive Web Apps (PWA) lassen sich solche Anwendungen mit einigen zentralen und relevanten nativen Features ausstatten: Offline-Fähigkeit, Push Notifications, schnelles Startverhalten und installierbar mitsamt Home Screen Icon. Christian Weyer zeigt Ihnen wie man mit Angular 2 solche PWAs erstellt und wie sie sanft und sachte die Schlucht zwischen reinen Web-Sites, Web Apps und hybriden/nativen Apps schließen können. Und all das idealerweise ohne native App-Rahmen, sondern basierend auf Web- und Browser-Standards – wenn sie denn unterstützt werden. Lassen Sie uns gemeinsam das Beste aus der nativen und der Web -Welt zusammenführen!

Transcript

1. PROGRESSIVE WEB APPS mit JavaScript & Angular 2 DAS WEB WIRD NATIV(ER) Christian Weyer
 @christianweyer
2. PROGRESSIVE WEB APPS CHRISTIAN WEYER ▸ Microsoft MVP für ASP.NET (Architektur) ▸ Google GDE für Web-Technologien ▸ Fokus auf Cross-Plattform-Lösungen - End-to-End ▸ christian.weyer@thinktecture.com ▸ @christianweyer ▸ http://thinktecture.com VORSTAND & PRINCIPAL CONSULTANT @ THINKTECTURE AG 2
3. PROGRESSIVE WEB APPS DEMOS FÜR DEN WORKSHOP ▸ https://github.com/thinktecture/angulardays-2016-pwa 3
4. PROGRESSIVE WEB APPS APPS HEUTE ▸ Demo: Eine typische mobile App ▸ Voice Memos 4
5. PROGRESSIVE WEB APPS APP STORE, FTW! ▸ “Wir müssen in den App Store!” http://dazeend.org/2015/01/the-shape-of-the-app-store/ 5
6. PROGRESSIVE WEB APPS PROGRESSIVE WEB APPS - INITIATIVE VON GOOGLE ▸ Erste Wurzeln im Frühjahr 2015 ▸ Andere schließen sich an ▸ Mozilla ▸ Microsoft ▸ Apple… ? ▸ Eines der Ziele: Verbessern der “Conversion Rate” ▸ https://developers.google.com/web/progressive-web-apps/ ▸ https://developer.mozilla.org/en-US/Apps/Progressive 6
7. PROGRESSIVE WEB APPS MOBILE, MOBILE, MOBILE ? ▸ https://medium.com/ben-and-dion/ode-to-the-desktop-232c6c6f14a7#.hg8xq4bu4 7
8. PROGRESSIVE WEB APPS PROGRESSIVE WEB APPS AUF DEM DESKTOP ▸ Hosted Web Apps in Windows 10 ▸ Edge Team investiert sehr viel in die
 Zukunft von Web-basierten Anwendungen ▸ ChakraCore läuft Cross-Plattform ▸ Implementierung diverse Spezifikationen rund um Progressive Web Apps ▸ https://blogs.windows.com/msedgedev/2016/07/08/the-progress-of-web-apps 8
9. PROGRESSIVE WEB APPS PROGRESSIVE WEB APPS - “STANDARD” ▸ Eher ein Über-Pattern als ein Standard oder eine spezifische Implementierung,
 vergleichbar mit ▸ “AJAX” ▸ SPA ▸ Framework-unabhängig ▸ AngularJS, Angular 2, React, VanillaJS, … ▸ Von nun an: PWA 9
10. PROGRESSIVE WEB APPS WAS SIND PWA? ▸ Nahe an nativen Apps ▸ Offline ▸ Home Screen ▸ Ohne URL Zeile ▸ CI Farben ▸ Bürger erster Klasse im OS ▸ Push ▸ Hintergrund Sync ▸ Sicher ▸ Werden initial über Browser gestartet 10
11. PROGRESSIVE WEB APPS PWA - ORIGINAL ATTRIBUTE ▸ Safe ▸ Progressive ▸ Responsive ▸ Connectivity-independent ▸ App-like 11 ▸ Fresh ▸ Discoverable ▸ Re-engageable ▸ Installable ▸ Linkable
12. PROGRESSIVE WEB APPS PWA - TECHNISCHE VORAUSSETZUNGEN ▸ Fetch ▸ Service Worker ▸ Cache API ▸ Push API ▸ Web App Manifest 12
13. PROGRESSIVE WEB APPS WAS SIND PWA NICHT? ▸ Cordova ▸ Ionic ▸ React Native ▸ NativeScript ▸ Electron & nw.js 13
14. PROGRESSIVE WEB APPS WAS BEDEUTET “PROGRESSIVE”? ▸ Apps sollen einfach überall funktionieren ▸ auch wenn nicht überall der volle Funktionsumfang
 verfügbar ist ▸ Feature Detection hilft bei der Umsetzung von “progressive” ▸ Benutzern mitteilen was nicht geht ▸ User Experience in zentral ▸ “Expectation Management” ▸ Einsatz von Fallbacks und Polyfills von vorne herein
 bedenken 14 navigator.getMedia = ( navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia ); if (!navigator.getMedia) { displayErrorMessage( 
 "Sorry - won’t get the cool 
 stuff."); } else { // Use Camera API… }
15. PROGRESSIVE WEB APPS USER EXPERIENCE ▸ UX ist ein zentrales Thema ▸ PWA sollen sich anfühlen und verhalten wie “echte” Apps ▸ UX nicht wie in Web Sites, sondern mehr App-like ▸ Kein Browser-Rahmen ▸ Ist sofort da / schnelles Laden ▸ Kann auch installiert werden / Home Screen ▸ Icon, Splash Screen 15
16. PROGRESSIVE WEB APPS PWA FEATURES - WAS BEDEUTET “APP-LIKE”? ▸ Installierbarkeit ▸ Anwendungsrahmen ▸ Auffindbarkeit ▸ Offline-First-Fähigkeit ▸ Handling von Offline-Content ▸ Handling von Offline-Kommunikation ▸ Push-Kommunikation 16
17. PROGRESSIVE WEB APPS APPLICATION SHELL ▸ Nicht einfach eine weisse Seite anzeigen wenn App/JS nicht vollständig geladen ist ▸ Progressive Rendering ▸ Progressive Enhancement ▸ Anwendungsrahmen, der schnell geladen werden kann ▸ Cachen des HTML, CSS & JS 17
18. PROGRESSIVE WEB APPS APPLICATION SHELL ▸ https://developers.google.com/web/updates/2015/11/app-shell 18
19. PROGRESSIVE WEB APPS SCHNELLES LADEN ▸ Idealerweise wird die App Shell ge-cached ▸ Lokales Ablegen aller notwendigen Assets ▸ Nutzung des Cache APIs in einem Service Workers ▸ Initiales Rendering optional auf dem Server ▸ Bspw. mit Angular Universal Server-side Rendering ▸ Inklusive Initialdaten für den jeweiligen Use Case 19
20. PROGRESSIVE WEB APPS WEB APP MANIFEST ▸ Standardisierte Bereitstellung von Metadaten einer Anwendung ▸ https://developer.mozilla.org/en-US/docs/Web/Manifest ▸ Verankern in der Startseite 20 <link rel="manifest" href="/manifest.json"> { "short_name": "PWA Books", "name": "PWA Books", "icons": [ { "src": "resources/launcher-icon.png", "sizes": "48x48", "type": "image/png" }, … { "src": "resources/launcher-icon-256.png", "sizes": "256x256", "type": "image/png" } ], "start_url": "/", "display": "fullscreen", "orientation": "portrait" }
21. PROGRESSIVE WEB APPS APP INSTALL BANNER - ADD TO HOMESCREEN ▸ Höfliche Frage, ob App zum Home Screen hinzugefügt werden soll ▸ Hürde zur “echten” App herabsetzen ▸ Aktuell nur von Chrome unterstützt ▸ Web App Manifest muss vorhanden sein ▸ Gültiger `short_name`, gültige Start URL ▸ Mindestens ein `144x144` PNG Icon mit MIME Type ‘image/png’ ▸ Registrierter Service Worker ▸ Seite wird per HTTPS serviert ▸ Benutzer hat App mindestens 2x besucht - mit min. 5 Minuten Pause zwischen Besuchen 21
22. PROGRESSIVE WEB APPS APP INSTALL BANNER ▸ Wurde unsere App installiert? ▸ Bspw. für Nutzung in
 Statistiken window.addEventListener('beforeinstallprompt', function(e) { e.userChoice.then(function(choiceResult) { console.log(choiceResult.outcome); if(choiceResult.outcome == 'dismissed') { console.log('User cancelled home screen install'); } else { console.log('User added app to home screen'); } }); }); 22
23. PROGRESSIVE WEB APPS “WIR SIND IMMER ONLINE!” ▸ Oft stimmt diese Aussage ▸ Gutes LAN oder WLAN ▸ Notebooks und Desktops dominieren hier ▸ Offline-Support wird nicht benötigt ▸ Flächendeckendes, signalstarkes LTE für “mobile” ▸ Soll-Zustand 23
24. PROGRESSIVE WEB APPS WIR SIND IMMER ONLINE 24
25. PROGRESSIVE WEB APPS “95% NETZABDECKUNG” - ODER SO… 25
26. PROGRESSIVE WEB APPS AUCH IM BROWSER… 26
27. PROGRESSIVE WEB APPS OFFLINE-UNTERSTÜTZUNG ▸ Endbenutzer ▸ unzählige Apps, aber nur wenige haben Offline-Support ▸ fast täglich stärker werdende Frustration 27
28. PROGRESSIVE WEB APPS OFFLINE-UNTERSTÜTZUNG ▸ Entwickler / Consultant ▸ Kunden wollen Offline-Support, auch wenn es nicht explizit erwähnt wurde ▸ Die Offline-Thematik wird unterschätzt ▸ von Entwicklern ▸ von Kunden ▸ von Product Ownern 28
29. PROGRESSIVE WEB APPS WANN SIND WIR OFFLINE? ▸ Plattformen stellen Event bereit - wird gefeuert wenn ▸ Gerät kein Signal hat ▸ Gerät ein Signal empfängt ▸ Konnektivität wird binär betrachtet window.addEventListener('load', function() { var status = document.getElementById("status"); var log = document.getElementById("log"); function updateOnlineStatus(event) { var condition = navigator.onLine ? "online" : "offline"; status.className = condition; status.innerHTML = condition.toUpperCase(); } window.addEventListener('online', updateOnlineStatus); window.addEventListener('offline', updateOnlineStatus); }); 29
30. PROGRESSIVE WEB APPS EDGE CASE :-) ▸ Was ist wenn lediglich 1-2 Balken EDGE verfügbar sind? 30
31. PROGRESSIVE WEB APPS BESSERE ONLINE-STATUS ERKENNUNG ▸ Initial: Plattform API (optional) ▸ Falls Plattform Status ONLINE angibt ▸ Vordefinierte Anzahl von Requests zum Server senden ▸ Messen und einordnen der Antwortzeiten ▸ Projektabhängige Aussage über Durchschnittsdauer treffen 31
32. PROGRESSIVE WEB APPS BESSERE ONLINE-STATUS ERKENNUNG ▸ Einstufung der Qualität, bspw. ▸ Offline ▸ TooSlow ▸ Normal ▸ Good ONLINE OFFLINE 32
33. PROGRESSIVE WEB APPS OFFLINE-FIRST? - EINE ARCHITEKTUR- UND USE CASE-FRAGE ▸ Was bedeutet Offline-Unterstützung in Apps? ▸ jedes Projekt muss seine Antworten finden ▸ Es ist etwas komplett anderes, ob Apps offline funktionieren müssen, anstatt nur online ▸ Logik in der Regel auf dem Server hinter einem Web API ▸ Offline-First: zuerst über Offline nachdenken und die genauen Use Case ausarbeiten 33
34. PROGRESSIVE WEB APPS OFFLINE-FIRST - MEHR ALS NUR EIN BESTIMMTES API NUTZEN ▸ Lokales Speichern von UI / Code ▸ Lokales Speichern von Daten ▸ Lokales Abfangen von Netzwerk-Anfragen ▸ Updaten von Logik für obige Fälle ▸ Auf dem Server: Konflikterkennung ▸ Unterstützung auf dem Client in der Plattform kann nicht schaden ▸ Service Worker 34
35. PROGRESSIVE WEB APPS SERVICE WORKER ▸ Service Worker (SW) ist relativ junger Standard ▸ https://w3c.github.io/ServiceWorker/ ▸ https://jakearchibald.github.io/ isserviceworkerready/ ▸ Spezielle Implementierung von Web Workern ▸ laufen in eigenem Thread ▸ Gehören initial zu einem Dokument ▸ jedoch nicht an Fenster oder Tab gebunden 35 ▸ Zuständig für einen URL Scope ▸ wird beim Erzeugen des SW festgelegt ▸ kann alle Requests im Scope intercepten und manipulieren ▸ Kann im Hintergrund auf Push- Nachrichten lauschen und Background Sync durchführen ▸ Muss über SSL geladen werden ▸ Ausnahme ist localhost zum Testen
36. PROGRESSIVE WEB APPS SERVICE WORKER - TYPISCHER EINSATZ 36
37. PROGRESSIVE WEB APPS SERVICE WORKER - API ▸ Feature Detection ob Browser
 SW unterstützt ▸ Schlankes API, voll asynchron via
 Promises ▸ Lifecycle ▸ Netzwerkkommunikation ▸ Caching ▸ Push Messaging ▸ Background Sync if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/my-app/sw.js') .then(function(reg) { console.log(‘Yes :-)’, reg); }).catch(function(err) { console.log(‘No :-(’, err); }); } 37
38. PROGRESSIVE WEB APPS SERVICE WORKER - LIFECYCLE self.addEventListener('install', function(event) { event.waitUntil( fetchStuffAndInitDatabases() ); }); self.addEventListener('activate', function(event) { // You're good to go }); 38
39. PROGRESSIVE WEB APPS SERVICE WORKER - NETZWERK ▸ Requests für Dokument, CSS, JS, Bilder,
 XHRs etc. können abgefangen werden ▸ Ausser iframes & <object>s,
 Requests aus SW heraus ▸ Erstellen eigener Responses je nach
 Use Case self.addEventListener( 'fetch', function(event) { console.log(event.request); }); self.addEventListener( 'fetch', function(event) { event.respondWith(new Response("Hello world!")); }); 39
40. PROGRESSIVE WEB APPS SERVICE WORKER - OFFLINE ▸ Offline-Erkennung hat nichts direkt
 mit SW zu tun ▸ geeignete APIs & Algorithmen 
 verwenden ▸ SW nutzt Cache API für Caching
 von Assets und API Requests self.addEventListener('fetch', function(event) { event.respondWith( caches.match(event.request) ); }); 40
41. PROGRESSIVE WEB APPS SERVICE WORKER - CACHING ▸ Dokumente und Daten
 lokal vorhalten ▸ eigener versionierter
 Cache self.addEventListener('install', function(event) { event.waitUntil( caches.open('static-v1').then(function(cache) { return cache.addAll([ '/my-blog/', '/my-blog/fallback.html', new Request('//mycdn.com/style.css', {mode: 'no-cors'}), new Request('//mycdn.com/script.js', {mode: 'no-cors'}) ]); }) ); }); 41
42. PROGRESSIVE WEB APPS SERVICE WORKER - CACHING-STRATEGIEN ▸ “Cache Invalidation ist eines von 2 großen ungelösten Problemen in der Informatik - neben Off-by-One und Namensgebung.” ▸ Diverse Caching-Strategien, bspw. ▸ Network-Only ▸ Cache-Only ▸ Fastest ▸ Network-First ▸ Cache-First 42
43. PROGRESSIVE WEB APPS SERVICE WORKER - UPDATES ▸ Neue Version eines SW wird bereitgestellt und geladen ▸ Neue Version wird installiert aber noch nicht aktiviert ▸ erst wenn keine Seiten mehr geladen sind, die den alten SW nutzen ▸ so lange ist der alte SW zuständig für Fetches etc. 43
44. PROGRESSIVE WEB APPS SERVICE WORKER - LIFECYCLE DETAILS 44
45. PROGRESSIVE WEB APPS SERVICE WORKER - GLOBALER ZUSTAND ▸ SW sind völlig asynchron ▸ sollten keinen blockierenden APIs in 
 einem SW aufgerufen werden ▸ SW kann vom Browser aufgeräumt werden, je nach Speicher- und CPU- Situation ▸ keinen globalen Zustand merken im SW ▸ Zustand sollte in einem Persistenzmedium gehalten werden var hitCounter = 0; this.addEventListener('fetch', function(event) { hitCounter++; event.respondWith( new Response('Hit number ' + hitCounter) ); }); 45
46. PROGRESSIVE WEB APPS SERVICE WORKER - KOMMUNIKATION IN DER APP ▸ Kommunikation zwischen Client(s) und SW ▸ Client/Seite möchte SW Nachricht senden (1:1) ▸ SW möchte Client Nachricht/Antwort senden (1:1) ▸ SW möchte mehreren Clients Nachricht senden (1:n) ▸ SW möchte Client Nachricht senden, vom der Fetch Request ausging (1:1) ▸ Client zu SW: postMessage(data) auf dem SW ▸ navigator.serviceWorker.controller für die aktive Instanz ▸ message Event behandeln 46 self.addEventListener('message', function handler (event) { console.log(event.data); });
47. PROGRESSIVE WEB APPS SERVICE WORKER - KOMMUNIKATION IN DER APP ▸ Vom SW zum Client ▸ API noch sehr im Fluss… 47 var messageChannel = new MessageChannel(); messageChannel.port1.addEventListener('message', replyHandler); worker.postMessage(data, [messageChannel.port2]); function replyHandler (event) { console.log(event.data); // this comes from the ServiceWorker } self.addEventListener('message', function handler (event) { event.ports[0].postMessage(data); // this is handled by the replyHandler shown earlier });
48. PROGRESSIVE WEB APPS SERVICE WORKER - BACKGROUND SYNC ▸ Senden von Daten, die über die Lebenszeit einer Seite hinweg wichtig sind ▸ Chat-Nachrichten ▸ Emails ▸ Dokumenten-Updates ▸ Einstellungen ▸ Daten könnten in Storage persistiert und vom SW versendet werden ▸ Background Sync ist neues API, um Aktionen zeitlich zu verlagern bis stabile Verbindung vorhanden 48
49. PROGRESSIVE WEB APPS SERVICE WORKER - BACKGROUND SYNC 49 // Register your service worker: navigator.serviceWorker.register('/sw.js'); // Then later, request a one-off sync: navigator.serviceWorker.ready.then(function(swRegistration) { return swRegistration.sync.register('myFirstSync'); }); self.addEventListener('sync', function(event) { if (event.tag == 'myFirstSync') { event.waitUntil(doSomeStuff()); } });
50. PROGRESSIVE WEB APPS SERVICE WORKER - TOOLS ▸ sw-toolbox ▸ Library für einfacheres Handling & Caching von Requests zur Laufzeit ▸ https://github.com/GoogleChrome/sw-toolbox ▸ sw-precache ▸ Automatisches Generieren von SW Code für einfache Offline-Funktionalität ▸ https://github.com/GoogleChrome/sw-precache 50
51. PROGRESSIVE WEB APPS OFFLINE SPEICHER ▸ Zwei grundlegende Arten on Offline-Daten ▸ Per URL adressierbar: Cache API in SW ▸ Alles andere: persistenter Storage ▸ Persistenter Storage ▸ Session / Local Storage ▸ WebSQL ▸ IndexedDb 51
52. PROGRESSIVE WEB APPS SERVICE WORKER - VERBREITUNG ▸ Details: https://jakearchibald.github.io/isserviceworkerready/ 52
53. PROGRESSIVE WEB APPS PUSH NOTIFICATIONS ▸ Push Notifications sind für native Apps unverzichtbar ▸ Push Notifications auch für PWAs ▸ benötigt ebenso einen Cloud-Dienst zum Handeln und Versenden von Nachrichten ▸ eigener Code bspw. in Web API, um tatsächlichen Push mit geheimem Key auszuführen ▸ Chrome nutzt Firebase Cloud Messaging (FCM, aka Google Cloud Messaging) ▸ andere Browser dürfen gerne andere Services nutzen 53
54. PROGRESSIVE WEB APPS PUSH NOTIFICATIONS - INTERAKTIONEN 54
55. PUSH NOTIFICATIONS ▸ Push-Projekt in Firebase liefert notwendige Registrierungsdaten ▸ Sender ID für Client Code ▸ Server Key für bspw. serverseitiges Web API 55 PROGRESSIVE WEB APPS
56. PROGRESSIVE WEB APPS PUSH NOTIFICATIONS ▸ Registrierung beim lokalen PushManager API in der App 56 if ('serviceWorker' in navigator) { navigator.serviceWorker.register('sw.js').then(function() { return navigator.serviceWorker.ready; }).then(function(reg) { reg.pushManager.subscribe({userVisibleOnly: true}).then(function(sub) { console.log('endpoint:', sub.endpoint); }); }).catch(function(error) { console.log('Service Worker error :^(', error); }); }
57. PROGRESSIVE WEB APPS PUSH NOTIFICATIONS ▸ SW stellt API für Push Handling zur
 Verfügung ▸ Anzeigen von eigenen Nachrichten im UI 57 self.addEventListener('push', function(event) { console.log('Push message received', event); // TODO }); self.addEventListener('push', function(event) { var title = 'Push message'; event.waitUntil( self.registration.showNotification(title, { body: 'The Message', icon: 'images/icon.png', tag: 'my-tag' })); });
58. PROGRESSIVE WEB APPS PUSH NOTIFICATION - PAYLOAD ▸ In der ursprünglichen Version von Web Push gab es gar keine Payload ▸ Mittlerweile muss Payload bei Web Push verschlüsselt sein ▸ https://developers.google.com/web/updates/2016/03/web-push- encryption?hl=en 58
59. PROGRESSIVE WEB APPS ANGULAR 2 ▸ PWAs können einfach mit Angular 2 erstellt werden ▸ mit JavaScript oder TypeScript ▸ Services Pattern von Angular 2 fördert die Trennung von Logik/Hintergrund ▸ Ansonsten nichts Besonderes bzgl. Angular 2 ▸ Und das ist gut so! ▸ Application Framework-unabhängige Implementierung 59
60. PROGRESSIVE WEB APPS ANGULAR 2 MOBILE TOOLKIT ▸ Angular Team baut an einem Mobile Toolkit ▸ https://mobile.angular.io/ ▸ Ursprünglich komplett auf Basis der Angular CLI aufgebaut ▸ Strategie ändert sich, da Angular CLI in 
 der Ur-Version schlecht erweiterbar ist ▸ Momentan kein “brauchbarer” Zustand ▸ Einzelteile (npm Module) können verwendet 
 werden ▸ Alles ist im Fluss… 60
61. PROGRESSIVE WEB APPS WAS MACHEN MIT IOS & CO. ? ▸ Application Cache ▸ Touch Icons ▸ Sonst: :-( 61
62. PROGRESSIVE WEB APPS SPECIAL GUEST: HTTP/2 ▸ HTTP/2 soll das Web erobern ▸ Schnelleres Bereitstellen von Web Sites und Web Apps ▸ Push-Kommunikation ohne weitere Protokolle ▸ Tipp: simplehttp2server zum lokalen Testen ▸ https://github.com/GoogleChrome/simplehttp2server 62
63. PROGRESSIVE WEB APPS MONETARISIERUNG VON PROGRESSIVE WEB APPS ? 63
64. PROGRESSIVE WEB APPS RESUMÉ ▸ Progressive Web Apps zeigen einen möglichen Pfad für die Zukunft des “App Modells” auf ▸ Google schreitet voran, andere ziehen nach ▸ Standards werden proaktiv voran getrieben ▸ Was macht Apple? ▸ Momentan noch großer Fokus auf Mobile, obwohl der Desktop ebenso wichtig ist ▸ Service Worker & Co. sind spannende Technologien… ▸ … aber es ist noch sehr früh für “dat Janze”… ▸ Alternative: Cordova & Electron 64
65. PROGRESSIVE WEB APPS RESSOURCEN ▸ Angular Days PWA Samples ▸ https://github.com/thinktecture/angulardays-2016-pwa ▸ christian.weyer@thinktecture.com ▸ @christianweyer 65
66. PROGRESSIVE WEB APPS RESSOURCEN ▸ Allgemein ▸ https://infrequently.org/2015/06/progressive-apps-escaping-tabs-without-losing-our-soul/ ▸ https://www.smashingmagazine.com/2016/08/a-beginners-guide-to-progressive-web-apps/ ▸ https://www.smashingmagazine.com/2016/09/the-building-blocks-of-progressive-web-apps/ ▸ http://tutorialzine.com/2016/09/everything-you-should-know-about-progressive-web-apps/ ▸ https://builtvisible.com/progressive-web-app-seo/ ▸ http://t3n.de/news/progressive-web-apps-739224/ ▸ https://www.inovex.de/fileadmin/files/Vortraege/2016/progressive-web-apps-jonas-moosmann-enterjs-2016.pdf ▸ http://nolanlawson.github.io/pwas-2016-05/#/ ▸ UX / UI ▸ https://medium.com/@owencm/designing-great-uis-for-progressive-web-apps-dd38c1d20f7#.b2afqe5zs ▸ App Shell ▸ https://developers.google.com/web/updates/2015/11/app-shell ▸ App Install Banner ▸ https://developers.google.com/web/updates/2015/03/increasing-engagement-with-app-install-banners-in-chrome-for-android 66
67. PROGRESSIVE WEB APPS RESSOURCEN ▸ Service Worker ▸ https://jakearchibald.com/2014/service-worker-first-draft/ ▸ https://github.com/w3c/ServiceWorker/blob/master/explainer.md ▸ Adding a SW with sw-precache ▸ https://codelabs.developers.google.com/codelabs/sw-precache/index.html?index=..%2F..%2Findex#0 ▸ Service Worker Demos ▸ https://github.com/jakearchibald/isserviceworkerready/tree/master/src/demos ▸ https://github.com/GoogleChrome/samples/tree/gh-pages/service-worker ▸ Service Worker Toolbox ▸ https://duske.me/improve-user-experience-with-service-worker-toolbox/ ▸ ServiceWorker, MessageChannel and postMessage ▸ https://ponyfoo.com/articles/serviceworker-messagechannel-postmessage ▸ Online/Offline Events ▸ https://developer.mozilla.org/en/docs/Online_and_offline_events ▸ Offline Cookbook ▸ https://jakearchibald.com/2014/offline-cookbook/ 67
68. PROGRESSIVE WEB APPS RESSOURCEN ▸ Background Sync ▸ https://ponyfoo.com/articles/backgroundsync ▸ Caching ▸ http://michalzalecki.com/progressive-web-apps-with-webpack/ ▸ Push ▸ https://developers.google.com/web/fundamentals/getting-started/codelabs/push-notifications/ ▸ https://developers.google.com/web/updates/2016/03/web-push-encryption?hl=en ▸ Ionic 2 ▸ https://technology.amis.nl/2016/08/16/creating-near-native-mobile-web-app-aka-progressive-web-app-for-ios-with-ionic-2/ ▸ Google Web Starter Kit ▸ https://github.com/google/web-starter-kit ▸ Codelab ▸ https://codelabs.developers.google.com/codelabs/your-first-pwapp/#0 ▸ https://github.com/googlecodelabs/your-first-pwapp ▸ Tools ▸ https://developers.google.com/web/tools/service-worker-libraries/ 68
69. PROGRESSIVE WEB APPS RESSOURCEN ▸ Exemplarische Demo Apps ▸ Voice Memos: https://voice-memos.appspot.com/ ▸ Emojoy: https://jakearchibald-gcm.appspot.com/ ▸ Offline Wikipedia: https://github.com/jakearchibald/offline-wikipedia ▸ Und einige mehr - siehe auch https://pwa.rocks/ 69