My First PWA:
Lessons Learned

or, how it's kind of easy, but kind of hard

Jessica Parsons

@verythorough

https://slides.com/verythorough/my-first-pwa

About me

maker  ~  teacher  ~  procrastinator

Inspiration

• love maps for planning travel with friends & family
• frustrated with My Maps
  • difficult to share
  • less-than-ideal mobile
  • poor integration with navigation
  • encourage standalone app install

Why a progressive

web app?

Best of both worlds: mixing my favorite platform with anytime access of mobile

• accessible across devices
• discoverable
• easy sharing

The Basic App

• Google Maps API
• Firebase
  • auth
  • database
  • hosting
• Real-time sharing of commented place markers

https://destina.firebaseapp.com/

Making Progress

- or -

Making my progressive web app

progressively more progressive

Step 1: The Basics

• responsive
• accessible
• fast
• progressively enhanced

Step 2: The Easy Part

manifest.json

Manifest Generator

https://app-manifest.firebaseapp.com/

MDN Reference

https://developer.mozilla.org/en-US/docs/Web/Manifest

Step 3: HTTPS

A little scarier, but not so bad

• Automatic with most subdomain hosting: GitHub, Firebase, Heroku, Tumblr, etc.
• Free for custom domains with Firebase
• Free for custom domains on GitHub and others using CloudFlare: https://blog.cloudflare.com/ssl-on-tumblr-wordpress-blogger-appengine-pos/
• Free with server-side access using https://letsencrypt.org/

With manifest and HTTPS

Step 4: App Shell

where it gets a bit more complex...

A very basic guide using sw-precache:

https://codelabs.developers.google.com/codelabs/sw-precache

Step 5: Realtime Caching/Local Storage

so many choices...

so many dependencies

Step 6:

Push Notifications

(I'm so not there yet.)

Possible resource:

https://github.com/firebase/quickstart-js/tree/master/messaging

An Easy Sample

• no JS APIs
• all precache

Not so easy

• Custom-domain tumblr
• No HTTPS

What's next?

Thank you!

Jessica Parsons

@verythorough