Intro to Service Workers


  1. Understand when and why to use service workers
  2. Be able to implement service workers for making application assets available offline
<h3>What is a Service Worker?</h3>
<p>a new API that allows you to run a script in <i>background</i> of your application and facilitates creating <br /><i>Progressive Web Apps</i></p>

What can Service Workers do?

  • offline your application
  • implement background sync*
  • enable push notifications*
<h3>Characteristics of a Service Worker</h3>
<h4><b>Runs in the background</b></h4>
  <li><b>web workers</b> are single JavaScript files, run on own thread</li>
  <li>don't block execution of other client-side code</li>
  <li>handle time-intensive operations without locking UI</li>
  <li><b>service workers</b> are a type of web worker</li>
  <li>service workers allow background processing that specifically relates to handling <b>network requests</b></li>
<h4><b>Cannot interact with DOM</b></h4>
  <li>can't access the DOM tree to do any manipulations</li>
  <li>must communicate through sending messages back and forth</li>
  <li>service worker can 'go to sleep' at any time</li>
  <li>is only woken up and utilized during events</li>
<img src="" />
<p><b>Read:</b> <a href="">What's the Difference Between Service Workers, Web Workers, and Web Sockets?</a></p>
<h4>Let's Practice</h4>
<p><b>Familiarize Yourself with DevTools:</b></p>
<p>1. Check out the 'Application' tab in dev tools</p>
<p>2. Click on the 'Service Workers' tab and check the 'Show All' box</p>
<p><a href="">Clone this repo</a></p>
<p><pre><code>`npm install`</code></pre></p>
<p><pre><code>`npm start`</code></pre></p>
<h3>Service Worker Lifecycle</h3>
<p><b>1. Registration:</b> browser is aware that we have a service worker that needs to be recognized, and will kick off the installation step upon a successful registration</p>
<p><b>2. Installation:</b> the service worker is installed, but doesn’t actually control anything on the page just yet. This is a good phase to cache assets for offline use.</p>
<p><b>3. Activation:</b> the service worker has been installed and is activated. This is a good place for us to manage old cached assets and update the service worker.</p>
<p><b>4. Full Page Control:</b> the service worker has been activated and now has full control over any pages that fall under its scope</p>