Progressive Web Apps Update 2019: Web Goes Native

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!

12c88a3a10478fa18d0363b3ba3d9df1?s=128

Christian Liebel

March 13, 2019
Tweet

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