parcel-config-pwa-manifest
Advanced tools
A Parcel 2 plugin that generates a Web App Manifest, creates all necessary icons, and more!
A Parcel 2 plugin that generates a Web App Manifest, creates all the icons you need, and more!
In .parcelrc
{
"extends": ["@parcel/config-default", "parcel-config-pwa-manifest"]
}
In package.json:
{
"name": "my-awesome-pwa",
"description": "An awesome PWA to do awesome things",
"pwaManifest": {
"name": "My Awesome PWA",
"shortName": "My PWA",
"startURL": "./offline",
"theme": "#add8e6",
"generateIconOptions": {
"baseIcon": "./public/my-awesome-icon.svg",
"sizes": [192, 384, 512],
"genFavicons": true
}
}
}
This will create a manifest.webmanifest similar to the following:
{
"name": "My Awesome PWA",
"short_name": "My PWA",
"description": "An awesome PWA to do awesome things",
"start_url": "./offline",
"theme_color": "#add8e6",
"icons": [
{
"src": "./my-awesome-icon-192x192.webp",
"sizes": "192x192",
"type": "image/webp"
},
{
"src": "./my-awesome-icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "./my-awesome-icon-384x384.webp",
"sizes": "384x384",
"type": "image/webp"
},
{
"src": "./my-awesome-icon-384x384.png",
"sizes": "384x384",
"type": "image/png"
},
{
"src": "./my-awesome-icon-512x512.webp",
"sizes": "512x512",
"type": "image/webp"
},
{
"src": "./my-awesome-icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}
In index.html, a link to the manifest, an Apple Touch Icon, a Microsoft Tile configuration, and two favicons will be inserted at the top of the <head>.
This package is a plugin for the Parcel bundler that creates a web manifest with reasonable defaults and inserts a link into the HTML. More importantly, it handles all icon/favicon generation for you when you provide a base icon, which lets you effortlessly support multiple screen sizes and ensure best practices.
Please note that this plugin supports Parcel 2 only. See parcel-plugin-pwa-manifest for a plugin that supports Parcel 1.
Parcel fully supports web manifests, but creating them can be annoying and can involve you having to jump through hoops to do simple things such as having an icon set that just works across all devices.
In the case of icon generation, you could manually do it with something like Real Favicon Generator, but if you ever change your main icon, you have to run through the entire process again. That's no fun.
Integrating manifest generation into the build pipeline makes life easier. Only minimal configuration is required, but if you want you can still customize to your heart's content.
All configuration is done in package.json under the pwaManifest key. You may also place configuration in .pwamanifestrc or .pwarc in a JSON format:
{
"name": "My Awesome PWA",
"theme": "#ffffff",
"generateIconOptions": {
"baseIcon": "./best-icon.png",
"sizes": [128, 192, 512]
}
}
In order to enable the plugin, you MUST create a .parcelrc. The extends key in .parcelrc should first contain the default config (@parcel/config-default), then this package (parcel-config-pwa-manifest). If you have a custom .parcelrc already, just put parcel-config-pwa-manifest as the last element in the array of extends:
{
"extends": [
"@my-custom-config/parcel-config",
"parcel-config-my-other-config",
"parcel-config-pwa-manifest"
]
}
Almost anything that usually goes in a manifest.json file can go into the configuration. All parameter names have aliases in the original form from the spec (like start_url), in camel case (recommended, like startUrl), in kebab case (like start-url), and in other reasonable forms (like startURL). If you see any inconsistencies in the documentation, it's probably fine; you can use multiple names for the same value.
All parameters that exist in the MDN documentation for the Web App Manifest are aliased, type-checked, and insterted into the manifest whenever provided in the configuration. There are a few reasonable defaults, like '.' for start_url. Watch out for two changes, though: the removal of the icons option to allow icon generation and the modification of the screenshots option's behavior (detailed below).
If you need to have a parameter not included in that list, put an array of parameter names to keep in the final manifest under the include key. If you use an unknown parameter name and don't put it in include, the generation will throw an error.
The theme_color (aka theme) will default to white and will change the default behavior of some parts of the icon generation, such as the background color of the Microsoft Tile.
The screenshots, unlike in a normal web app manifest, should be an array of screenshot image filepaths or absolute URLs. Do not use relative URLs or they will be confused for filepaths. Each image should be a PNG, JPEG, or WebP file.
Instead of manually setting an icons parameter containing a set of icons, you should use genIconOpts (aka iconGenerationOptions, iconGenOpts, ...you get the gist). genIconOpts will contain the options for icon generation. The parameters for genIconOpts are as follows:
baseIconThe path to the icon to generate all other icons from. Path is relative to the placement of package.json.
sizesAn array of pixel values for the sizes to generate. Defaults to [96, 152, 192, 384, 512].
sizes parameter.formatsAn object whose keys are the desired output formats (in lowercase) and whose values are the configurations to use with the sharp package when generating icons of that type. By default, generates WebP and PNG images with somewhat high compression.
png key-value pair in your config.appleTouchIconBGThe background color for the Apple Touch Icon (to fill transparent regions). Defaults to the theme color.
atib alias for brevity.appleTouchIconPaddingThe number of pixels to pad the Apple Touch Icon with on all sides. Defaults to 12.
atip alias for brevity.genFaviconsWhether or not to generate 16x16 and 32x32 favicons and insert links in the HTML. Defaults to false.
msTileColorThe background color for Microsoft Tiles. Defaults to the theme color.
genSafariPinnedTabWhether or not to generate a Safari Pinned Tab SVG icon using an autotracer. Defaults to false
sharp but by native JavaScript).genPinnedTab or gspt for brevity.safariPinnedTabColorThe color for the Safari Pinned Tab icon. Defaults to the theme color (or 'black' if no theme was manually specified).
pinnedTabColor or sptc for brevity.resizeMethodThe method to use for resizing non-square images. Can be one of 'cover' (default), 'contain', or 'fill'.
purposeAn array of possible purposes for the icons. Each element should be one of 'badge', 'maskable', or 'any'
disabledDisables the manifest creation with no warning.
production / developmentThe parameters to use when NODE_ENV is a certain value. Merged with the outer parameters.
production and development are common, but you could hypothetically set your NODE_ENV to asdf and have an asdf key with custom manifest generation optionsThis plugin could support a rich event system like the core package; however, at the moment it seems to be impossible to expose an event subscription API with the Parcel 2 Plugin API, so for now this will remain a TODO.
MIT
FAQs
A Parcel 2 plugin that generates a Web App Manifest, creates all necessary icons, and more!
The npm package parcel-config-pwa-manifest receives a total of 35 weekly downloads. As such, parcel-config-pwa-manifest popularity was classified as not popular.
We found that parcel-config-pwa-manifest demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Ransomware payment rates hit an all-time low in 2024 as law enforcement crackdowns, stronger defenses, and shifting policies make attacks riskier and less profitable.
Security News
require(esm) backported to Node.js 20, easing the transition to ESM-only packages and reducing complexity for developers as Node 18 nears end-of-life.
Security News
PyPI now supports iOS and Android wheels, making it easier for Python developers to distribute mobile packages.