Progressive Web Apps Update 2019: Web Goes Native

For sure, PWA is one of the hottest topics in Web space today. Progressive Web Apps are cross-platform, support browsers, desktop and mobile platforms—a perfect match for your business application. A PWA should feel like a real app we are used to since years: users want an icon on the home screen as well was native-like performance and feature richness. Christian Liebel, author of “Progressive Web Apps: Das Praxisbuch” and consultant at Thinktecture, shows you how to develop your first PWA, implement offline availability using service workers and send push notifications even when your app is closed. In addition, Christian brings you up to date on modern web APIs and service worker enhancements that will further enhance PWA functionality. Come and bring your PWA questions with you!

Transcript

1. PWA Update 2019 Web Goes Native Christian Liebel @christianliebel Consultant
2. Hello, it’s me. PWA Update 2019 Web Goes Native Christian Liebel Follow me: @christianliebel Blog: christianliebel.com Email: christian.liebel @thinktecture.com Cross-Platform & Cloud & Enterprise Blockchain
3. PWA Update 2019 Web Goes Native - Das PWA-Anwendungsmodell - Web App Manifest - Service Worker und Cache API - Workbox: Toolkit für PWAs - Angular-Unterstützung für PWAs - Natives Look & Feel - Migrieren & veröffentlichen - Payment Request API & Apple Pay www.rheinwerk-verlag.de/4707
4. Intro Web App Manifest Offline First Service Worker Cache API Workbox Angular Demo App IndexedDB Dexie.js Background Sync API Push API Update 2019 PWA Update 2019 Web Goes Native Talking Points
5. Intro Web App Manifest Offline First Service Worker Cache API Workbox Angular Demo App IndexedDB Dexie.js Background Sync API Push API Update 2019 PWA Update 2019 Web Goes Native Talking Points
6. Windows Mobile 5 Apps in 2005… Web Goes Native PWA Update 2019
7. Apps in 2007… https://www.youtube.com/watch?v=vN4U5FqrOdQ Web Goes Native PWA Update 2019
8. Web Goes Native • No app stores anymore! • Web App = App App • Feature parity: Push notifications, offline availability and more for web & native applications • Backwards compatibility: PWAs can also be run on non-PWA browsers, but with reduced feature set Apps Tomorrow… Web Goes Native PWA Update 2019
9. The Power of the Modern Web Web Share API Gamepad API Payment Request API Generic Sensor API Web Bluetooth API Shape Detection API Web Notifications WebVR WebRTC WebGL Speech Synthesis Web Cryptography API IndexedDB Geolocation Canvas Media Capture and Streams Web Goes Native PWA Update 2019
10. Flight Arcade • WebGL • Web Audio API • Gamepad API The Power of the Modern Web Web Goes Native PWA Update 2019 DeviantArt | DanRabbit
11. Progressive Web Apps are not a technology, but a collection of features an application must/should support. “Uber Pattern” Web Goes Native PWA Update 2019
12. PWA Update 2019 Web Goes Native Responsive Linkable Discoverable Installable App-like Connectivity Independent Fresh Safe Re-engageable Progressive
13. Platform Support PWA Status Quo Web Goes Native PWA Update 2019 17 11.1 44 40 4.1 Chrome 40 11.3
14. Intro Web App Manifest Offline First Service Worker Cache API Workbox Angular Demo App IndexedDB Dexie.js Background Sync API Push API Update 2019 PWA Update 2019 Web Goes Native Talking Points
15. Distinguish Web Apps from Websites How to distinguish websites from apps? Idea: Add a file with metadata for apps only Advantage: Apps can be identified by search engines, app store providers etc. Web App Manifest <link rel="manifest" href="manifest.json"> Web App Manifest Web Goes Native PWA Update 2019
16. manifest.json { "short_name": "PWA Demo", "name": "PWA Demo", "icons": [ { "src": "assets/icon-144x144.png", "sizes": "144x144", "type": "image/png" } ], "start_url": "/index.html", "display": "standalone" } Web App Manifest Title Icons Start URL Display Type Age Rating Additional Config Description Related Apps Web Goes Native PWA Update 2019
17. Display Modes PWA Update 2019 Web Goes Native Web App Manifest browser minimal-ui standalone fullscreen
18. Icon Purposes PWA Update 2019 Web Goes Native Web App Manifest (any) any context (e.g. app icon) badge different space constraints/ color requirements maskable user agent masks icon as required Safe Zone Windows iOS Android
19. manifest.json { "short_name": "PWA Demo", "name": "AngularConnect PWA Demo", "icons": [ { "src": "assets/icon-144x144.png", "sizes": "144x144", "type": "image/png" } ], "start_url": "/index.html", "display": "standalone" } Web App Manifest Web Goes Native PWA Update 2019 LIVE DEMO
20. Debugging PWA Update 2019 Web Goes Native Web App Manifest
21. Intro Web App Manifest Offline First Service Worker Cache API Workbox Angular Demo App IndexedDB Dexie.js Background Sync API Push API Update 2019 PWA Update 2019 Web Goes Native Talking Points
22. PWA Update 2019 Web Goes Native
23. Offline Capability Challenge: Connection strength varies a lot (especially en route) Lie-Fi: Connection strength of a public WiFi is weak or even completely offline Goal: App works offline or with a weak connection at least within the possibilities (e.g. OneNote) PWA Update 2019 Web Goes Native Offline First
24. Principle PWA Update 2019 Web Goes Native Offline First - Draft and implement offline support first - Think about synchronization & conflicts - Don’t treat offline as an error - Make offline the default - Everything must be offline capable
25. PWA Update 2019 Web Goes Native Offline First System Website HTML/JS Local storage Central adapter Remote storage Server Internet
26. Locking Pessimistic - System locks access to resource if it is used by another user - No conflicts - Users don’t like this (offline = no locking possible!) Optimistic - Users can access arbitrary resources anytime - Requires data synchronization & conflict resolution (strategies depend on domain) PWA Update 2019 Web Goes Native Offline First
27. Technologies Service Worker & Cache API Source Files & Assets App & IndexedDB Structured Data PWA Update 2019 Web Goes Native Offline First
28. Intro Web App Manifest Offline First Service Worker Cache API Workbox Angular Demo App IndexedDB Dexie.js Background Sync API Push API Update 2019 PWA Update 2019 Web Goes Native Talking Points
29. Key Technology Service Worker Service Worker Internet Website HTML/JS Cache fetch Web Goes Native PWA Update 2019
30. Worker snippet is executed in an own thread Worker can’t manipulate the parent document’s DOM Communication via thin API (postMessage) + Acts as a controller/proxy/interceptor + Performs background tasks Has to be installed before usage Relation: Scope (origin + path) Lifetime: Unrelated to tab/window PWA Update 2019 Web Goes Native Service Worker
31. Lifecycle PWA Update 2019 Web Goes Native Service Worker Installing Parsed Error Activated Idle Terminated fetch/ message
32. Platform Support Service Worker Web Goes Native PWA Update 2019 17 11.1 44 40 4.1 Chrome 40 11.3
33. Basic Implementation navigator.serviceWorker.register('sw.js') .then(subscription => console.log(subscription)) .catch(err => console.error('Fehler', err)); self.addEventListener('install', event => {}); self.addEventListener('activate', () => {}); self.addEventListener('fetch', event => {}); PWA Update 2019 Web Goes Native Service Worker LIVE DEMO
34. Debugging PWA Update 2019 Web Goes Native Service Worker
35. Intro Web App Manifest Offline First Service Worker Cache API Workbox Angular Demo App IndexedDB Dexie.js Background Sync API Push API Update 2019 PWA Update 2019 Web Goes Native Talking Points
36. Introduction Cache: Key-value storage Key: HTTP(S) request, value: HTTP(S) response Survives browser restarts (Safari: unused caches are cleared “after a few weeks”) Can be accessed from both service worker and website Isolated per origin (protocol + hostname + port) Multiple named caches per origin Cache operations are asynchronous (Promises) PWA Update 2019 Web Goes Native Cache API
37. Usage 1. Open a cache 2. Store/read responses from the cache PWA Update 2019 Web Goes Native Cache API await caches.open('images') await cache.put(req, res) await cache.add(req) await cache.match(req)
38. and Service Worker PWA Update 2019 Web Goes Native Cache API Installing Parsed Error Activated Idle Terminated fetch/ message Install cache content Remove old caches Deliver from cache
39. Adding Requests to The Cache self.addEventListener('install', event => { event.waitUntil( caches.open('pwa-demo-v1') .then(cache => cache.addAll(['/', '/index.html'])) .then(() => self.skipWaiting()) ); }); PWA Update 2019 Web Goes Native Cache API LIVE DEMO
40. Delivering from The Cache self.addEventListener('fetch', event => { event.respondWith( caches.match(event.request) .then(response => response || fetch(event.request)) ); }); PWA Update 2019 Web Goes Native Cache API LIVE DEMO
41. Debugging PWA Update 2019 Web Goes Native Cache API
42. Caching Strategies 1. Cache only 2. Network only 3. Cache falling back to network 4. Cache & network race 5. Network falling back to cache 6. Cache then network 7. Generic Fallback 8. Service-Worker-side templating PWA Update 2019 Web Goes Native Cache API https://jakearchibald.com/2014/offline-cookbook/
43. PWA Update 2019 Web Goes Native Cache Then Network System Website HTML/JS Cache Storage Remote storage Server Internet 2. fetch HTTP Service Worker 1. lookup
44. Use Cases Service Worker - everything that’s part of a website/app version - application source files - assets Application - dynamic content known during runtime - “read later”, profile images, … - lookup without fetch PWA Update 2019 Web Goes Native Cache API
45. Intro Web App Manifest Offline First Service Worker Cache API Workbox Angular Demo App IndexedDB Dexie.js Background Sync API Push API Update 2019 PWA Update 2019 Web Goes Native Talking Points
46. Overview Toolchain by Google: Service Worker generator and runtime library Automatically creates a Service Worker implementation for you Can extend an existing Service Worker implementation with caching Command line tool: workbox npm i -g workbox-cli PWA Update 2019 Web Goes Native Workbox
47. Commands workbox wizard workbox generateSW workbox injectManifest PWA Update 2019 Web Goes Native Workbox LIVE DEMO
48. Routing & Strategies workbox.routing.registerRoute( new RegExp('/social-timeline/'), workbox.strategies.networkFirst() ); PWA Update 2019 Web Goes Native Workbox
49. Intro Web App Manifest Offline First Service Worker Cache API Workbox Angular Demo App IndexedDB Dexie.js Background Sync API Push API Update 2019 PWA Update 2019 Web Goes Native Talking Points
50. Angular supports service worker and cache manifest generation (for productive builds only) npm i -g @angular/cli ng new myApp cd myApp ng add @angular/pwa ng build --prod PWA Update 2019 Web Goes Native Angular Demo App LIVE DEMO
51. Intro Web App Manifest Offline First Service Worker Cache API Workbox Angular Demo App IndexedDB Dexie.js Background Sync API Push API Update 2019 PWA Update 2019 Web Goes Native Talking Points
52. Motivation The web platform has different techniques to store arbitrary data (e.g. application state) offline: • Web Storage API (Local Storage/Session Storage—synchronous!) • Cookies (inconvenient) • IndexedDB PWA Update 2019 Web Goes Native IndexedDB
53. Overview Indexed Database (IndexedDB) is a database in the browser capable of storing structured data in tables with keys and value Data is stored permanently (survives browser restarts) Service Worker and website share access to the same IndexedDB database (e.g. for synchronization purposes) PWA Update 2019 Web Goes Native IndexedDB
54. Browser Support PWA Update 2019 Web Goes Native IndexedDB 10 7.1 4 11
55. Intro Web App Manifest Offline First Service Worker Cache API Workbox Angular Demo App IndexedDB Dexie.js Background Sync API Push API Update 2019 PWA Update 2019 Web Goes Native Talking Points
56. Overview Dexie is a minimalistic wrapper for IndexedDB Operations are based on promises instead of callbacks Near native performance (also for bulk inserts) Open-source PWA Update 2019 Web Goes Native Dexie.js
57. Table API const table = db.table('todos'); table.toArray() // get all items as an array table.add() // insert an object table.put() // update or insert an object table.filter(i => i.id !== 3) // apply JS filter on value table.where({ name: 'Peter' }) // query items by key PWA Update 2019 Web Goes Native Dexie.js
58. …and TypeScript class MyAppDatabase extends Dexie { todos: Dexie.Table<Todo, number>; constructor () { super('MyTodoDatabase'); this.version(1).stores({ todos: '++id', }); this.todos = this.table('todos'); } } PWA Update 2019 Web Goes Native Dexie.js LIVE DEMO
59. IndexedDB Debugging PWA Update 2019 Web Goes Native Dexie.js
60. Intro Web App Manifest Offline First Service Worker Cache API Workbox Angular Demo App IndexedDB Dexie.js Background Sync API Push API Update 2019 PWA Update 2019 Web Goes Native Talking Points
61. Syncs data when the client is next online (if the client is already online, syncs immediately) This also works when the client application closed Currently only supports one-off synchronization PWA Update 2019 Web Goes Native Background Sync API
62. self.addEventListener('sync', event => { if (event.tag === 'upload-photos') { event.waitUntil(/* … */); } }); registration.sync.register('upload-photos'); PWA Update 2019 Web Goes Native Background Sync API
63. Browser Support PWA Update 2019 Web Goes Native Background Sync API WIP — WIP 49
64. Intro Web App Manifest Offline First Service Worker Cache API Workbox Angular Demo App IndexedDB Dexie.js Background Sync API Push API Update 2019 PWA Update 2019 Web Goes Native Talking Points
65. Get the user back with notifications Idea: Push the users to use the app again Known from social networks or games, etc. Combination of two technologies: • Web Notifications • Push API PWA Update 2019 Web Goes Native Push API
66. Browser Support PWA Update 2019 Web Goes Native Web Notifications 14 6 (macOS) 22 5
67. Browser Support PWA Update 2019 Web Goes Native Push API 17 — 44 44
68. Push services Every browser vendor has its own push service Challenge: Every service is used in a different way Ends in several implementations on the server Solution: One protocol that can be used by every push service Web Push Protocol PWA Update 2019 Web Goes Native Push API
69. Web Push Protocol Every push service talks Web Push Protocol Only one server implementation needed To make the push request secure, private and public keys are needed Ready-to-use-packages are available for different servers (e.g. Node, ASP.NET, etc.) PWA Update 2019 Web Goes Native Push API
70. Sending Push Notifications PWA Update 2019 Web Goes Native Re-Engageable Push Service Server 4. Send Message to Push Service endpoint 5. Response (success/fail) 1. Register for push 2. Send push information to client 6. Push to client Client(s) 3. Send push endpoint
71. Intro Web App Manifest Offline First Service Worker Cache API Workbox Angular Demo App IndexedDB Dexie.js Background Sync API Push API Update 2019 PWA Update 2019 Web Goes Native Talking Points
72. PWA Update 2019 Web Goes Native Google Play Store accepts PWAs
73. PWA Update 2019 Web Goes Native PWA Installation on macOS & Chrome
74. PWA Update 2019 Web Goes Native Badging API
75. PWA Update 2019 Web Goes Native Web Capabilities/Project Fugu Contacts Picker Wake Lock API Picture in picture Writable Files API
76. navigator.serviceWorker.ready.then(async (swReg) => { const bgFetch = await swReg.backgroundFetch.fetch('my-fetch', ['/ep-5.mp3', 'ep-5-artwork.jpg'], { title: 'Episode 5: Interesting things.', icons: [{ sizes: '300x300', src: '/ep-5-icon.png', type: 'image/png', }], downloadTotal: 60 * 1024 * 1024, }); }); PWA Update 2019 Web Goes Native Background Fetch API https://developers.google.com/web/updates/2018/12/background-fetch
77. - PWA is a truly cross-platform application model - Write once, run anywhere (mobile, desktop, browser, …) - One development team, one code base - Limited to what the web can offer (API support is huge & growing) - Can also be submitted to Google Play and Microsoft Store - Can be monetized (Payment Request API or traditional checkout forms) - Also run on legacy browsers (IE) PWA Update 2019 Web Goes Native Summary
78. Q&A PWA Update 2019 Web Goes Native
79. https://pwapraxis.liebel.io/ PWA Update 2019 Web Goes Native LIVE DEMO
80. Thank you for your kind attention! Christian Liebel @christianliebel christian.liebel@thinktecture.com