webpack-web-app-manifest-plugin

webpack-web-app-manifest-plugin is a webpack plugin that generates a PWA manifest and integrates with the assets JSON generated by assets-webpack-plugin.

How to install it

npm install --save-dev webpack-web-app-manifest-plugin

or

yarn add webpack-web-app-manifest-plugin --dev

Using it the easy way

Name all of your icon files manifest/icon_[square dimension].(png|jpeg|jpg). If you have a different naming scheme for your files, check out the section Using it the hard way below.

In your webpack config file:

import AppManifestPlugin from 'webpack-web-app-manifest-plugin';

...

plugins: [
  new AppManifestPlugin({
    content: {
      name: 'Tumblr',
      short_name: 'Tumblr',
      background_color: '#36465d',
    },
    destination: '/manifest',
  }),
],

...

To access the app manifest file path from your asset manifest:

const manifest = // however you usually access your asset manifest in code
const appManifestPath = manifest['app-manifest'].json;

...

<link rel="manifest" href={appManifestPath} />

Using it the hard way

If you don't want to name your icons based on our naming scheme, you will want to implement a few functions that are passed into the plugin.

isAssetManifestIcon()

isAssetManifestIcon is a function to determine if a webpack asset should be included as an icon in the web app manifest. The function accepts a filename parameter and returns true or false.

For example, if you only wanted to include a specific list of files, you could implement it like this:

plugins: [
  new AppManifestPlugin({
    ...
    isAssetManifestIcon: (fileName) => ['myIcon1.png', 'myIcon2.png'].indexOf(fileName) >= 0,
  }),
],

getIconSize()

getIconSize is a function to determine the icon size of any asset that passes the check isAssetManifestIcon(). The function accepts a fileName parameter and returns an object { width, height }.

For example, if you wanted to hardcode a list of sizes for your icons, you could implement it like this:

const iconSizes = {
  'myIcon1.png': { width: 120, height: 120},
  'myIcon2.png': { width: 80, height: 80},
};

...

plugins: [
  new AppManifestPlugin({
    ...
    getIconSize: (fileName) => iconSizes[fileName],
  }),
],

getIconType()

getIconType is a function to determine the type of any asset that passes the check isAssetManifestIcon(). The function accepts a fileName parameter and returns a string describing the mime type of the asset, ex. "image/png".

For example, if you wanted to hardcode a list of mime types for your icons, you could implement it like this:

const iconTypes = { 'myIcon1.png': 'image/png', 'myIcon2.jpg': 'image/jpeg' };

...

plugins: [
  new AppManifestPlugin({
    ...
    getIconType: (fileName) => iconTypes[fileName],
  }),
],