Recent browser enhancements like service workers, caching brought a new dimension to building apps with html and javascript called Progressive web apps. While they are getting popular, we must know the tools available for build better progressive web applications that are easy for developer as well as the end user. We can categorize these tools as below,

  • Development Tools
  • Framework specific Tools
  • Debug Tools
  • Performance Tools

Development Tools

Workbox

Workbox is a collection of libraries and build tools that make it easy to build offline first web apps.

https://developers.google.com/web/tools/workbox/

Offline plugin for webpack

This plugin is intended to provide an offline experience for webpack projects.

https://github.com/NekR/offline-plugin

Demo: https://offline-plugin.now.sh/

Pinterest service workers

A collection of utilities for creating/testing/experimenting with service workers.

https://github.com/pinterest/service-workers

PWA Builder

https://www.pwabuilder.com/generator PWA.tools takes data from your site and uses that to generate cross-platform Progressive Web Apps

Framework specific tools

Framework specific tools helps to app creation index.html app shell generate, manifest and sw generation.

Debug Tools

Chrome Dev Tools

Use the Application panel to inspect, modify, and debug web app manifests, service workers, service worker caches.

Links:

Performance Tools

Light house

Lighthouse is an open-source, automated tool for improving the quality of web pages. You can run it against any web page, public or requiring authentication. It has audits for performance, accessibility, progressive web apps, and more.

You can run Lighthouse in Chrome DevTools, from the command line, or as a Node module.

https://developers.google.com/web/tools/lighthouse/

Others

HNPWA

Hacker News readers as Progressive Web Apps built using diffrent frameworks. https://hnpwa.com/

Pwa.rocks

Curated Progressive web apps list. https://pwa.rocks/

PWA Checklist

Checklist for building Progressive web applications https://developers.google.com/web/progressive-web-apps/checklist