JSPM

pwa-manifest-loader

1.0.5
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 18
  • Score
    100M100P100Q56945F
  • License Apache-2.0

Progressive Web App manifest.json / app.webmenifest loader for webpack.

Package Exports

  • pwa-manifest-loader
  • pwa-manifest-loader/index.mjs

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (pwa-manifest-loader) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

pwa-manifest-loader for webpack

test Coverage Status NPM Version

Progressive Web App manifest loader for webpack, which will load referenced images files.

If you want to write your own PWA manifest, include it in a html file that's in your build, and have webpack process the image assets from the manifest then this is the loader for you.

This loader is typically used in combination with html-loader, (either as part of a html template for HtmlWebpackPlugin or as a html file processed directly by html-loader and exported as a static HTML file). The loader outputs JSON source as a string including transformed icon src URLs.

Install

npm i --save-dev pwa-manifest-loader

Example

Configure webpack to use the loader by adding a rule to your config:

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        // use pwa-manifest-loader for manifest.json, or app.webmanifest so icons get loaded
        test: /manifest.json$\|.webmanifest$/,
        use: 'pwa-manifest-loader'
      },
      // ... other loaders etc
    ],
    // ...
  }
}

In any html file processed by html-loader:

includes/head.html

<link rel="manifest" href="./manifest.json" />

The manifest path should be relative to the html file that includes it. html-loader will replace it with the correct output path in the generated HTML.

manifest.json / app.webmanifest

{
  "name": "MyApp",
  "short_name": "MyApp",
  "description": "App description etc.",
  "start_url": "/",
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone",
  "icons": [
    {
      "src": "./img/icon-32.png",
      "sizes": "32x32"
    },
    {
      "src": "./img/icon-64.png",
      "sizes": "64x64"
    },
    {
      "src": "./img/icon-180.png",
      "sizes": "180x180"
    },
    {
      "src": "./img/icon.svg",
      "sizes": "any",
      "purpose": "any"
    },
    {
      "src": "./img/icon-maskable.svg",
      "sizes": "any",
      "purpose": "maskable"
    }
  ]
}

All of the referenced icons will be loaded by your webpack loaders. For example, if you're using ImageMinimizerWebpackPlugin you can use ?as=webp&w=180&h=180 on an icon src URL to compile it as a specific format and size.

License

Apache-2.0

Bugs etc?

Open a github issue please :)

Changelog

  • 1.0.5 Fixed Support for Webpack >= 5.96
  • 1.0.4 - broken release missing required asset loader
  • 1.0.3 Fixed Support for Resolving Aliases
  • 1.0.2 Fixed Support for Screenhots
  • 1.0.1 Added Test Coverage and Documentation
  • 1.0 Initial Release

My PWAs that use this