Advanced Progressive Web Apps: Push-Benachrichtigungen und Daten-Caching im Griff

Advanced Progressive Web Apps: Push-Benachrichtigungen und Daten-Caching im Griff

Progressive Web Apps (PWA) sind das Anwendungsmodell der Zukunft: Webanwendungen werden per Fingertippen zur auf dem Gerät installierten App – ganz ohne Ballast wie die nativen Wrapper Cordova oder Electron. Die zentralen Eigenschaften einer PWA sind Offlinefähigkeit und die Unterstützung von Push-Kommunikation. Christian Liebel von Thinktecture stellt Ihnen die Mechanik hinter der Cache und Push API vor, damit auch Ihre PWA es problemlos mit ihren nativen Gegenstücken aufnehmen kann. Dabei kommt das Google-Tool Workbox 3.0 zum Einsatz. Gezeigt werden unterschiedliche Caching-Strategien, die Möglichkeit der Hintergrundaktualisierung von Daten sowie Pushbenachrichtigungen, wie man sie von jeder nativen App kennt.

12c88a3a10478fa18d0363b3ba3d9df1?s=128

Christian Liebel

September 27, 2018
Tweet

Transcript

  1. Advanced Progressive Web Apps Push-Benachrichtigungen und Daten- Caching im Griff

    Christian Liebel @christianliebel Consultant
  2. Special Day “Cross-Plattform Applications” Thema Sprecher Datum, Uhrzeit Raum Echte

    Cross-Plattform-Anwendungen mit Cordova, Electron und Angular Fabian Gosebrink DO, 27. September 2018, 09.00 bis 10.00 Gutenberg 2+3 Adaptive Cross-Plattform UIs mit Angular – Beyond Burger-Menu Timo Korinth DO, 27. September 2018, 10.45 bis 11.45 Watford B Advanced Progressive Web Apps: Push-Benachrichtigungen und Daten- Caching im Griff Christian Liebel DO, 27. September 2018, 12.00 bis 13.00 Watford B UI-Feuerwerk mit Struktur: Web Components mit Angular Jörg Neumann, Manuel Rauber DO, 27. September 2018, 15.45 bis 16.45 Watford B Office als Anwendungsplattform: Pragmatische Add-Ins mit Angular Thorsten Hans DO, 27. September 2018, 17.00 bis 18.00 Gutenberg 2+3
  3. Hello, it’s me. Advanced Progressive Web Apps Push-Benachrichtigungen und Daten-Caching

    im Griff Christian Liebel Follow me: @christianliebel Blog: christianliebel.com Email: christian.liebel @thinktecture.com Cross-Platform & Cloud & Enterprise Blockchain 3
  4. 1. PWA Intro 2. Offline First & Service Worker 3.

    Cache API 4. Workbox 5. Background Sync API 6. Push API Advanced Progressive Web Apps Push-Benachrichtigungen und Daten-Caching im Griff Talking Points 4
  5. PWA Intro Advanced Progressive Web Apps Push-Benachrichtigungen und Daten-Caching im

    Griff 5
  6. Advanced Progressive Web Apps Push-Benachrichtigungen und Daten-Caching im Griff 6

  7. Advanced Progressive Web Apps Push-Benachrichtigungen und Daten-Caching im Griff 7

  8. Advanced Progressive Web Apps Push-Benachrichtigungen und Daten-Caching im Griff 8

  9. Advanced Progressive Web Apps Push-Benachrichtigungen und Daten-Caching im Griff 9

  10. 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 Push-Benachrichtigungen und Daten-Caching im Griff Advanced Progressive Web Apps 10
  11. Responsive Linkable Discoverable Installable App-like Connectivity Independent Fresh Safe Re-

    engageable Progressive “Uber Pattern” Push-Benachrichtigungen und Daten-Caching im Griff Advanced Progressive Web Apps 11 https://developers.google.com/web/fundamentals/getting-started/codelabs/your-first-pwapp/
  12. Responsive Linkable Discoverable Installable App-like Connectivity Independent Fresh Safe Re-

    engageable Progressive “Uber Pattern” Push-Benachrichtigungen und Daten-Caching im Griff Advanced Progressive Web Apps 12 https://developers.google.com/web/fundamentals/getting-started/codelabs/your-first-pwapp/ Cache API Push API Background Sync
  13. Offline First & Service Worker Advanced Progressive Web Apps Push-Benachrichtigungen

    und Daten-Caching im Griff 13
  14. 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) Advanced Progressive Web Apps Push-Benachrichtigungen und Daten-Caching im Griff Offline First 14
  15. Principle Draft and implement offline support first Think about synchronization

    & conflicts Make offline the default Everything must be offline capable Don’t treat offline as an error App works offline right off the bat Advanced Progressive Web Apps Push-Benachrichtigungen und Daten-Caching im Griff Offline First 15
  16. Advanced Progressive Web Apps Push-Benachrichtigungen und Daten-Caching im Griff Offline

    First 16 System Website HTML/JS Local storage Central adapter Remote storage Server Internet
  17. Key Technology Service Worker Service Worker Internet Website HTML/JS Cache

    fetch Push-Benachrichtigungen und Daten-Caching im Griff Advanced Progressive Web Apps 17
  18. 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 Advanced Progressive Web Apps 18 Push-Benachrichtigungen und Daten-Caching im Griff Service Worker
  19. Lifecycle Advanced Progressive Web Apps Push-Benachrichtigungen und Daten-Caching im Griff

    Service Worker 19 Installing Parsed Error Activated Idle Terminated fetch/ message
  20. Advanced Progressive Web Apps Push-Benachrichtigungen und Daten-Caching im Griff Service

    Worker 20
  21. Basic Implementation navigator.serviceWorker.register('sw.js', { updateViaCache: "none" }) .then(subscription => console.log(subscription))

    .catch(err => console.error('Fehler', err)); self.addEventListener('install', event => {}); self.addEventListener('activate', () => {}); self.addEventListener('fetch', event => {}); Advanced Progressive Web Apps Push-Benachrichtigungen und Daten-Caching im Griff Service Worker 21 LIVE DEMO
  22. Cache API Advanced Progressive Web Apps Push-Benachrichtigungen und Daten-Caching im

    Griff 22
  23. XHR vs. Fetch API var xmlHttp = new XMLHttpRequest(); xmlHttp.open('GET',

    'sample.json', true); xmlHttp.onreadystatechange = () => { if (xmlHttp.readyState == 4) { alert(xmlHttp.responseText); } }; xmlHttp.send(null); Cache API Push-Benachrichtigungen und Daten-Caching im Griff Advanced Progressive Web Apps 23 const response = await fetch('sample.json') const responseText = await response.text(); alert(responseText);
  24. and Service Worker Advanced Progressive Web Apps Push-Benachrichtigungen und Daten-Caching

    im Griff Cache API 24 Installing Parsed Error Activated Idle Terminated fetch/ message Install cache content Remove old caches Deliver from cache
  25. 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()) ); }); Advanced Progressive Web Apps Push-Benachrichtigungen und Daten-Caching im Griff Cache API 25 LIVE DEMO
  26. Delivering from The Cache self.addEventListener('fetch', event => { event.respondWith( caches.match(event.request)

    .then(response => response || fetch(event.request)) ); }); Advanced Progressive Web Apps Push-Benachrichtigungen und Daten-Caching im Griff Cache API 26 LIVE DEMO
  27. Caching Strategies Advanced Progressive Web Apps Push-Benachrichtigungen und Daten-Caching im

    Griff Cache API https://jakearchibald.com/2014/offline-cookbook/ 27
  28. Advanced Progressive Web Apps Push-Benachrichtigungen und Daten-Caching im Griff Cache

    Then Network 28 System Website HTML/JS Cache Storage Remote storage Server Internet 2. fetch HTTP Service Worker 1. lookup
  29. Workbox Advanced Progressive Web Apps Push-Benachrichtigungen und Daten-Caching im Griff

    29
  30. 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 Advanced Progressive Web Apps Push-Benachrichtigungen und Daten-Caching im Griff Workbox 30
  31. Commands workbox wizard workbox generateSW workbox injectManifest Advanced Progressive Web

    Apps Push-Benachrichtigungen und Daten-Caching im Griff Workbox 31 LIVE DEMO
  32. Routing & Strategies workbox.routing.registerRoute( new RegExp('/social-timeline/'), workbox.strategies.networkFirst() ); Advanced Progressive

    Web Apps Push-Benachrichtigungen und Daten-Caching im Griff Workbox 32
  33. Background Sync API Advanced Progressive Web Apps Push-Benachrichtigungen und Daten-Caching

    im Griff 33
  34. 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 Advanced Progressive Web Apps Push-Benachrichtigungen und Daten-Caching im Griff Background Sync API 34
  35. self.addEventListener('sync', event => { if (event.tag === 'upload-photos') { event.waitUntil(/*

    … */); } }); registration.sync.register('upload-photos'); Advanced Progressive Web Apps Push-Benachrichtigungen und Daten-Caching im Griff Background Sync API 35
  36. Advanced Progressive Web Apps Push-Benachrichtigungen und Daten-Caching im Griff Background

    Sync API 36
  37. Push API Advanced Progressive Web Apps Push-Benachrichtigungen und Daten-Caching im

    Griff 37
  38. 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: • Notifications API • Push API Advanced Progressive Web Apps Push-Benachrichtigungen und Daten-Caching im Griff Push API 38
  39. Advanced Progressive Web Apps Push-Benachrichtigungen und Daten-Caching im Griff Push

    API 39
  40. 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 Advanced Progressive Web Apps Push-Benachrichtigungen und Daten-Caching im Griff Push API 40
  41. 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.) Advanced Progressive Web Apps Push-Benachrichtigungen und Daten-Caching im Griff Push API 41
  42. Sending Push Notifications Advanced Progressive Web Apps Push-Benachrichtigungen und Daten-Caching

    im Griff Push API 42 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
  43. Sending Push Notifications self.addEventListener('push', event => { const data =

    event.data.json(); event.waitUntil( self.registration.showNotification(data.title, data) ); }); Advanced Progressive Web Apps Push-Benachrichtigungen und Daten-Caching im Griff Push API 43 LIVE DEMO
  44. https://pwa.liebel.io Third-Party Push Service Advanced Progressive Web Apps Push-Benachrichtigungen und

    Daten-Caching im Griff Push API 44 LIVE DEMO
  45. Advantages Truly cross-platform Looks native, feels native Limitations No scheduling

    of push notifications (e.g., calendar apps or games) You can only use what’s available (i.e., no push on iOS!) Advanced Progressive Web Apps Push-Benachrichtigungen und Daten-Caching im Griff Summary 45
  46. Responsive Linkable Discoverable Installable App-like Connectivity Independent Fresh Safe Re-

    engageable Progressive “Uber Pattern” Push-Benachrichtigungen und Daten-Caching im Griff Advanced Progressive Web Apps 46 https://developers.google.com/web/fundamentals/getting-started/codelabs/your-first-pwapp/ Cache API Push API Background Sync
  47. Thank you for your kind attention! 47 Christian Liebel @christianliebel

    christian.liebel@thinktecture.com