Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Service Worker 101 (en)

720 views

Published on

Talk about `Service Worker` at GDG Korea Monthly Meetup on Aug. 2016.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Service Worker 101 (en)

  1. 1. Service Worker 101 @cwdoh, GDE for Web 1
  2. 2. Web Worker 2
  3. 3. What will happen from the following code: var till = Date.now() + 5000;  while(Date.now() < till) {}  3
  4. 4. Freeeee...eeeeze!!! Can't do anything such as scroll, click, ... 4
  5. 5. Your JavaScipt codes runs on UI thread It means that your code always try to block rendering under your control. :‒p 5
  6. 6. Long queue makes others unhappy. 6
  7. 7. Web Worker will rescue your browser Yeah, if you wrote right codes, and find nice customers using modern browser...probably... 7
  8. 8. Web Workers An API that allows to spawn background workers running scripts in parallel to their main page. This allows for thread‒like operation with message‒ passing as the coordination mechanism. 8
  9. 9. Web Worker is a browser feature for Running scripts: thread‒likely in Background with message‒passing 9
  10. 10. Common rules of Web Worker Has own global scope Can't directly manipulate the DOM Can't use all of properties and method in window scope 10
  11. 11. Code Thread‒like operation with message‒passing fetch('my‐encryped‐doc.txt').then(function(res) {    // spawn worker    var worker = new Worker('decorder.js');    worker.onmessage = function(e) {      console.log('Decoded: ' + e.data);    };    // decode blob data with worker    worker.postMessage([res.clone().blob()]);  });  decorder.js onmessage = function(e) {    // decode...    postMessage(decodedResult);  };  11
  12. 12. Shared Worker 12
  13. 13. Shared Worker A specific kind of worker that can be accessed from several browsing contexts, such as several windows, iframes or even workers.  They implement an interface different than dedicated workers and have a different global scope, SharedWorkerGlobalScope. 13
  14. 14. Shared Worker is a specific kind of worker: Accessible from several browsing contexts Different interface Different global scope 14
  15. 15. Usally we call  dedicated worker , if it's not shared. 15
  16. 16. Service Worker 16
  17. 17. W3C Specification: A method that enables applications to take advantage of persistent background processing, including hooks to enable bootstrapping of web applications while offline. 17
  18. 18. The core of this system is an event‒driven Web Worker, which responds to events dispatched from documents and other sources. 18
  19. 19. A system for managing installation, versions, and upgrades is provided. 19
  20. 20. The service worker is a generic entry point for event‒driven background processing in the Web Platform that is extensible by other specifications. 20
  21. 21. Service Worker is another type of worker for persistent background processing Having an event‒driven model Managing installation, versions and upgrades Generic entry point for other specifications 21
  22. 22. Dedicated/Shared Worker vs Service Worker 22
  23. 23. Dedicated Worker & Shared Worker:  Runtime ,  Creation ,  Browsing context  A thread‒like things can be created at runtime. You should create Worker and control it at runtime. Only available when page is loaded and created it. You should create it at every time when wanna use it again. 23
  24. 24. ServiceWorker:  Persistent ,  installation ,  browser  Daemon‒like thing can be install on system aka browser. Lifecycle is independent from webpage or browser. Provide version control for update from system Nicely fit as entry‒point to Remote Notification, Background Sync. and so on. 24
  25. 25. REMINDER: Persistent background processing is a goal of service worker, and it decided all of service worker mechanism 25
  26. 26. Why event‒driven model? Promised  events  enable  Persistent background processing  even if page isn't loading.  It helps of implementing features that need something more than pages. 26
  27. 27. Spawn? No, install!  spawn  would be executed at runtime. 27
  28. 28. Lifecycle 28
  29. 29. 2.1.1 lifetime The lifetime of a service worker is tied to the execution lifetime of events, not references held by service worker clients to the ServiceWorker object. The user agent may terminate service workers at any time it has no event to handle or detects abnormal operation such as infinite loops and tasks exceeding imposed time limits, if any, while handling the events. 29
  30. 30. ServiceWorkerState enum ServiceWorkerState {    "installing",    "installed",    "activating",    "activated",    "redundant"  };  30
  31. 31. 31
  32. 32. Sevice Worker families 32
  33. 33. Offline Cache Make your own dinosaurs! :‒p 33
  34. 34. Remote Push Notification A long time ago in a galaxy far, far away...there are spams 34
  35. 35. Background Sync. Browser let you know perfect time to connect to server. 35
  36. 36. ❤  HTTPS For avoiding man‒in‒the‒middle‒attack  However you can use  127.0.0.1  aka  localhost  without certificate for testing your module. 36
  37. 37. Show me the money code! Simple Demo: random image for same request. :‒p 37
  38. 38. Pros. and Cons. What do we have to think about before adopting SW? 38
  39. 39. There's no Polyfills! Everything has two sides. We don't need to manage polyfills and check our codes run well on cross‒browsing environments. :‒) We don't use polyfill for using SW features on unsupport browsers. :‒/ 39
  40. 40. Adopting it progressively if ('serviceWorker' in navigator) {    navigator.serviceWorker.register('/sw.js')      .then(function(registration) {        // registered your services depend on SW. :‐)        if (enableServiceWorkerFeatures(registration)) {          // show some helpful message.          showSomeToastMessage();        }      });  }  40
  41. 41. Links [1/2] Specifications Service Worker Push API Notification API Fetch API Some articles Offline cookbook 2016 ‒ the year of web streams Push notifications on the open Web Web Push Encryption Is service worker ready? 41
  42. 42. Links [2/2] Case studies Production case studies @developers.google.com Codes Service Worker 101 simple demo code Simple Push Demo by @gauntface Tools sw‒precache sw‒toolbox 42
  43. 43. Thank you! 43

×