@oleg-ch/webpack-manifest-pwa

webpack-manifest-pwa

This is a webpack 5 compatible PWA manifest generator plugin.

const { WebpackManifestPwa } = require('@oleg-ch/webpack-manifest-pwa')

...

{
    plugins: [
        new WebpackManifestPwa({
            name: '[APP_NAME]',
            short_name: '[APP_NAME_SHORT]',
            description: '[APP_DESCRIPTION]',
            orientation: 'any',
            filename: 'pwa-manifest.[contenthash].json',
            fingerprints: true,
            theme_color: '#000000',
            background_color: '#000000',
            display: 'standalone',
            start_url: '.',
            icons: [
                {
                    src: path_to_512_src_icon_png,
                    sizes: [96, 128, 144, 192, 256, 384, 512],
                    destination: 'img',
                },
            ],
        }),
    ]
}

the above config will generate the following json:
pwa-manifest.e5c8fef350f03520fdb6693f4366eb77.json

{
    "name": "[APP_NAME]",
    "short_name": "[APP_NAME_SHORT]",
    "display": "standalone",
    "start_url": ".",
    "description": "[APP_DESCRIPTION]",
    "orientation": "any",
    "theme_color": "#000000",
    "background_color": "#000000",
    "icons": [
        {
            "src": "img/icon_96x96.131079fb1b105a4c31ab49e8e170726e.png",
            "sizes": "96x96",
            "type": "image/png"
        },
        {
            "src": "img/icon_128x128.19a715a0c455d34340030f9de3d92853.png",
            "sizes": "128x128",
            "type": "image/png"
        },
        {
            "src": "img/icon_144x144.bce9012bacc42784498a1f53e587cc95.png",
            "sizes": "144x144",
            "type": "image/png"
        },
        {
            "src": "img/icon_192x192.c9f73c7d32b886914877830ee6c131a1.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "img/icon_256x256.c0db560de585f880d5b93d3a5fa73f8c.png",
            "sizes": "256x256",
            "type": "image/png"
        },
        {
            "src": "img/icon_384x384.a2d268675231c66771d010eb8fcf73df.png",
            "sizes": "384x384",
            "type": "image/png"
        },
        {
            "src": "img/icon_512x512.90755da9c9cf08df0f05a22d8991be74.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ]
}

With fingerprints: true images will include contenthash in their filenames.