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

HTML5 Logo

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

App: https://2018.frontendne.co.uk

BUY TICKETS TO FRONTEND NE