The Hitchhiker's Guide to Building a Progressive Web App

THE HITCHHIKER’S GUIDE TO
BUILDING A PROGRESSIVE WEB APP
Chris Nguyen
@uncompiled

https://pwa.rocks

SOURCE: https://pokedex.org
POKEDEX.ORG

PROGRESSIVE WEB APPS
● Progressive
● Responsive
● Linkable
● Fresh
● App-like
● Safe
● Discoverable
● Installable
● Re-engageable
● Connectivity independent
SOURCE: https://developers.google.com/web/fundamentals/getting-started/your-first-progressive-web-app/

✓ Progressive
● Responsive
● Linkable
● Fresh
● App-like
● Safe
● Discoverable
● Installable
● Re-engageable

✓ Progressive
✓ Responsive
● Linkable
● Fresh
● App-like
● Safe
● Discoverable
● Installable
● Re-engageable

@slightlylate: "URLs are the web's superpower." #chromedevsummit

✓ Progressive
✓ Responsive
✓ Linkable
● Fresh
● App-like
● Safe
● Discoverable
● Installable
● Re-engageable

FRESH
CREDIT: http://www.slashfilm.com

✓ Progressive
✓ Responsive
✓ Linkable
✓ Fresh
● App-like
● Safe
● Discoverable
● Installable
● Re-engageable

APP-LIKE
● Familiar interface
● Fast screen transitions
● Smooth scrolling
● Feels native
SOURCE: https://app.ft.com

✓ Progressive
✓ Responsive
✓ Linkable
✓ Fresh
✓ App-like
● Safe
● Discoverable
● Installable
● Re-engageable

SAFE
● Must be served using HTTPS
● Prevents snooping or MITM attacks
● Privacy and security for users

White House OMB Memorandum 15-13
SOURCE: https://https.cio.gov

✓ Progressive
✓ Responsive
✓ Linkable
✓ Fresh
✓ App-like
✓ Safe
● Discoverable
● Installable
● Re-engageable

WEB APPLICATION MANIFEST
{
"name": "My Web Application",
"short_name": "My App",
"description": "A Simple Progressive Web App",
"icons": [
...
{
"src": "launcher-icon-4x.png",
"sizes": "192x192",
"type": "image/png"
}
],
"start_url": "/index.html",
"display": "standalone",
"orientation": "portrait"
}
<link rel="manifest" href="/manifest.json">

✓ Progressive
✓ Responsive
✓ Linkable
✓ Fresh
✓ App-like
✓ Safe
✓ Discoverable
● Installable
● Re-engageable

INSTALLABLE
CREDIT: https://xkcd.com/1367/

INSTALLABLE
● Multiple visits
trigger prompt
● Low friction
● No app store
SOURCE: https://www.devfestdc.rocks

✓ Progressive
✓ Responsive
✓ Linkable
✓ Fresh
✓ App-like
✓ Safe
✓ Discoverable
✓ Installable
● Re-engageable

https://gauntface.github.io/simple-push-demo/

✓ Progressive
✓ Responsive
✓ Linkable
✓ Fresh
✓ App-like
✓ Safe
✓ Discoverable
✓ Installable
✓ Re-engageable

MOBILE NETWORKS ARE UNRELIABLE
● LTE service isn’t always LTE
● Mobile devices constantly transfer between
antennas, 3G, LTE, and Wi-Fi
● Slow response is worse than fast connection
failure
SOURCE: https://hpbn.co

LATENCY: THE NEW WEB PERFORMANCE BOTTLENECK
SOURCE: https://www.igvita.com/2012/07/19/latency-the-new-web-performance-bottleneck/

MOBILE-FIRST WEB DEVELOPMENT
● Responsive Web Design
○ Addresses the mobile user interface
● Service Worker API
○ Addresses the mobile network
● Design for slow mobile devices and slow networks
○ It’ll be ⚡ on high-end phones and fast networks

SERVICE WORKER
● Client-side programmable network proxy
● Registered against a domain & path
○ www.devfestdc.org != images.devfestdc.org
○ www.devfestdc.org != www.devfestdc.org/js
● Intercept network requests
● Gives developers control of network failure

OFFLINE SUPPORT
(USING A SERVICE WORKER)

