1 of 63

Leverage the Power of Native

with Progressive Web Apps

2 of 63

Who are we?

Abraham Williams

Senior Engineer at Bendyworks

Google Developer Expert

Google Developer Group Organizer

Pearl Latteier

Senior Engineer at Bendyworks

PhD from UW-Madison

Google Developer Group Organizer

3 of 63

slides.today

to follow along with today’s slides

4 of 63

What?

5 of 63

What Are PWAs?

Great web apps...

  • Fast
  • Secure
  • Responsive

6 of 63

Fast

  • 60fps animations
  • Jank free
  • 3-second meaningful paint

7 of 63

HTTPS

  • Required for new JavaScript APIs
  • Protects the integrity of your website
  • Protects the privacy and security of your users

8 of 63

Responsive

9 of 63

What Are PWAs?

...with native benefits

  • Installable
  • Offline
  • Engaging

Great web apps...

  • Fast
  • Secure
  • Responsive

10 of 63

pwa.rocks

11 of 63

Why?

12 of 63

Why Are PWAs Awesome?

  • Cheaper and easier than making multiple native apps

13 of 63

Why Are PWAs Awesome?

  • Cheaper and easier than making multiple native apps
  • Built with familiar web technologies

14 of 63

Why Are PWAs Awesome?

  • Cheaper and easier than making multiple native apps
  • Built with familiar web technologies
  • Improve user experience on spotty connections

15 of 63

Why Are PWAs Awesome?

  • Cheaper and easier than making multiple native apps
  • Built with familiar web technologies
  • Improve user experience on spotty connections
  • Reach out of the web to engage users

16 of 63

How?

17 of 63

pwa.sprinkle.space

18 of 63

pwa.sprinkle.space

19 of 63

Service Workers

20 of 63

Service Workers

  • Cache app layout resources
  • Intercept network requests
  • Handle push notifications

21 of 63

app.js

// registering a service worker

navigator.serviceWorker

.register('serviceworker.js')

.then(registration => {

console.log('Registered');

});

22 of 63

serviceworker.js

// registering a service worker

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

console.log('Installed');

});

23 of 63

https://developers.google.com/web/fundamentals/primers/service-worker/service-worker-lifecycle

24 of 63

https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers

25 of 63

Caching

26 of 63

App Shell

The HTML, CSS, and JavaScript needed to immediately render the interface.

27 of 63

serviceworker.js

const CACHE_VERSION = 'v1';

const APP_LAYOUT_FILES = [

'/',

'/js/app.js',

'/js/material.min.js',

'/css/material.blue-red.min.css'

];

28 of 63

serviceworker.js

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

let waitPromise = caches.open(CACHE_VERSION)

.then(cache => {

return cache.addAll(APP_LAYOUT_FILES);

});

event.waitUntil(waitPromise);

});

29 of 63

Offline Data

Service Workers can use the `fetch` event to intercept app network requests.

30 of 63

serviceworker.js

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

let responsePromise = caches.match(event.request)

.then(response => {

if (response) { return response; }

return fetch(event.request)

.then(response => {

return response;

});

});

event.respondWith(responsePromise);

});

31 of 63

Caching Strategies

  • Cache only
  • Cache first, network fallback
  • Cache first and network update
  • Network only
  • Network first, cache fallback

32 of 63

https://workboxjs.org

JavaScript Libraries for Progressive Web Apps

33 of 63

Dev Tools Application

34 of 63

Web Push API

35 of 63

https://developers.google.com/web/fundamentals/engage-and-retain/push-notifications/how-push-works

36 of 63

app.js

Notification.requestPermission()

.then(result => {

if (result === 'denied') {

console.log('Permission denied');

return;

}

// User has allowed push notifications

});

37 of 63

app.js

getSWRegistration()

.then((registration) => {

const opts = { userVisibleOnly: true,

applicationServerKey: … };

return registration.pushManager

.subscribe(opts);

});

// Send PushSubscription details to server

38 of 63

https://developers.google.com/web/fundamentals/engage-and-retain/push-notifications/how-push-works

39 of 63

server.js

// PushSubscription details from client

webPush.sendNotification(

pushSubscription,

Payload

);

40 of 63

https://developers.google.com/web/fundamentals/engage-and-retain/push-notifications/how-push-works

41 of 63

serviceworker.js

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

let title = 'Push message';

let waitPromise = this.registration

.showNotification(title, {

body: 'The Message',

icon: 'images/icon.png',

tag: 'my-tag'

});

event.waitUntil(waitPromise);

});

42 of 63

Manifest

43 of 63

index.html

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

44 of 63

manifest.json

"name": "Sprinkle PWA Demo",

"short_name": "Sprinkle",

"description": "Example PWA",

"start_url": "/",

"background_color": "#2196f3",

"theme_color": "#2196f3",

"display": "standalone",

"icons": [

{

"src": "/icons/gallery-256x256.png",

"sizes": "256x256",

"type": "image/png"

}

]

{

}

45 of 63

https://brucelawson.github.io/manifest/

46 of 63

47 of 63

48 of 63

49 of 63

50 of 63

Lighthouse

51 of 63

When?

52 of 63

Browser Support

👍 Chrome

👍 Firefox

👍 Opera

🚧 Edge

👎 Safari

53 of 63

64%

global browser usage

http://caniuse.com/#feat=serviceworkers (Jul 2017)

54 of 63

What about the other

36%?

55 of 63

Safari

Push Notifications

  • Desktop only
  • Proprietary
  • https://developer.apple.com/notifications/safari-push-notifications/

ApplicationCache

  • Deprecated
  • Problematic
  • https://mdn.io/using_the_application_cache

56 of 63

Edge

57 of 63

app.js

// Be progressive: check for support

if(‘serviceWorker’ in navigator) {

console.log(‘Yay! Service Workers’);

if(‘PushManager’ in window) {

console.log(‘Also Push API’);

}

}

58 of 63

When?

59 of 63

Now!

60 of 63

Resources

  • https://developers.google.com/web/progressive-web-apps/
  • https://developers.google.com/web/progressive-web-apps/checklist
  • https://developer.mozilla.org/en-US/Apps/Progressive
  • https://developers.google.com/web/tools/lighthouse/
  • https://serviceworke.rs/
  • https://workboxjs.org/
  • https://developer.mozilla.org/en-US/docs/Web/API/Push_API
  • https://developer.mozilla.org/en-US/docs/Web/Manifest
  • https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
  • https://msdn.microsoft.com/en-us/library/hh772406(v=vs.85).aspx
  • https://codelabs.developers.google.com/?cat=Web
  • http://caniuse.com/
  • https://slides.today ⇐ these slides

61 of 63

GDG Madison

July 20th

Rachael O’Meara

gdgmadison.com

62 of 63

We design and build software that stands the test of time, specializing in Ruby on Rails, JavaScript, Clojure, and Ionic.

Craft a project with us at bendyworks.com

63 of 63

Find today’s slides at slides.today

Pearl Latteier

pearl@bendyworks.com

twitter.com/pblatteier

github.com/pearlbea

Abraham Williams

abraham@bendyworks.com

twitter.com/abraham

github.com/abraham