Introduction to Service Workers - MadridJs

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/javascript/2018/12/02/introduction-to-service-worker.html, which was a pre talk preparation.

Ed39ca0d44a6e6cdefc76ac548de5f41?s=128

Marabesi

May 14, 2019
Tweet

Transcript

  1. INTRODUCTION TO SERVICE WORKERS

  2. HELLO! I am Matheus Marabesi You can find me at

    @MatheusMarabesi 2
  3. 3

  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
  46. None
  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