Leverage the Power of Native
with Progressive Web Apps
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
slides.today
to follow along with today’s slides
What?
What Are PWAs?
Great web apps...
Fast
HTTPS
Responsive
What Are PWAs?
...with native benefits
Great web apps...
pwa.rocks
Why?
Why Are PWAs Awesome?
Why Are PWAs Awesome?
Why Are PWAs Awesome?
Why Are PWAs Awesome?
How?
pwa.sprinkle.space
pwa.sprinkle.space
Service Workers
Service Workers
app.js
// registering a service worker
navigator.serviceWorker
.register('serviceworker.js')
.then(registration => {
console.log('Registered');
});
serviceworker.js
// registering a service worker
this.addEventListener('install', event => {
console.log('Installed');
});
https://developers.google.com/web/fundamentals/primers/service-worker/service-worker-lifecycle
https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers
Caching
App Shell
The HTML, CSS, and JavaScript needed to immediately render the interface.
serviceworker.js
const CACHE_VERSION = 'v1';
const APP_LAYOUT_FILES = [
'/',
'/js/app.js',
'/js/material.min.js',
'/css/material.blue-red.min.css'
];
serviceworker.js
this.addEventListener('install',event => {
let waitPromise = caches.open(CACHE_VERSION)
.then(cache => {
return cache.addAll(APP_LAYOUT_FILES);
});
event.waitUntil(waitPromise);
});
Offline Data
Service Workers can use the `fetch` event to intercept app network requests.
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);
});
Caching Strategies
https://workboxjs.org
JavaScript Libraries for Progressive Web Apps
Dev Tools Application
Web Push API
https://developers.google.com/web/fundamentals/engage-and-retain/push-notifications/how-push-works
app.js
Notification.requestPermission()
.then(result => {
if (result === 'denied') {
console.log('Permission denied');
return;
}
// User has allowed push notifications
});
app.js
getSWRegistration()
.then((registration) => {
const opts = { userVisibleOnly: true,
applicationServerKey: … };
return registration.pushManager
.subscribe(opts);
});
// Send PushSubscription details to server
https://developers.google.com/web/fundamentals/engage-and-retain/push-notifications/how-push-works
server.js
// PushSubscription details from client
webPush.sendNotification(
pushSubscription,
Payload
);
https://developers.google.com/web/fundamentals/engage-and-retain/push-notifications/how-push-works
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);
});
Manifest
index.html
<link rel="manifest" href="/manifest.json">
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"
}
]
{
}
https://brucelawson.github.io/manifest/
Lighthouse
When?
Browser Support
👍 Chrome
👍 Firefox
👍 Opera
🚧 Edge
👎 Safari
64%
global browser usage
http://caniuse.com/#feat=serviceworkers (Jul 2017)
What about the other
36%?
Safari
Push Notifications
ApplicationCache
Edge
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’);
}
}
When?
Now!
Resources
GDG Madison
July 20th
Rachael O’Meara
gdgmadison.com
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
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