Webapp Manifest Plugin
Create a web application manifest for your PWA based on your webpack build.
What do?
- During your webpack build, outputs a manifest.json
- Works with Favicons Webpack Plugin to use the icons inside your manifest
- You must have
android
icons enabled (it's a default)
- You must have
- Works with HTML Webpack Plugin to insert the manifest URL into your
index.html
- Comes with some sensible defaults to help you out with Lighthouse
- You'll need to put in some effort to get a good score, though.
How?
In your webpack.config.js
,
/* ES2015 */; /* ES5 */var WebappManifestPlugin = default; /* -- futher down -- */"plugins": /* ... */
The constructor takes a single argument, which is an object containing the properties of the manifest. You can use either the actual (snake_case) property names, or camelCase alternatives.
The defaults are:
const config = name: "" shortName: "" description: null dir: 'auto' lang: 'en-US' display: 'standalone' orientation: 'any' startUrl: '/' backgroundColor: '#fff' themeColor: '#fff' icons: preferRelatedApplications: false relatedApplications: scope: '/'
If you'd like to use the Favicon Plugin to generate your icons for you, there is one extra thing.
In your webpack.config.js
,
/* ES2015 */;; /* ES5 */var FaviconsWebpackPlugin = var WebappManifest = ;var WebappManifestPlugin = WebappManifestdefault;var FAVICON_PLUGIN = WebappManifestFAVICON_PLUGIN; /* -- futher down -- */"plugins": /* ... */ 'my-logo.png' icons: FAVICON_PLUGIN
You can see more how to set that up here. That constant is just a flag to let the plugin know to use the icons generated with the plugin.
That's it. Throw your config in there.