Events

Fetch

When a fetch event is triggered by the browser or JavaScript, you can intervene and do whatever you like with the request or response.

Service Workers will not intercept traditional XHR calls (probably better known as AJAX calls).
This is because of synchronous code and SW are ansynchronous.
CHECK THIS!!!!!

self.addEventListener("fetch", event => {
  console.log("[Service Worker] Fetching something ...", event);
  // you can overwrite default response with respondWith
  // now just reply with the fetch result, which can be omitted
  event.respondWith(fetch(event.request));
});

You can, for instance, return a completely different image than requested.

self.addEventListener("fetch", event => {
  console.log("[Service Worker] Fetching something ...", event);
  if (/\.png$/.test(event.request.url)) {
    event.respondWith(fetch("/images/superhero.png"));
  }
});

Polyfills for promises and fetch.
Internet Explorer

Push Notifications

A Service Worker can receive a Web Push Notification send from another server.

Notification Interaction

Triggered when the user interacts with the displayed notification.

Background Synchronization

When a user has a bad internet connection and interacts with your website by sending data through a POST request, this will fail. However, it is possible to store (or queue) these actions and excute it when the connection is established again.

Service Worker Lifecycle

TODO: Combine with intro?