Progressive web apps are sites with additional configuration which can allow them to work while you're offline. The key part of this is a manifest.json file at the root of the website, which lists files or data to cache when the page loads; if the user is offline and tries to load the site, the cached data and files are used so the site can still be loaded.

Usage with Webpack

The problem with Webpack and progressive web apps is that Webpack generates files, often with hashed file names, so you can't list these files up-front in your manifest file. Fortunately, there are plugins for Webpack which will automatically create a manifest file for you; the simplest to use is offline-plugin.

offline-plugin is a high-level plugin - you just list the files you want listed in the manifest and the plugin takes care of everything. This means that you don't have a huge amount of control over what happens, but the plugin has plenty of options so is fine for standard cases.

Usage with Karma

If you have a seperate testing process via Karma, make sure install the runtime in the test entry file as well as your site's entry file, otherwise you'll get lots of errors since the plugin can't run!

Checking the manifest

Google are pushing progressive web apps at the moment to improve offline experiences on phones, and so have released a progressive web app checking tool called Lighthouse. This is a Chrome extension or NPM library which will check your manifest and service workers and give tips for improvements, much like their other tools like Pagespeed Insights.


My password strength checker site uses offline-plugin to generate a manifest - you can save the site to a phone's home screen through the menu in the browser.