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

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/service-worker/introduction, which was a pre talk preparation.

Marabesi

May 14, 2019
Tweet

More Decks by Marabesi

Other Decks in Programming

Transcript

  1. 3

  2. 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
  3. 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
  4. 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
  5. 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
  6. 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
  7. SERVICE WORKER - REQUEST/RESPONSE 2 21 Service worker 02 01

    User request 03 Update the content and notify the user Cache first
  8. 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 :( }); }); }
  9. 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); } );
  10. 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); } );
  11. 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
  12. “ 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
  13. 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
  14. 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
  15. 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');
  16. 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');
  17. 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"}'));
  18. 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' ];
  19. OFFLINE The web as an app. THE FUTURE Total success!

    SW API With great power comes great responsibility. 48