Web App Manifest Loader for Webpack

Loader to deal with modern PWA/SPA manifest files:

• Web Manifest: Chrome 39+
• Browserconfig: IE11+, Windows 8+

Easy to use. Two formats, one loader. Ready for Webpack v4. Enjoy.

$ npm install --save-dev app-manifest-loader

Web App Manifest

Re-References all images declared in the icons and screenshots fields.

Here you'll find additional documentation on the corresponding standard:

• Google Developers
• Mozilla
• W3C

Browserconfig

Re-References all images find in any of the tile configurations.

Usage

Documentation: Using loaders

In your Webpack config:

module: {
  rules: [
    {
      test: /(manifest\.webmanifest|browserconfig\.xml)$/,
      use: [
        {
          loader: "file-loader"
        },
        {
          loader: "app-manifest-loader"
        }
      ]
    }
  ]
}

Note that this example also uses file-loader.

Then, require the manifest in your application code:

import manifest from "./manifest.webmanifest"
import browserconfig from "./browserconfig.xml"

In typical React application you might want to use React Helmet. Then the typical approach is to use the imported URL at the corresponding link element:

<link rel="manifest" href="{manifest}" />
<meta name="msapplication-config" content="{browserconfig}" />

For ReactJS you typically might want to use it together with React Helmet Async:

import Helmet from "react-helmet-async"

import manifest from "./manifest.webmanifest"
import browserconfig from "./browserconfig.xml"

function renderHead() {
  return (
    <Helmet>
      <link rel="manifest" href={manifest} />
      <meta name="msapplication-config" content={browserconfig} />
    </Helmet>
  )
}

The manifest allows you to provide image paths in the standard Webpack format inside your manifest:

{
  "name": "Hello World",
  ...
  "screenshots": [
    {
      "src": "./images/screenshot-portrait.png",
      "sizes": "2560x1440",
      "type": "image/png"
    },
    ...
  ],
  "icons": [
    {
      "src": "./images/icon.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    ...
  ]
}

Alternatives

We chose to implement this as a loader to be able to import hand written and optimized manifests with their matching images.

An alternative concept would be to generate most of the required image by automatic image scaling by just defining a few master images. In this case you would typically use this well maintained plugin:

• Webpack PWA Manifest

Compared to the loader based solution this moves application specific data into the Webpack configuration. One could argue that with shared Webpack configurations this introduces some app specific sections in a tooling related file.

Copyright

Copyright 2017-2019
Sebastian Software GmbH