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.

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

or

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

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.

When using webpack asset modules you will have a configuration section like this to produce the icon assets:

{
  module: {
    rules: [
      // Manifest icons
      {
        test: /\.png$/,
        type: 'asset/resource',
        generator: {
          filename: 'manifest/[name]-[contenthash:8][ext][query]',
        },
      },
    ],
  },
}

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} />

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 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 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 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],
  }),
],