Support maskable icons

[nixolas1]

Android and other OSes now support auto-masking / cropping icons when a parameter in the icons is set. Would be nice with support for it!
Should just be passing purpose: "maskable" if the developer has set it.

https://css-tricks.com/maskable-icons-android-adaptive-icons-for-your-pwa/

[thasmo]

Not sure it actually works that way already, but it would be nice if all "unknown" properties (like purpose) are printed to the final JSON output regardless.

[FilipChalupa]

@nixolas1 Can you please test the PR #115. It adds support for the purpose property.

Can be installed from here npm install --save git://github.com/FilipChalupa/webpack-pwa-manifest.git#44fd8ff17c.

[thequailman]

That PR fixes this issue for me.

[thequailman]

Can we get this merged sometime?

[FilipChalupa]

Yes please.

[thequailman]

I think this repo is dead, and I don't want to be beholden to this repo adding the random properties for PWA manifests going forward. I spent some time figuring out how to do this with extract-loader and remove this plugin as a dependency, and I'm pretty happy with the results:

manifest.js

const Icon192 = require("./images/192.png")
const Icon512 = require("./images/512.png")

const manifest = {
	icons: [
		{
			src: Icon512,
			sizes: "512x512",
			type: "image/png",
		},
		{
			src: Icon192,
			sizes: "192x192",
			type: "image/png",
		},
	],
	name: "App",
	short_name: "App",
	orientation: "portrait",
	display: "standalone",
	start_url: "/",
	background_color: "#ffffff",
	description: "description",
}

module.exports = JSON.stringify(manifest, null, 2)

webpack.config.js

		{
				test: /manifest.js$/,
				use: [
					{
						loader: "file-loader",
						options: {
							name: "ui/[name].[hash].json",
						},
					},
					"extract-loader",
				],
			},

index.html (using html-webpack-plugin)

		<link rel="manifest" href="${require("./manifest.js")}">

[FilipChalupa]

@thequailman Neat. Thank you for the snippets.