Understanding Service Workers.

person carlosrojasofolder_openpwaaccess_time October 3, 2017

There are common scenarios currently in which our Web applications are limited by not having an open tab in the browser, but if we take the mobile world there is no such limitation because although a Mobile App is closed we can interact with the user such as Push Notifications.That is why the Web has been given the need to evolve and create mechanisms that give users similar experiences in both an App and a browser, which is why has created the Progressive Web Apps and its cornerstone the Service Workers.

What is a Service Worker ?

A Service Worker can be understood as a script (Javascript File) that runs in the background, regardless of whether a web page is open or not. Some interesting things about the Service Workers:

  • A Service Worker cannot directly access the DOM, the Service Worker communicates with the pages it controls through the PostMessage interface and is, in turn, able to manipulate the DOM if necessary.
  • With a Service Worker you can control how network requests are handled.
  • Information can be persisted through the indexedDB.

What do I need to use Service Workers ?

  • Browser Support. You can see the current support here.
  • HTTPS. You need a secure protocol so that the Service Worker can be registered in the browser.

Understanding the life cycle.

Service workers have an independent lifecycle of your Web. Understanding the Service Worker lifecycle will end in delivering an excellent experience to our users.

Source: http://j.mp/2xJiiOQ

Then I explain the states.

  • Install: This is the first event that occurs. Occurs only once per Service Worker. If the promise you call in this event fails, the browser does not discard it and does not let the Service Worker take control of the client.
  • Activate: Once the Service Worker is controlling the client and is ready to use event handling Activate is activated. We could understand how our Service Worker is active.
  • Terminated, Fetch: Once the Service Worker is in control of the pages your Service Worker can be in one of these two states. It is Terminated to save memory, or is doing handling fetch requests.

How to add a Service Worker?

  • Create a javascript file called sw.js and place it in the root of your web project (Normally at the same level as the index.html).
  • Register the Service Worker. to register the Service Worker we must add the following in index.html :
  • if ('serviceWorker' in navigator) {
      window.addEventListener('load', function() {
        navigator.serviceWorker.register('/sw.js').then(function(registration) {
          console.log('SW registered.');
        }, function(err) {
          console.log('Failure:', err);
        });
      });
    }
    
  • If the browser supports it you should see the registered service worker from your developer tool. In my case I see it from the Chrome Developer Tool.

Congratulations you have already given your site the ability to take advantage of the new features of the web, I invite you to enter here and try some strategies to extend your Service Worker. Up to a Next Post 🙂

Liked it? Take a second to support carlosrojaso on Patreon!