PWA Resources

A curated collection of resources for learning to build Progressive Web Apps 💪

Curated and maintained with ♥ by the folks at Shareup. We are hiring! Come build great things with us.

It has often been difficult for us to find up-to-date resources about PWAs. We wanted to collect the links that have helped us,or are in our #readlater lists, into one place.

The standards and tech around PWAs has changed over the years, yet many of the resources we find reference stuff from 2015. Even still, some of the older resources are useful, so we've tried to label those as "this resource might be a little out of date" when necessary.

Can I suggest new resources?

Yes! Either create a PR for resources.ts or send an email to [email protected].

This is a PWA

We wanted to quickly build a little PWA with wmr which caches itself and works offline, you can favorite resources and those are persisted into IndexedDB, and it can be installed to your home screen 😎

What's the tech stack for this PWA?

• All our code is written in TypeScript and CSS modules
• wmr is our dev server and bundler
• Preact and preact-iso renders HTML both server-side and client-side, provides routing in both cases, and hydrates the interactive parts client-side
  • We are biased and only used functional components + hooks
• idb is the fantastic library we are using to promisify IndexedDB access
• CSS custom properties are how we are trying to dynamically control style values
• A vanilla service worker handles the caching and offline access

The artwork is fantastic!

Yes, we agree! Adam did a great job creating some really fun illustrations for the site 💪😎👏

TODOs

• Can we force iOS to pre-cache all the assets when installing to springboard?
• Revisit https://github.com/preactjs/wmr/tree/main/packages/sw-plugin and document why it didn't work out