PWA Deep-Dive: Offline-Anwendungen im Griff

Progressive Web Apps bieten sich als plattformübergreifendes Anwendungsmodell als idealer Partner für in .NET geschriebene Backends an. Zentrale Eigenschaft einer jeden 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. Zur 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 von Thinktecture zeigt Ihnen die Mechanik hinter der dem Service-Worker-Cache und der Browserdatenbank IndexedDB, sodass es auch Ihre PWA mit ihren nativen Gegenstücken problemlos aufnehmen kann.

Transcript

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

   View Slide

2. Hello, it’s me.
   PWA Deep Dive
   Offlineanwendungen im Griff
   Christian Liebel
   Follow me:
   @christianliebel
   Blog:
   christianliebel.com
   Email:
   christian.liebel
   @thinktecture.com
   Cross-Platform &
   Cloud & Enterprise
   Blockchain
   

   View Slide

3. PWA Deep Dive
   Offlineanwendungen im Griff
   - 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
   

   View Slide

4. PWA Deep Dive
   Offlineanwendungen im Griff
   Responsive Linkable Discoverable Installable App-like
   Connectivity
   Independent
   Fresh Safe Re-engageable Progressive
   

   View Slide

5. PWA Deep Dive
   Offlineanwendungen im Griff
   

   View Slide

6. Service
   Worker &
   Cache API
   Source
   Files &
   Assets
   App &
   IndexedDB
   Structured
   Data
   PWA Deep Dive
   Offlineanwendungen im Griff
   Connectivity Independent
   

   View Slide

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

   View Slide

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

   View Slide

9. 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
   

   View Slide

10. 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
    

    View Slide

11. PWA Deep Dive
    Offlineanwendungen im Griff
    Offline First
    System
    Website
    HTML/JS
    Local
    storage
    Central
    adapter
    Remote
    storage
    Server
    Internet
    

    View Slide

12. 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 Deep Dive
    Offlineanwendungen im Griff
    Offline First
    

    View Slide

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

    View Slide

14. Key Technology
    Service Worker
    Service
    Worker
    Internet
    Website
    HTML/JS
    Cache
    fetch
    Offlineanwendungen im Griff
    PWA Deep Dive
    

    View Slide

15. 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
    

    View Slide

16. Lifecycle
    PWA Deep Dive
    Offlineanwendungen im Griff
    Service Worker
    Installing
    Parsed
    Error
    Activated Idle Terminated
    fetch/
    message
    

    View Slide

17. Platform Support
    Service Worker
    Offlineanwendungen im Griff
    PWA Deep Dive
    17
    11.1
    44
    40 4.1
    Chrome 40
    11.3
    

    View Slide

18. 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
    

    View Slide

19. Debugging
    PWA Deep Dive
    Offlineanwendungen im Griff
    Service Worker
    

    View Slide

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

    View Slide

21. 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
    

    View Slide

22. 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)
    

    View Slide

23. 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
    

    View Slide

24. 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
    

    View Slide

25. 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
    

    View Slide

26. Debugging
    PWA Deep Dive
    Offlineanwendungen im Griff
    Cache API
    

    View Slide

27. 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/
    

    View Slide

28. PWA Deep Dive
    Offlineanwendungen im Griff
    Cache Then Network
    System
    Website
    HTML/JS
    Cache
    Storage
    Remote
    storage
    Server
    Internet
    2. fetch HTTP
    Service
    Worker
    1. lookup
    

    View Slide

29. 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
    

    View Slide

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

    View Slide

31. 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
    

    View Slide

32. Commands
    workbox wizard
    workbox generateSW
    workbox injectManifest
    PWA Deep Dive
    Offlineanwendungen im Griff
    Workbox LIVE DEMO
    

    View Slide

33. Routing & Strategies
    workbox.routing.registerRoute(
    new RegExp('/social-timeline/'),
    workbox.strategies.networkFirst()
    );
    PWA Deep Dive
    Offlineanwendungen im Griff
    Workbox
    

    View Slide

34. Client Library
    import { Workbox } from 'workbox-window';
    if ('serviceWorker' in navigator) {
    const wb = new Workbox('service-worker.js');
    wb.addEventListener('installed', event => {
    if (event.isUpdate) {
    if (confirm('New content is available! Click OK to refresh')) {
    window.location.reload();
    }
    }
    });
    wb.register();
    }
    PWA Deep Dive
    Offlineanwendungen im Griff
    Workbox
    https://medium.com/@webmaxru/workbox-4-implementing-refresh-to-update-version-flow-using-the-workbox-window-module-41284967e79c
    

    View Slide

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

    View Slide

36. 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 Demo App
    LIVE DEMO
    

    View Slide

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

    View Slide

38. 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)
    • WebSQL (deprecated)
    • IndexedDB
    PWA Deep Dive
    Offlineanwendungen im Griff
    IndexedDB
    

    View Slide

39. 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
    

    View Slide

40. Browser Support
    PWA Deep Dive
    Offlineanwendungen im Griff
    IndexedDB
    10
    7.1
    4
    11
    

    View Slide

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

    View Slide

42. 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
    

    View Slide

43. 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
    

    View Slide

44. const dexie = new Dexie('Meine-DB');
    dexie.version(1).stores({
    todos: 'id++,done'
    });
    PWA Deep Dive
    Offlineanwendungen im Griff
    Dexie.js LIVE DEMO
    

    View Slide

45. IndexedDB Debugging
    PWA Deep Dive
    Offlineanwendungen im Griff
    Dexie.js
    

    View Slide

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

    View Slide

47. 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 Deep Dive
    Offlineanwendungen im Griff
    Background Sync API
    

    View Slide

48. self.addEventListener('sync', event => {
    if (event.tag === 'upload-photos') {
    event.waitUntil(/* … */);
    }
    });
    registration.sync.register('upload-photos');
    PWA Deep Dive
    Offlineanwendungen im Griff
    Background Sync API LIVE DEMO
    

    View Slide

49. Browser Support
    PWA Deep Dive
    Offlineanwendungen im Griff
    Background Sync API
    WIP
    —
    WIP
    49
    

    View Slide

50. https://pwapraxis.liebel.io
    PWA Deep Dive
    Offlineanwendungen im Griff
    Demo
    LIVE DEMO
    

    View Slide

51. 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
    Background Sync API can sync data even when the app is closed
    Make your users happy!
    PWA Deep Dive
    Offlineanwendungen im Griff
    Summary
    

    View Slide

52. Thank you
    for your kind attention!
    Christian Liebel
    @christianliebel
    christian.liebel@thinktecture.com
    

    View Slide