app-manifest-loader

2.4.1 • Public • Published

Web App Manifest Loader for Webpack
Sponsored by Version Downloads Build Status Unix Build Status Windows Dependencies

Loader to deal with modern PWA/SPA manifest files:

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:

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:

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

Logo of Sebastian Software GmbH, Mainz, Germany

Copyright 2017-2019
Sebastian Software GmbH

Readme

Keywords

none

Package Sidebar

Install

npm i app-manifest-loader

Weekly Downloads

715

Version

2.4.1

License

MIT

Unpacked Size

25.5 kB

Total Files

5

Last publish

Collaborators

  • swernerx