Presented at: Open Source South Carolina Meetup Presented by: John M. Wargo, Principal Program Manager, Visual Studio App Center @ Microsoft

1. Modern Tools for
Building Progressive
Web Apps
John M. Wargo
https://johnwargo.com
@johnwargo

2. About Me
• Software developer, writer, presenter, father, husband, and geek
• Specializes in mobile development
• Principal Program Manager @ Microsoft
• App + Cloud Experiences team
• Responsible for Visual Studio App Center Push
and Azure Notification Hubs
• Author of 7 (+1)* books
• Former contributor to the Apache Cordova project
• Live in Charlotte, NC
• Previously @ AT&T, BlackBerry, BoxTone, Forrester Research,
Hewlett Packard Enterprise (HPE), others

3. www.johnwargobooks.com

4. Learning Progressive
Web Apps
• Available in early 2020
• https://learningpwa.com/

5. Modern Tools for
Building Progressive
Web Apps

6. Progressive
Web Apps
Google: Progressive Web Apps are
user experiences that have the
reach of the web, and are:
• Reliable - Load instantly and
never show the downasaur*,
even in uncertain network
conditions.
• Fast - Respond quickly to user
interactions with silky smooth
animations and no janky
scrolling.
• Engaging - Feel like a natural
app on the device, with an
immersive user experience.
Jeremy Keith: Progressive Web
Apps consist of:
• HTTPS
• A service worker
• A Web App Manifest
* When using Google Chrome and your internet connectivity dies, you'll see a little Tyrannosaurus. This is called the 'downasaur'
https://developers.google.com/web/progressive-web-apps https://adactio.com/journal/13098
With service workers and
manifest files, PWAs:
• Are installable
• Are available (run while)
offline
• Can perform background sync
operations

7. Anatomy of a PWA

8. index.html

9. app.webmanifest

10. index.html*
*or loaded from an external file

11. sw.js

12. PWAs Now Automatic
Through Many
Common Frameworks

15. PWA Tooling

16. Assessing the PWA-ness of a Web App with Lighthouse
• Multiple entry points
• Chrome extension
• Developer Tools
• Command-line
https://developers.google.com/web/tools/lighthouse

22. PWA Automation (Part 1)
PWABuilder

28. PWA Automation (Part 2)
Workbox

30. Workbox
• JavaScript library for adding offline operation to a web app
• Locally cached resources
• Two approaches:
• Precache all app resources
• Custom caching strategies
• Command-line driven

31. Workbox Caching Strategies
• CacheFirst: Return the cached version of a resource, retrieving the resource from the network (and adding it to the cache) if it’s
not already in the cache.
• CacheOnly: Return the resource from the cache. If the resource is not in the cache, the fetch will fail.
Note: Your service worker must populate the cache during service worker installation to enable this option.
• NetworkFirst: Return the network version of the resource, retrieving the resource from the cache if the network is not
available. The fetch fails when the network version is not available, and the resource is not in the cache.
• NetworkOnly: Return the network version of the resource, failing if it’s not available.
• StaleWhileRevalidate: Return the cached version of a resource, then update the cached version from the network so it’s
there the next time the app requests the resource. This gets resources to an app quickly, but it may not always be the most recent
version.

33. Implementing a Caching Strategy

34. Custom Routes

35. Questions?