Greased Lightning
Sam Beckham
@samdbeckham
How to make your web site load really, really fast, as a progressive web app.
BUY TICKETS TO FRONTEND NE
3G
WiFi
1s
3s
3G
WiFi
0.3s
0.3s
Offline
3G
WiFi
0.3s
0.3s
0.3s
It's a
website
that acts like a
native app
Install to your home screen
Load offline
Receive push notifications
No
'fancy pants'
framework
No
compilation
process
Just a
website
<disclaimer>
It's a
progressive enhancement
It's still a fully functioning website
</disclaimer>
Lighthouse
"Wait, you said no frameworks"
– You, just now
It's just a list
Service worker
Lighthouse
200 when offline
non-javascript content
https
http => https
Fast enough on 3g
Prompted to install the web app
Custom Splash Screen
Themed Address bar
<meta viewport> tag
Sized correctly for the viewport
❌ Service worker
Lighthouse
❌ 200 when offline
✅ non-javascript content
✅ https
✅ http => https
✅ Fast enough on 3g
❌ Prompted to install the web app
❌ Custom Splash Screen
❌ Themed Address bar
✅ <meta viewport> tag
✅ Sized correctly for the viewport
✅
Non-Javascript content
Does it show some content when Javascript is turned off?
✅
Fast enough on 3G
Is it interactive in the first 10s on 3G speeds?
✅
<meta viewport>
tag
<meta
name="viewport"
content="
width=device-width,
initial-scale=1
"
> <meta name="viewport" content="width=device-width,initial-scale=1">✅
Sized correctly for the viewport
❌
✅
✅
https
✅
https
http => https
❌ Service worker
Lighthouse
❌ 200 when offline
❌ Prompted to install the web app
❌ Custom Splash Screen
❌ Themed Address bar
✅ https
✅ http => https
✅ non-javascript content
✅ Fast enough on 3g
✅ <meta viewport> tag
✅ Sized correctly for the viewport
❌
Service worker
💻
🌐
Browser
Server
request
response
💻
🌐
Browser
Server
🐲
Service
Worker
💻
🌐
Browser
Server
🐲
Service
Worker
cat-pic.png
cat-pic.png
💻
🌐
Browser
Server
🐲
Service
Worker
cat-pic.png
if (navigator.serviceWorker) {
navigator.serviceWorker.register(
'/serviceWorker.js', {
scope: '/'
}
);
}Register
./scripts/main.js
self.addEventListener('install', event => {
// What do we want to do on install?
});Install
./serviceWorker.js
self.addEventListener('install', event => {
event.waitUntil(
caches.open('name-of-the-cache')
.then(cache => cache.addAll([
'/assets/scripts/main.js',
'/assets/scripts/forms.js',
'/assets/css/main.css',
'/index.html'
]))
);
});./serviceWorker.js
Install
self.addEventListener('fetch', event => {
// This is where the magic and
// the dragons live.
});./serviceWorker.js
Fetch
self.addEventListener('fetch', event => {
const request = event.request;
event.respondWith(
caches.match(request)
.then(response => {
return response || fetch(request)
})
);
});./serviceWorker.js
self.addEventListener('install', event => {
event.waitUntil(
caches.open('name-of-the-cache')
.then(cache => cache.addAll([
'/assets/scripts/main.js',
'/assets/scripts/forms.js',
'/assets/css/main.css',
'/index.html'
]))
);
});
self.addEventListener('fetch', event => {
const request = event.request;
event.respondWith(
caches.match(request)
.then(response => response || fetch(request))
);
});./serviceWorker.js
✅
Service worker
✅
200 when offline
Lighthouse
❌ Prompted to install the web app
❌ Custom Splash Screen
❌ Themed Address bar
✅ Service worker
✅ 200 when offline
✅ https
✅ http => https
✅ non-javascript content
✅ Fast enough on 3g
✅ <meta viewport> tag
✅ Sized correctly for the viewport
❌
Custom Splash Screen
❌
Themed Address bar
{
"name": "Frontend NE: The Conference",
"short_name": "Frontend NE",
"start_url": "/",
"scope": "/",
"display": "standalone",
"theme_color": "#4A4A4A",
"background_color": "#4A4A4A",
"icons": [{
"src": "/icon.png",
"sizes": "512x512",
"type": "image/png"
}]
}
./manifest.json
<head>
<!-- other head stuff -->
<link rel="manifest" href="/manifest.json">
</head>./yourpage.html
✅
Custom Splash Screen
✅
Themed Address bar
Lighthouse
❌ Prompted to install the web app
✅ Service worker
✅ 200 when offline
✅ https
✅ http => https
✅ Custom Splash Screen
✅ Themed Address bar
✅ non-javascript content
✅ Fast enough on 3g
✅ <meta viewport> tag
✅ Sized correctly for the viewport
❌
Prompted to install the web app
Do literally nothing else
✅
Prompted to install the web app
✅ Service worker
Lighthouse
✅ 200 when offline
✅ https
✅ http => https
✅ Prompted to install the web app
✅ Custom Splash Screen
✅ Themed Address bar
✅ non-javascript content
✅ Fast enough on 3g
✅ <meta viewport> tag
✅ Sized correctly for the viewport
Thanks!
Sam Beckham
@samdbeckham
Slides: https://goo.gl/SPFP1V
BUY TICKETS TO FRONTEND NE
Greased Lightning
By Sam Beckham
