Chrome dev tools -> Lighthouse to run an audit
- analyzes performace, accessibility, seo and determines if your app is installable as a PWA. Test at https://fireship.io/
- Trigger and test push notifications, background sync of the service worker
Library to help build PWA’s
- Cache URL’s in your app so they can be viewed offline. Inspect the cache under chrome dev tools
Cache Storage. Example at https://fireship.io/
If using React or Angular
npm install workbox-cli --global
or import from CDN
Your logo bro \ :D /
Contains icons and other meta data about the app.
Icons can be created with PWA Asset generator, this will target
logo.png and output the results in the
icons directory. Additionally this will produce the content needed for the mainifest.json file (look in the terminal output)
npx pwa-asset-generator logo.png icons
Example from https://fireship.io/
networkFirst() will use network first but fall back to
cacheFirst is the network is not avalible.
If you are using the Create react app tool will automatically generate a service worker for you.
Service worker -> register to run in the background.
- Caching pages
- Run background sync
- Listen for push notifications
This will check if the browser supports the feature and then reginster the worker which is
Once registered it can be seen in the
Application tab in chrome dev tools.
- Hacker News readers as Progressive Web Apps