Introduction to Service Workers - MadridJs

Service workers were born to improve the user experience in the connectivity aspect.

In the offline, which is the case when the user has no connection at all to the internet and the lie-fi, which is a term related to low(for instance 2G) connection and high latency.

The first part of the talk is going through the basics of service worker, as:

* What it is
* Why should you use it
* Introduction to the service worker API/ cache API
* Javascript code examples

The second part is focused on giving a real world example, in scenarios that service workers can be applied.

A more detailed content is provided at https://marabesi.com/service-worker/introduction, which was a pre talk preparation.

Transcript

1. INTRODUCTION TO SERVICE WORKERS
2. HELLO! I am Matheus Marabesi You can find me at @MatheusMarabesi 2
4. 1. PWA Progressive web apps
5. PWA Reliable Load instantly and never show the downasaur, even in uncertain network conditions. Fast Respond quickly to user interactions with silky smooth animations and no janky scrolling. Engaging Feel like a natural app on the device, with an immersive user experience. 5
6. PWA Manifest Allows you to control how your app appears and how it's launched. Web push notifications Respond quickly to user interactions with silky smooth animations and no janky scrolling. ??? ??? 6
7. 2. THE PROBLEM Connectivity 101
8. OFF LINE No connection at all. 8 Place your screenshot here
9. LIE FI Which is a term related to bad connection and high latency. 9
10. 3. DEFINITIONS Building the ground
11. “ Service workers improves the user experience in the connectivity aspect 11
12. SERVICE WORKER ▹ A isolated script that can’t access the DOM. 12
13. SERVICE WORKER ▹ A isolated script that can’t access the DOM. ▹ Intercept requests and decides when to go over the network or send a cached version. 13
14. SERVICE WORKER ▹ A isolated script that can’t access the DOM. ▹ Intercept requests and decides when to go over the network or send a cached version. ▹ Has a defined life cycle, installing, waiting and active. 14
15. SERVICE WORKER ▹ A isolated script that can’t access the DOM. ▹ Intercept requests and decides when to go over the network or send a cached version. ▹ Has a defined life cycle, installing, waiting and active. ▹ Must have HTTPS 15
16. APP LIKE The service worker add powers that only native apps used to have. 16
17. DEMO 01 Offline approach - intercepting request 17
18. 4. SERVICE WORKER LIFE CYCLE Service worker 101
19. HTTP - REQUEST/RESPONSE 19 Server 02 Response/Ccache 03 01 User request
20. SERVICE WORKER - REQUEST/RESPONSE 1 20 Service worker 02 01 User request
21. SERVICE WORKER - REQUEST/RESPONSE 2 21 Service worker 02 01 User request 03 Update the content and notify the user Cache first
22. DEMO 02 Dev tools 22
23. SETTING UP The service worker controls any page that matches the scope property. 23
24. To install a service worker, you must start the process by registering it on your page. This tells the browser where the service worker JavaScript file is. 24 if ('serviceWorker' in navigator) { navigator.serviceWorker .register('/sw.js') .then(function(registration) { // Registration was successful }, function(err) { // registration failed :( }); }); }
25. SCOPES The service worker controls any page that matches the scope property. 25
26. EXPLICIT 26 navigator.serviceWorker .register('/sw.js', {scope: '/app'}) .then( function(registration) { console.log(registration.scope); }, function(err) { console.log('ServiceWorker registration failed: ', err); } );
27. EXPLICIT /app/ /app/whatever /app 27 navigator.serviceWorker .register('/sw.js', {scope: '/app/'}) .then( function(registration) { console.log(registration.scope); }, function(err) { console.log('ServiceWorker registration failed: ', err); } );
28. IMPLICIT 28 navigator.serviceWorker .register('/sw.js') .then( function(registration) { console.log(registration.scope); }, function(err) { console.log('ServiceWorker registration failed: ', err); } );
29. IMPLICIT Based on the location of the service worker file. 29 navigator.serviceWorker .register('/sw.js') .then( function(registration) { console.log(registration.scope); }, function(err) { console.log('ServiceWorker registration failed: ', err); } );
30. “ It is possible to use as many service worker as you want to. 30
31. MULTIPLE SERVICE WORKERS It is possible to use as many Service worker as you want to. 31 folder1 index.html sw1.js folder2 index.html sw2.js folder3 index.html sw3.js
32. SERVICE WORKER LIFE CYCLE Service worker lifecycle in the first installation. 32 No service worker
33. DEMO 03 Service worker - life cycle 33
34. 5. CACHE API Introduced in the Service Worker specification
35. “ The Cache interface provides a storage mechanism for Request / Response object pairs that are cached, for example as part of the ServiceWorker life cycle. 35
36. The Cache API was created to enable Service Workers to cache network requests so that they can provide appropriate responses even while offline. CACHE API 36
37. The Cache API was created to enable Service Workers to cache network requests so that they can provide appropriate responses even while offline. CACHE API However, the API can also be used as a general storage mechanism. 37
38. The caches only store pairs of Request and Response objects, representing HTTP requests and responses, respectively. However, the requests and responses can contain any kind of data that can be transferred over HTTP. 38 const request = new Request('/images/sample1.jpg');
39. The Response object constructor accepts many types of data, including Blobs, ArrayBuffers, FormData objects, and strings. 39 const request = new Request('/images/sample1.jpg'); const imageBlob = new Blob([data], {type: 'image/jpeg'}); const imageResponse = new Response(imageBlob); const stringResponse = new Response('Hello world');
40. The first is to use cache.put(request, response). request is either a Request object or a string - if it is a string, then new Request(request) is used instead. response must be a Response. 40 cache.put('/test.json', new Response('{"foo": "bar"}'));
41. The first is to use cache.put(request, response). request is either a Request object or a string - if it is a string, then new Request(request) is used instead. response must be a Response. 41 cache.put('/test.json', new Response('{"foo": "bar"}')); const CACHE_NAME = 'my-site-cache-v1'; const urlsToCache = [ '/', '/styles/main.css', '/script/main.js' ];
42. DEMO 04 Cache API 42
43. 6. REAL WORLD SCENARIO, BLOG LIKE
44. 7. BONUS Tools, what is going on and the future.
45. WORKBOX JavaScript Libraries for adding offline support to web apps. 45
47. Building Successful Websites: Case Studies for Mature and Emerging Markets (Google I/O ’19) 47
48. OFFLINE The web as an app. THE FUTURE Total success! SW API With great power comes great responsibility. 48
49. THANKS! Any questions? You can find me at: @MatheusMarabesi 49