My name is Rafael Fernandes and that's my face.
AdamModus
@AdamModus
https://adammode.xyz
Sup?
That's me!
Rabobank
Technology behind PWAs:
The worst we can do to the user is give him nothing!
We're here for our users so ultimately we should focus on user experience!
Offline first philosophy:
{
"short_name": "Offline survivor",
"name": "Surviving the offline status",
"description": "An example PWA",
"background-color": "#FAFAFA",
"icons": [
{
"src": "imgs/icon/favicon-96x96.png",
"sizes": "96x96",
"type": "image/png"
},
{
"src": "imgs/icon/favicon-144x144.png",
"sizes": "144x144",
"type": "image/png"
},
{
"src": "imgs/icon/favicon-196x196.png",
"sizes": "196x196",
"type": "image/png"
}
],
"start_url": "/index.html",
"display": "standalone"
}
<link rel="manifest" href="manifest.json">
web page
server
SW.js
web page
server
Cache storage (sw cache)
SW.js
web page
server
Cache storage (sw cache)
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
Must be served via HTTPS
It's still all javascript!
Checking availability
Registering a service worker
Yep, it's that easy!
Install
First event, triggered as soon as it executes
Opportunity to start caching before being able to control clients
When old service worker is gone
New service worker is in control
Time to migrate databases / delete old caches
Careful with your scope!
When you really want old service worker gone
It's also possible to force an update via code!
You can detect when you're online and offline!
Services workers aren't the only ones who can access cache storage
The biggest emerging markets do not have widespread high bandwith data (e.g. 4G)
Not everybody has an iMac 8K or a Samsung Galaxy Edge 27 Chrome Edition
We have to make sure it's snappy!
Not your average user
Your average user
VS
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
Making your data smaller
Compress and cache
Gzip text-based assets
Brotli for higher compression ratio
Good build tools (e.g. Webpack):
Look after your image(s)
Include image optimisation in build process
Progressive JPEG - Progressive rendering
WebP is a modern image format that provides superior lossless and lossy compression for images on the web
Lazy load images - Intersection observer
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));
FONTS!
Optimise web fonts - use lightweight woff2
Most browsers don't render text until the font is available
Users have to wait to read text they likely already have
body {
font-family: Arial, sans-serif;
}
body.has-fonts-loaded {
font-family: "My fancy font";
}
someFontLoader
.load('My fancy font')
.then(() => {
document.body.classList.add('has-fonts-loaded');
});
CSS
JS
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;
}
Golden Rule
Inline critical CSS & load the rest async
Critical CSS within first 14kb
Why that number? First round trip data