Web Apps Have Problems

• Networks are unreliable and slow
• No background processing
• No background communication
• No installation

(cc) littledebbie11

PWAs Offer Solutions

• Web technologies for a native application experience
• Service Workers
• CacheStorage API
• Fetch API
• Install to Device
• Push Notifications

(cc) nogood

Why?

Twitter Lite (case study)

Forbes (case study)

Support?

(cc) mjmonty

(cc) jeepersmedia

(cc) missrogue

Service Workers

• Background script for the browser
• Decoupled from DOM and UI thread
• Programmable network proxy
• Uses Promises

(cc) davidmould

A Life in Service

• Registration
• Installation
• Activation
• Fetching/Messaging
• Termination

(cc) catchesthelight

Requirements

• HTTPS (or localhost)
• Browser Support (Is ServiceWorker Ready?)
• Chrome or Firefox Dev Tools for debugging and testing

(cc) justin_case

CacheStorage API

• Backbone of offline capability
• Create named caches for domain
• Can add, delete, list keys and match
• Fetch API for network
• Built on Promises
• You choose your strategy

(cc) joseluisbriz

Cache only

ServiceWorker serves from cache.

Useful for...

• Static assets served quickly
• Static assets are tied to app "version"

Network only

ServiceWorker passes request to network.

Useful for...

• Non-GET request, like form POSTS
• Analytics calls
• Status pings

Cache, falling back to network

ServiceWorker tries cache and uses the network if needed.

Useful for...

• Mixing "cache only" and "network only" requests in one block of code

Network, falling back to cache

ServiceWorker tries the network and uses cache if needed.

Useful for...

• Frequently updating items like blogs, weather reports
• "Cache, then network" is a preferred version of this

Cache, with network update

ServiceWorker displays the cached request but also calls the network. If the network succeeds, the cache is updated and so is the page.

Useful for...

• Frequently updating items like blogs, weather reports
• Displaying some sort of content, then prompting the user to load in the new content

Tools for Developing

Chrome Dev Tools

https://developers.google.com/web/tools/chrome-devtools/progressive-web-apps

Lighthouse

https://developers.google.com/web/tools/lighthouse/

WorkboxJS: https://workboxjs.org/

PWA Builder: https://www.pwabuilder.com/

Where can I learn more?

https://developers.google.com/web/progressive-web-apps/

https://developers.google.com/web/ilt/pwa/

https://jakearchibald.com/2014/offline-cookbook/

https://jakearchibald.github.io/isserviceworkerready/

http://offlinefirst.org/

https://serviceworke.rs/