Upgrade to Pro — share decks privately, control downloads, hide ads and more …

PWA Deep-Dive: Offline-Anwendungen im Griff

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.

Christian Liebel
PRO

April 06, 2019
Tweet

More Decks by Christian Liebel

Other Decks in Programming

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
    [email protected]

    View Slide