DEVFESTDC.ORG: INSTALL SERVICE WORKER
● Register a service worker for www.devfestdc.org
● Install at root scope (“/”) so it can handle the entire site
if('serviceWorker' in navigator) {
navigator.serviceWorker
.register('/sw.js')
.then(function() { console.log('Service Worker Registered'); });
}

DEVFESTDC.ORG: CACHE ASSETS
● Inside “/sw.js”, cache all the assets
● Include all HTML, CSS, and JS required to load the site
self.addEventListener('install', function(event) {
event.waitUntil(
caches.open('devfestdc-static-v1').then(function(cache) {
return cache.addAll(['/index.html', '/js/all.min.js', ... /* etc */ ]);
});
);
});

DEVFESTDC.ORG: RESPOND WITH CACHED ASSETS
● Inside “/sw.js”, add fetch event listener
● Respond to requests for static assets using cache
self.addEventListener('fetch', function(event) {
event.respondWith(caches.open('devfestdc-static-v1').then(function(cache) {
cache.match(event.request).then(function(response) {
return response || fetch(event.request);
});
}));
});

YEAH! IT WORKED!
(BUT SHOULD WE DO IT?)

MANAGING CACHES
● Static assets (HTML/CSS/JSS) should be optimized for caching
● If we change “/schedule-day-2/”, we need to update the cache:
caches.open('devfestdc-static-v1')
● Hard to maintain

SW-PRECACHE
https://github.com/GoogleChrome/sw-precache

PRECACHE STATIC ASSETS
● sw-precache is a node module for generating a service worker that pre-caches
resources at build time
● Can be integrated into Gulp, Grunt, Webpack or CLI-based build scripts
● Install: npm install sw-precache --save-dev

PRECACHE STATIC ASSETS
● Run sw-precache at build time
● Gulp task outputs “/sw.js”:
gulp.task('generate-service-worker', function(callback) {
var swPrecache = require('sw-precache');
swPrecache.write('build/sw.js'), {
staticFileGlobs: [app/**/*.{js,html,css,png,jpg,gif,svg,eot,ttf,woff}']
}, callback);
});

THE WAY TO PWA
AN INCREMENTAL APPROACH

WEB APPLICATION MANIFEST
{
"name": "DevFestDC 2016",
"short_name": "DevFestDC",
"icons": [
...
{
"src": "launcher-icon-4x.png",
"sizes": "192x192",
"type": "image/png"
}
],
"start_url": "index.html",
"display": "standalone",
"orientation": "portrait"
}
<link rel="manifest" href="/manifest.json">

APP-SHELL ARCHITECTURE
● App shell is the minimal HTML, CSS, and JavaScript
required to render the user interface
● Its first load should be extremely quick, then
immediately cached (sw-precache)
SOURCE: https://www.devfestdc.rocks/

PRPL PATTERN
● Push critical resources for the initial route
● Render initial route (as fast as possible)
● Pre-cache remaining routes
● Lazy-load and create remaining routes on demand
SOURCE: https://www.polymer-project.org/1.0/toolbox/server

SW-TOOLBOX
https://github.com/GoogleChrome/sw-toolbox

RUN-TIME CACHING
● sw-toolbox provides handlers for common caching
patterns that are useful during run-time:
○ toolbox.cacheFirst
○ toolbox.networkFirst
○ toolbox.fastest
● sw-precache can configure and include sw-toolbox
SOURCE: https://github.com/GoogleChrome/sw-toolbox

LIGHTHOUSE
https://github.com/GoogleChrome/lighthouse

AUDIT PROGRESS
● lighthouse audits Progressive Web Apps
● Uses the Chrome Debugging Protocol
● Helps find problems during development
● Available from npm or as Chrome Extension
● github.com/GoogleChrome/lighthouse

● PWAs are still websites
● Progressively enhanced
● Mobile-first & offline-first
● https://www.devfestdc.rocks/
● github.com/GoogleChrome/sw-toolbox
● github.com/GoogleChrome/sw-precache
● github.com/GoogleChrome/lighthouse
Chris Nguyen
@uncompiled

The Hitchhiker's Guide to Building a Progressive Web App

Recommended

More Related Content

What's hot (20)

Similar to The Hitchhiker's Guide to Building a Progressive Web App (20)

Recently uploaded (20)

The Hitchhiker's Guide to Building a Progressive Web App