1 of 35

building blazing fast progressive

web apps

matt busche

​

2 of 35

why a web app?

  • most users don’t download apps!
  • 75% of app downloads are opened once

3 of 35

why a web app?

  • open app store
  • search for app
  • Download HUGE file
  • updates nightly

4 of 35

why a web app?

  • “We don’t care how they got there. We only care that they’re there when we need them.” - Henrik Joreteg
  • starbucks 45 MB vs 533 KB
  • twitter 33 MB vs 644 KB
  • cheaper and easier than making multiple native apps
  • familiar web technologies

​

5 of 35

building a pwa

6 of 35

what is a progressive web app?

  • website
  • works for all users
  • supercharged in modern browsers
  • auto updates
  • no proprietary app stores
  • https

7 of 35

what is a progressive web app?

​

  • service worker
  • fast
  • reliable
  • installable
  • offline support
  • push notifications
  • web app manifest
  • add to home screen

8 of 35

service worker support

9 of 35

what is a service worker

  • thread in the background
  • runs features that don’t need the browser
  • push notifications
  • background sync
    • budget-api
  • network control

10 of 35

11 of 35

key features

  • splash screen
  • instant loading
  • top-level app

12 of 35

key features

  • splash screen
  • instant loading
  • top-level app

13 of 35

index.html

<link rel="manifest" href="/manifest.json">

​

14 of 35

manifest.json

{ "name": "Conference POC",

"short_name": "Conference",

"start_url": "index.html",

"display": "standalone",

"background_color": "#FCD116",

"theme_color": "#000000",

"description": "A POC of a Conference PWA",

"icons": [{

"src": "images/icons/icon-128x128.png",

"sizes": "128x128",

"type": "image/png"

}]

}

​

15 of 35

lighthouse

  • demo
  • conference local live
  • offline

16 of 35

app shell

  • separate data from app shell
  • html, css, javascript needed to�immediately render the interface

17 of 35

install the service worker

  • needs to be in root of application

18 of 35

  • ​

19 of 35

self.addEventListener('install',function(e) { �������});

​

20 of 35

self.addEventListener('install',function(e) { e.waitUntil(� caches.open(cacheName)� .then(function(cache)� � })� );�});

​

21 of 35

self.addEventListener('install',function(e) { e.waitUntil(� caches.open(cacheName)� .then(function(cache)� return cache.addAll(filesToCache);� })� );�});

​

22 of 35

caching techniques

  • network only - most websites
  • cache with network fallback
  • network then cache
    • problem is with li-fi
  • cache then network

23 of 35

cache names and what to cache

24 of 35

web push api

25 of 35

app.js

Notification.requestPermission()

.then(result => {

if (result === 'denied') {

console.log('Permission denied');

return;

}

// User has allowed push notifications

});

​

​

​

​

26 of 35

app.js

// Send PushSubscription details to server

​

getSWRegistration()

.then((registration) => {

const options = { … };

return registration.pushManager

.subscribe(options);

});

​

27 of 35

28 of 35

push.js

// PushSubscription details from client

​

webPush.sendNotification(

pushSubscription,

Payload

);

​

​

​

29 of 35

30 of 35

serviceworker.js

this.addEventListener('push',event => {

var title = 'push message';

event.waitUntil(this.registration

.showNotification(title, {

body: 'message',

icon: 'images/image.png',

tag: 'tag-name'

});

);

});

​

​

​

31 of 35

32 of 35

developer tools

  • chrome://inspect/#service-workers

​

33 of 35

34 of 35

questions?

35 of 35

resources