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.

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