PWA? WTF?

Technology behind PWAs:

• Service Workers - It enables asset caching and background tasks
• IndexedDB - A database in the browser
• LocalStorage - A place to store small amounts of data in the browser
• Mobile sensors API - Interface hardware directly: touch, mic, camera, motions, vibration, location, etc...
• Web App Manifest - To add the PWA to the home screen and provide some more immersive experience
• Web workers - Multi-threading possibilities

Philosophy time!

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

Philosophy time!

• Cached your assets, even in real time
• Cached information is better than nothing, users are happier in all scenarios: Online / Offline / Li-fi
• Think about multiple form factors
• Accessibility is very relevant
• Check your performance measures

We're here for our users so ultimately we should focus on user experience!

Offline first philosophy:

Service Worker FTW

SW.js

web page

server

Cache storage (sw cache)

SW.js

web page

server

Cache storage (sw cache)

Service Worker FTW

Checking availability

or

https://jakearchibald.github.io/isserviceworkerready

Service Worker FTW

Registering a service worker

Yep, it's that easy!

Service Worker FTW

Install

First event, triggered as soon as it executes

Opportunity to start caching before being able to control clients

Service Worker FTW

Activate

When old service worker is gone

New service worker is in control

Time to migrate databases / delete old caches

Service Worker FTW

Careful with your scope!

Service Worker FTW

Skipping the waiting phase

When you really want old service worker gone

Service Worker FTW

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

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

Service Worker FTW

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

Service Worker FTW

P is for Performance!

Useful websites for your reference:

whatdoesmysitecost.com - Know how much your website costs in a metered data connection

webpagetest.org - Test your website from all around the world plus some useful insights

Google PSI - (Page Speed Insigths) Extremely useful tool to find low hanging fruit

Google Lighthouse - Runs audits for performance, accessibility and PWAs. Can be used as a Chrome Extension or a Node module

P is for Performance!

Look after your image(s)

// create observer
const observer = new IntersectionObserver(onChange);

function onChange(changes) {
	changes.forEach(change => {
	    // take image url from `data-src` attribute
	    change.target.src = change.target.dataset.src;

	    // stop observing the current target
	    observer.unobserve(change.target);
  	});
}

// convert node list to array
const imgs = [ ...document.querySelectorAll('.lazy') ];

// observe each image
imgs.forEach(img => observer.observe(img));

P is for Performance!

FONTS!

Most browsers don't render text until the font is available

Users have to wait to read text they likely already have

@font-face {
  font-family: MySuperDuperFont;
  src: url(/path/to/fonts/MySuperDuperFont.woff) format('woff'),
       url(/path/to/fonts/MySuperDuperFont.eot) format('eot');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}