Making a progressive web app with webpack just got a little bit easier
Today we are releasing webpack-web-app-manifest-plugin, which generates an app manifest that shows up in your assets manifest.
I heard you like manifests
Turns out, there are a lot of web things called "manifests". When talking about web app manifests and assets manifests, sometimes it's hard to keep track. Buckle up, because we made a webpack plugin that deals with both of these types of manifests.
Web app manifests are JSON files that allow your application to specify the way it should be treated when installed as an application on a mobile device. You may want to specify what the application name and icon should be. Maybe you want to tell the browser to tint some of its UI elements to match the color scheme of your page, or even hide the browser chrome entirely. You can do all of that with a web app manifest.
Assets manifests are JSON files that contain paths to assets that are generated by webpack. They're generated by plugins such as assets-webpack-plugin. If you add hashes to the end of your filenames to allow cache busting, assets manifests can be very useful. For example, we use our assets manifest to add JavaScript and CSS files to our <script> and <link> tags.
So I put a manifest in your manifest
While we were building our web app manifest, we wanted to be able to add a hash to the file path and <link> to it. So we needed to add it to our assets manifest. Unfortunately, we were unable to find any existing open-source plugins that output the file in the correct way to add it to the app manifest. So, we built webpack-web-app-manifest-plugin.
By default, webpack-web-app-manifest-plugin assumes that you will name your icon files in the format manifest/icon_[square dimension].(png|jpeg|jpg). If you name them using that scheme, you can use this plugin just like this:
// in your webpack config
import AppManifestPlugin from 'webpack-web-app-manifest-plugin';
...
plugins: [
new AppManifestPlugin({
content: {
name:'Tumblr',
short_name:'Tumblr',
background_color:'#36465d',
},
destination: '/manifest',
}),
],
...
// in your page template
const manifest = // however you usually access your asset manifest in code
const appManifestPath = manifest['app-manifest'].json;
<link rel="manifest" href={appManifestPath} />
If you named your icons with some other naming scheme, you can still add them to the web app manifest, it's just a little more work. That process is detailed in the README.
We're really proud of the work we've done to make web app manifests compatible with asset manifests, which is why we've decided to open source it and publish it on npm. Please use it.
If this plugin doesn't meet your needs, we welcome pull requests. And if you have a passion for progressive web applications, webpack, and open source, join our team!
- Paul Rehkugler (@blistering-pree)
