Greased Lightning

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

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 oﬄine 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 oﬄine ✅ 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

✅ Sized correctly for the viewport

❌ ✅

✅ https http => https

❌ Service worker Lighthouse ❌ 200 when oﬄine ❌ 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 oﬄine ✅ 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>  <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 oﬄine ✅ 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 oﬄine ✅ 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: App: https://goo.gl/SPFP1V https://2018.frontendne.co.uk

BUY TICKETS TO FRONTEND NE

Greased Lightning

Greased Lightning

More Decks by Frontend NE

Other Decks in Technology

Featured

Transcript