A webpack plugin that generates a PWA manifest and integrates with the assets JSON.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
assets Initial commit Aug 27, 2018
src Initial commit Aug 27, 2018
.gitignore Initial commit Aug 27, 2018
CONTRIBUTING.md Initial commit Aug 27, 2018
LICENSE Initial commit Aug 27, 2018
README.md Initial commit Aug 27, 2018
index.js Initial commit Aug 27, 2018
package-lock.json Initial commit Aug 27, 2018
package.json Initial commit Aug 27, 2018
yarn.lock Initial commit Aug 27, 2018

README.md

webpack-web-app-manifest-plugin logo

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