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 different 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
This article is originally published on http://www.idiotinside.com/2018/01/05/tools-to-build-better-progressive-web-apps/