Introduced me to the concept of service workers and how to install them. An extra nugget is the way that Jeremy explains JavaScript in general, he takes it down to a level so that I could grasp some of its core concepts in a much deeper way than previously. Bravo!

#The internet and the web are two different things

We often say the “internet” or the “web” interchangeably. The truth is the World Wide Web is only one application running on the internet. Email, for instance, is another application which uses the internet.

#The web vs other technologies

There is always a contemporary technology which is trying to kill off the web.

Native apps is the latest in a row trying to make the web look like an underachiever. Previously it was Flash and CD-ROMs that delivered richer experiences, but they were black boxes and faded away. But each of those technologies proved useful for the expansion of web standards.

Flash functioned almost as the R&D department for web standards. With it came native video and smooth animations. The power of the web are URLs.

#Technical details of a service worker

  • A service worker has no access to the DOM. A service worker is an entirely separate process that can run in parallel with DOM rendering scripts. The service worker has access to the inner fundamentals of the browser.
  • Thanks to service workers you can leave instructions to the browser before the request is even sent. When the service worker is run, there is no document yet. Hence why it has no access to the DOM. A service worker is somewhat like a cookie, and somewhat like a virus, and somewhat like a toolbox.
  • A service worker gets access to the Fetch API, the one that the browser uses to fetch resources and assets for a website.

#Scope for service workers

The scope of the service worker is derived depending on where you put your service worker script file. If you put it in root it will scope your whole project.

But you can also put in a sub-level folder and let it take care only of that part of your application.

The best is to put your service worker files at the root level of your site. Then it can handle the full scope of your site.

#Prerequisites for service workers

  • Your website needs HTTPS in order to install a service worker. The only exception is that service workers can be used on localhost (for debugging purposes.)
  • A service worker is applied as a layer on top of your existing functionality. It doesn’t replace anything. That’s why it is an enhancement.

#HTML vs DOM

HTML is only the thing that you author: the documents you write. DOM is what the web browser turns that HTML into. The browser is not serving HTML, it’s serving a DOM. The Document Object Model (DOM) is a representation of what the browser is rendering.

#The lifecycle of a service worker

The life of a service worker happens in four steps:

  1. Registration
  2. Download
  3. Installation
  4. Activation

When the service worker has been activated, every request to your site will be routed through the service worker.

The lifecycle of an updated service worker is more like this:

  1. Download
  2. Install
  3. Wait
  4. Activate

#HTTP cache

  • The HTTP cache is the browser’s longer-lasting store.
  • Files that are stored can be retrieved days, weeks or years later.
  • But it’s not good to use caching for web pages since they become stale.
  • The instructions for the HTTP cache is done through the HTTP Headers.
  • The server can instruct the browser how long the files should be cached.
  • There is a successor to HTTP cache called The Cache API

#The Cache API

  • The Cache API gives you access to the lower-level features of the browser.
  • Think of the Cache API as an enhancement on the HTTP cache, not a replacement.
  • While the HTTP cache gives you one big cache for everything, the Cache API allows you to create separate caches and fine-tune it much more.
  • With the Cache API you’ll take care of versioning of cached files within the service worker itself.

#Offline First

A design pattern for “cache first, then network”.

But it’s still not a fully offline experience: before you can get the offline experience, your users must have visited your site once.

The offline first approach treats the network itself as an enhancement.

There are recurring patterns for how to work with service workers:

  • Use if statements to test for certain conditions.
  • Look for files in the caches.
  • Fetch files from the network.
  • Put copies of files into a cache.

#Async functions

  • Thanks to the magic keyword async you can write code that looks sequential and cleaner, even when sending back promises.
  • This makes nesting less of a hassle.

#Coining terms for technologies

Things becomes easier to talk about when it gets a name. It’s usually at this phase that technologies take off.

  • In 2004 web developers started using techniques to update parts of a web page, it became much easier when it was later coined as ajax.
  • Or in 2010, when Ethan Marcotte introduced responsive web design, and sparked a whole movement.
  • The same thing happened again in 2015 with progressive web apps, it’s all about marketing.