PWA Deep Dive: Offlineanwendungen im Griff

PWA Deep Dive: Offlineanwendungen im Griff

Zentrale Eigenschaft jeder Progressive Web App (PWA) ist die Verbindungsunabhängigkeit. Dank dem Service Worker funktioniert die App auch dann, wenn der Anwender gerade offline ist: im Tunnel, im Park oder im Dschungel. Bei der Generierung eines Service Workers hilft das Toolkit Workbox. Anwenderdaten werden hingegen in der Browserdatenbank IndexedDB hinterlegt. Wo Daten offline gehalten werden, müssen aber auch deren Synchronisierung und Konfliktauflösung in der Architektur bedacht werden.

Christian Liebel zeigt Ihnen die Mechanik hinter dem Service-Worker-Cache und der Browserdatenbank IndexedDB, sodass es auch Ihre PWA mit den nativen Gegenstücken problemlos aufnehmen kann.

12c88a3a10478fa18d0363b3ba3d9df1?s=128

Christian Liebel

September 16, 2020
Tweet

Transcript

  1. PWA Deep Dive Offlineanwendungen im Griff Christian Liebel @christianliebel Consultant

  2. PWA Deep Dive Offlineanwendungen im Griff Responsive Linkable Discoverable Installable

    App-like Connectivity Independent Fresh Safe Re-engageable Progressive
  3. PWA Deep Dive Offlineanwendungen im Griff

  4. Service Worker & Cache API Source Files & Assets App

    & IndexedDB Structured Data PWA Deep Dive Offlineanwendungen im Griff Connectivity Independent
  5. Offline First Service Worker Cache API Workbox Angular Demo App

    IndexedDB Dexie.js Dexie.js Migrations PWA Deep Dive Offlineanwendungen im Griff Talking Points
  6. Offline First Service Worker Cache API Workbox Angular Demo App

    IndexedDB Dexie.js Dexie.js Migrations PWA Deep Dive Offlineanwendungen im Griff Talking Points
  7. 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 Deep Dive Offlineanwendungen im Griff Offline First
  8. Principle PWA Deep Dive Offlineanwendungen im Griff 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
  9. PWA Deep Dive Offlineanwendungen im Griff Offline First System Website

    HTML/JS Local storage Central adapter Remote storage Server Internet
  10. Offline First Service Worker Cache API Workbox Angular Demo App

    IndexedDB Dexie.js Dexie.js Migrations PWA Deep Dive Offlineanwendungen im Griff Talking Points
  11. Key Technology Service Worker Service Worker Internet Website HTML/JS Cache

    fetch Offlineanwendungen im Griff PWA Deep Dive
  12. 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 Deep Dive Offlineanwendungen im Griff Service Worker
  13. Lifecycle PWA Deep Dive Offlineanwendungen im Griff Service Worker Installing

    Parsed Error Activated Idle Terminated fetch/ message
  14. Platform Support Service Worker Offlineanwendungen im Griff PWA Deep Dive

    17 11.1 44 40 4.1 Chrome 40 11.3
  15. 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 Deep Dive Offlineanwendungen im Griff Service Worker LIVE DEMO
  16. Debugging PWA Deep Dive Offlineanwendungen im Griff Service Worker

  17. Offline First Service Worker Cache API Workbox Angular Demo App

    IndexedDB Dexie.js Dexie.js Migrations PWA Deep Dive Offlineanwendungen im Griff Talking Points
  18. 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 Deep Dive Offlineanwendungen im Griff Cache API
  19. Usage 1. Open a cache 2. Store/read responses from the

    cache PWA Deep Dive Offlineanwendungen im Griff Cache API await caches.open('images') await cache.put(req, res) await cache.add(req) await cache.match(req)
  20. and Service Worker PWA Deep Dive Offlineanwendungen im Griff Cache

    API Installing Parsed Error Activated Idle Terminated fetch/ message Install cache content Remove old caches Deliver from cache
  21. 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 Deep Dive Offlineanwendungen im Griff Cache API LIVE DEMO
  22. Delivering from The Cache self.addEventListener('fetch', event => { event.respondWith( caches.match(event.request)

    .then(response => response || fetch(event.request)) ); }); PWA Deep Dive Offlineanwendungen im Griff Cache API LIVE DEMO
  23. Debugging PWA Deep Dive Offlineanwendungen im Griff Cache API

  24. 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 Deep Dive Offlineanwendungen im Griff Cache API https://jakearchibald.com/2014/offline-cookbook/
  25. 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 Deep Dive Offlineanwendungen im Griff Cache API
  26. Offline First Service Worker Cache API Workbox Angular Demo App

    IndexedDB Dexie.js Dexie.js Migrations PWA Deep Dive Offlineanwendungen im Griff Talking Points
  27. 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 Deep Dive Offlineanwendungen im Griff Workbox
  28. Commands workbox wizard workbox generateSW workbox injectManifest PWA Deep Dive

    Offlineanwendungen im Griff Workbox LIVE DEMO
  29. Offline First Service Worker Cache API Workbox Angular Demo App

    IndexedDB Dexie.js Dexie.js Migrations PWA Deep Dive Offlineanwendungen im Griff Talking Points
  30. PWA Setup 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 Deep Dive Offlineanwendungen im Griff Angular LIVE DEMO
  31. Update Process PWA Deep Dive Offlineanwendungen im Griff Angular V1

    V2 V2 V1 V1 V2 Server Browser
  32. SwUpdate The SwUpdate service provides an available observable that fires

    when there’s an update. As a result, the user can be prompted to reload the website. PWA Deep Dive Offlineanwendungen im Griff Angular
  33. Offline First Service Worker Cache API Workbox Angular Demo App

    IndexedDB Dexie.js Dexie.js Migrations PWA Deep Dive Offlineanwendungen im Griff Talking Points
  34. 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 Deep Dive Offlineanwendungen im Griff IndexedDB
  35. 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 Deep Dive Offlineanwendungen im Griff IndexedDB
  36. Browser Support PWA Deep Dive Offlineanwendungen im Griff IndexedDB 10

    7.1 4 11
  37. Offline First Service Worker Cache API Workbox Angular Demo App

    IndexedDB Dexie.js Dexie.js Migrations PWA Deep Dive Offlineanwendungen im Griff Talking Points
  38. 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 Deep Dive Offlineanwendungen im Griff Dexie.js
  39. 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 Deep Dive Offlineanwendungen im Griff Dexie.js
  40. …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 Deep Dive Offlineanwendungen im Griff Dexie.js LIVE DEMO
  41. IndexedDB Debugging PWA Deep Dive Offlineanwendungen im Griff Dexie.js

  42. Offline First Service Worker Cache API Workbox Angular Demo App

    IndexedDB Dexie.js Dexie.js Migrations PWA Deep Dive Offlineanwendungen im Griff Talking Points
  43. Migrations db.version(1).stores({ friends: "++id,name,age" }); db.version(2).stores({ friends: "++id,name,birthdate" }).upgrade(trans =>

    { const YEAR = 365 * 24 * 60 * 60 * 1000; return trans.friends.toCollection().modify(friend => { friend.birthdate = new Date(Date.now() - (friend.age * YEAR)); delete friend.age; }); }); PWA Deep Dive Offlineanwendungen im Griff Dexie.js
  44. Make use of the Offline First pattern Use Cache API

    for HTTPS requests Use IndexedDB for structured data Use Service Workers for initial caching and delivering cached content Think about data synchronization & conflict handling for structured data Make your users happy! PWA Deep Dive Offlineanwendungen im Griff Summary
  45. Thank you! Off next: Q&A Christian Liebel @christianliebel christian.liebel@thinktecture.com