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

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

Step 3: HTTPS

A little scarier, but not so bad

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.)

An Easy Sample

  • no JS APIs
  • all precache

Not so easy

  • Custom-domain tumblr
  • No HTTPS

What's next?

Thank you!

 

 

Jessica Parsons

@verythorough