Greased Lightning
![](https://s3.amazonaws.com/media-p.slid.es/uploads/samdbeckham/images/1254654/me.jpeg)
Sam Beckham
@samdbeckham
How to make your web site load really, really fast, as a progressive web app.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/266886/images/3678757/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/266886/images/3678736/logo--blue.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/266886/images/4041727/2018.frontendne.co.uk-_Nexus_5X_.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/266886/images/4041739/2018.frontendne.co.uk-_iPad___3_.png)
BUY TICKETS TO FRONTEND NE
![](https://s3.amazonaws.com/media-p.slid.es/uploads/266886/images/4041727/2018.frontendne.co.uk-_Nexus_5X_.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/266886/images/4041727/2018.frontendne.co.uk-_Nexus_5X_.png)
3G
WiFi
1s
3s
![](https://s3.amazonaws.com/media-p.slid.es/uploads/266886/images/4041727/2018.frontendne.co.uk-_Nexus_5X_.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/266886/images/4041727/2018.frontendne.co.uk-_Nexus_5X_.png)
3G
WiFi
0.3s
0.3s
![](https://s3.amazonaws.com/media-p.slid.es/uploads/266886/images/4041727/2018.frontendne.co.uk-_Nexus_5X_.png)
Offline
![](https://s3.amazonaws.com/media-p.slid.es/uploads/266886/images/4058306/data-text-html_chromewebdata_Nexus_5X_.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/266886/images/4041727/2018.frontendne.co.uk-_Nexus_5X_.png)
3G
WiFi
0.3s
0.3s
0.3s
![](https://s3.amazonaws.com/media-p.slid.es/uploads/266886/images/4041727/2018.frontendne.co.uk-_Nexus_5X_.png)
It's a
website
that acts like a
native app
Install to your home screen
Load offline
Receive push notifications
![](https://s3.amazonaws.com/media-p.slid.es/uploads/266886/images/4090769/javascript.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/266886/images/4090771/css3.png)
No
'fancy pants'
framework
No
compilation
process
Just a
website
<disclaimer>
![](https://s3.amazonaws.com/media-p.slid.es/uploads/266886/images/4089849/drake.png)
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://s3.amazonaws.com/media-p.slid.es/uploads/266886/images/4041727/2018.frontendne.co.uk-_Nexus_5X_.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/266886/images/4090780/2018.frontendne.co.uk-_Nexus_5X_.png)
❌
✅
✅
https
✅
https
http => https
![](https://s3.amazonaws.com/media-p.slid.es/uploads/266886/images/4090775/lets-encrypt.png)
❌ 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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/266886/images/4090785/cat.gif)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/266886/images/4090785/cat.gif)
💻
🌐
Browser
Server
🐲
Service
Worker
cat-pic.png
![](https://s3.amazonaws.com/media-p.slid.es/uploads/266886/images/4090785/cat.gif)
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/266886/images/4098553/twotter.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/266886/images/4090780/2018.frontendne.co.uk-_Nexus_5X_.png)
❌
Themed Address bar
![](https://s3.amazonaws.com/media-p.slid.es/uploads/266886/images/4098483/Screenshot_1504631621.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/266886/images/4098484/Screenshot_1504631639.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/266886/images/4098482/Screenshot_1504631594.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/266886/images/4098480/Screenshot_1504631581.png)
{
"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!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/samdbeckham/images/1254654/me.jpeg)
Sam Beckham
@samdbeckham
Slides: https://goo.gl/SPFP1V
BUY TICKETS TO FRONTEND NE
Greased Lightning
By Sam Beckham
Greased Lightning
- 2,785