Service Worker

Crash Course

Rafael Fernandes

AdamModus

@AdamModus

https://adammode.xyz

Boas pessoal!

Amsterdam

That's me!

Rabobank

Agenda

  • What are service workers
  • Philosophy behind service workers
  • Service worker life cycle
  • Service worker updates
  • Last minute special: state changes
  • After class extras
  • Q&A

Service Workers?

Has its own thread (remember web workers?)

No DOM access!

Caching

Versioning

Allows offline functionality

Able to intercept fetch requests

Useful in slow connectivity scenarios / li-fi

It's still all javascript!

Service Workers?

web page

server

Service Workers?

And why should I care?

The worst we can do to the user is give him nothing!

Service Workers?

SW.js

web page

server

Cache storage (sw cache)

Service Workers?

SW.js

web page

server

Cache storage (sw cache)

Philosophy time!

Philosophy time!

  • Get as much resources as possible cached on the browser and cache new assets in real time
  • Cached information is better than nothing or waiting ages for a slow network
  • The user is happy in all scenarios:
    • Online
    • Offline
    • Li-fi

Offline first philosophy:

Service Worker life cycle

Checking availability

Service Worker life cycle

Registering a service worker

Yep, it's that easy!

Service Worker life cycle

Careful with your scope!

Service Worker life cycle

First install diagram

Service Worker life cycle

Install

First event, triggered as soon as it executes

Once per service worker

Opportunity to start caching before being able to control clients

The promise passed to event.waitUntil() tells the browser when instalation is successful

If promise rejects, install has failed and service worker is thrown away :(

Service Worker life cycle

Install

Service Worker life cycle

Activate

Ready to control clients

Does not guarantee that the page that called .register() will be controlled

If a page loads without a service worker, neither will its sub-resources. If you load a second time though, fetch events will be intercepted.

Handle push and sync

Service Worker life cycle

Activate

Life cycle on updates

What about service worker updates?

Life cycle on updates

Cool diagram!

Life cycle on updates

Install

Will be triggered after version has changed

Allows to set up a new cache without overwriting current one, which the "old" service worker is using

Some cache might not be version specific (avatars, logo, etc.)

Life cycle on updates

Waiting

Activation is delayed until existing service worker no longer controls clients

Guarantees only one version of the service worker is running

Refreshing might not be enough.

The current page doesn't go away until the response headers have been received, and even if response has a Content-Disposition header.

Similar to how Chrome updates.

Life cycle on updates

Activate

When old service worker is gone

New service worker can control clients

Time to migrate databases / clear caches

Please do delete old caches!

Lifecycle extra points

Skipping the waiting phase

When old service worker is gone

New service worker can control clients

Lifecycle extra points

Updating... Manually?  ¯\_(⊙︿⊙)_/¯

It's also possible to force an update via code!

Last minute special!

Callbacks for state changes

 

Client finding when the controller has changed

Last minute special!

After class extras - I

You can detect when you're online and offline!

After class extras - II

Readable streams - the new boy on the block:​​​​​

 

Browsers are already pretty good at interpreting streams

 

Streaming HTML, in collusion with best practices (e.g. inline CSS) can drastically increase First Meaningful Paint time

 

Useful gist: https://gist.github.com/jakearchibald/64e26e7a1d9b06b3fa3ec0383f2b1f91

After class extras - III

IndexedDB - a database on your browser!​​​​​

 

  • A good alternative for bad local storage abuses
  • You can perform CRUD operations
  • You can set a data schema and add indexes to perform fast queries
  • Also supports upgrades
  • And it works when you're offline!

After class extras - IV

Services workers aren't the only ones who can access​​​​​ cache storage

A bit of (shameless)

self promotion

Progressive Web App experiment available at:

https://github.com/AdamModus/offline-todo-list

The last slide, phew!

OK, I'll shut up now.

Unless, maybe...

Questions?

Copy of Service Worker Crash Course - Upfront

By ajrkemp

Copy of Service Worker Crash Course - Upfront

  • 784