Description

Improved experience for returning visitors.

"you have granular control over everything."

-mozilla

"functionality that would normally require a native application—are coming to the web."

-google

"I'm biased, but I think ServiceWorker changes the scope of the web more than any feature since XHR."

-Jake Archibald (google chrome)

Quotes

• Development started before May 2014
• Replacement for AppCache
• a user centred technology
• API provided by Browser (Navigator object)
• "made for" Offline First strategy

Technical Background

Performance

• performance enhancements by pre-fetching resources
  prefetch data for next article pages your user probably visits
• reducing network request for chosen assets
  cache first approach
• service worker is fully async / a not blocking resource
  it's not part of your DOM manipulating JS
• load balancing possibility
  load from desired server

Offline

• acts as a proxy server between App and Browser
  no network connection needed
• provide a customised offline fallback experience.
  such as offline pages similar to 404 pages
• granular cache control to control how App behaves
  control how google analytics can work while offline

most useful for mobile devices!

Progressive Web App's

Using a service worker is great to build PWA's

• Connectivity independent
• App-like - functionality is separated from content
• Fast and Fresh - keeps data in sync
• Engaging - via Push Notifications

not direct part of the Service Worker:

Progressive & Responsive, Native Features, Linkable, Installable

more

there are more and more possibilities

Sir Wiz

source

common example

Registration

A Service Worker needs to get initially registered inside your favorite JS file.

Wether on a whole origin or inside a subset / the scope.

if ('serviceWorker' in navigator) {
    navigator.serviceWorker
             .register('./service-worker.js')
             .then(function() { console.log('Service Worker Registered'); });
}

if ('serviceWorker' in navigator) {
    navigator.serviceWorker
             .register('./blog/service-worker.js')
             .then(function() { console.log('SW Registered for Blog pages'); });
}

progressive enhancement!

Install

1. Download

once registered the service worker gets downloaded

var cacheName = 'myFilesToCache-v1';
var filesToCache = [
    './',
    './index.html',
    './scripts/app.js',
    './inline.css',
    './images/wind.png'
  ];

self.addEventListener('install', function(e) {
  console.log('[ServiceWorker] Install');

  e.waitUntil(
    caches.open(cacheName).then(function(cache) {
        console.log('[ServiceWorker] Caching app shell');
        return cache.addAll(filesToCache);
    })
  );
});

2. Install

once installed the SW adds files to cache

Activate

3. Activate

used to remove old caches

old caches will get identified by the name of the new cache

- source mozilla

e.g. `fetch` event listener can store by JS fetched resources.

Browser

- source caniuse.com

Needs to be added as progressive enhancement!

Check jakearchibald.github.io/isserviceworkerready/ for details.

JavaScript

Service Worker makes usage of JS promises.

So ES6 is mandatory!

But as seen before, all browsers supporting service worker

are already supporting ES6 too. 

HTTPS

Because of security reasons service worker

will just run on sites delivered over HTTPS.

Development on http://localhost will work.

It's considered to be a "secure origin".

Cache Limitation

Storage is limited by browser's

Cache or Quota API.

-- source google

Scope

A single service worker can control many pages. Each time a page within your scope is loaded, the service worker is installed against that page and operates on it.

-- mozilla

example:

https://inviqa.com/blog/

could have a second SW running for

pre-fetching first 5 blog entry sites

User centred

A Service Worker stays active until all Tabs or Windows with your Web App are closed.

Once the user freshly re-opens your Web App a new Service Worker can get active.

This is to prevent user's data corruption or other bad impacts the user could experience while browsing on your site.

Waiting

A new cache is opened on SW's install event when there is an incremented version number or different cache naming.

var cacheName = 'weatherPWAs-v6';

The new SW has to wait.

Info

Cache is shared between all open Tabs.

in Chrome

in Chrome

• clear cache storage
• try offline
• update on reload!
• [cmd + shift + r] works fine too

in Firefox

is also possible:

https://hacks.mozilla.org/2016/03/debugging-service-workers-and-push-with-firefox-devtools/

Obsolete

https://github.com/GoogleChromeLabs/sw-toolbox

https://github.com/GoogleChromeLabs/sw-precache

Workbox

https://developers.google.com/web/tools/workbox/

npm install workbox-cli --global

Already working fine with:

Workbox Node example

module.exports = {
    "globDirectory": "./",
    "globPatterns": [
        "site/templates/css/style.min.css",
        "site/templates/js/build/production.min.js",
        "site/templates/fonts/**/*.{eot,svg,ttf,woff}"
    ],
    "swDest": "sw.js",
    "clientsClaim": true,
    "skipWaiting": true
};

 and generate with

workbox generate:sw

Your workbox-cli-config.js file:

Workbox Gulp example

gulp.task('generate-service-worker', () => {
    return workbox.generateSW({
        globDirectory: buildDir,
        globPatterns: ['**\/*.{png,css,js,svg,jpg,json}'],
        swDest: buildDir+`/sw.js`,
        clientsClaim: true,
        skipWaiting: true
    }).then(() => {
        console.info('Service worker generation completed.');
    }).catch((error) => {
        console.warn('Service worker generation failed: ' + error);
    });
});