Gathering detailed insights and metrics for parcel-plugin-pwa-manifest
Gathering detailed insights and metrics for parcel-plugin-pwa-manifest
A build tool that generates a Web App Manifest, creates all necessary icons, and more!
Installations
npm install parcel-plugin-pwa-manifestDeveloper Guide
BETA
Typescript
No
Module System
CommonJS
Min. Node Version
>=10
Node Version
16.6.2
NPM Version
lerna/3.22.1/node@v16.6.2+x64 (linux)
Releases
Unable to fetch releases
Languages
3
JavaScript
TypeScript
HTML
JavaScript (50.24%)
TypeScript (49.44%)
HTML (0.31%)
Developer
101arrowz
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
GitHub Statistics
41 Stars
85 Commits
8 Forks
1 Watchers
1 Branches
4 Contributors
Updated on Nov 16, 2024
Maintainers
1
Package Meta Information
Latest Version
3.1.1
Package Id
parcel-plugin-pwa-manifest@3.1.1
Unpacked Size
21.73 kB
Size
7.80 kB
File Count
5
NPM Version
lerna/3.22.1/node@v16.6.2+x64 (linux)
Node Version
16.6.2
Total Downloads
Cumulative downloads
Total Downloads
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
1
Peer Dependencies
1
parcel-plugin-pwa-manifest
A Parcel plugin that generates a Web App Manifest, creates all the icons you need, and more!
NOTE: For Parcel 2 support, please see parcel-config-pwa-manifest.
Usage
In package.json:
1{ 2 "name": "my-awesome-pwa", 3 "description": "An awesome PWA to do awesome things", 4 "pwaManifest": { 5 "name": "My Awesome PWA", 6 "shortName": "My PWA", 7 "startURL": "./offline", 8 "theme": "#add8e6", 9 "generateIconOptions": { 10 "baseIcon": "./public/my-awesome-icon.svg", 11 "sizes": [192, 384, 512], 12 "genFavicons": true 13 } 14 } 15}
This will create a manifest.webmanifest similar to the following:
1{ 2 "name": "My Awesome PWA", 3 "short_name": "My PWA", 4 "description": "An awesome PWA to do awesome things", 5 "start_url": "./offline", 6 "theme_color": "#add8e6", 7 "icons": [ 8 { 9 "src": "./my-awesome-icon-192x192.webp", 10 "sizes": "192x192", 11 "type": "image/webp" 12 }, 13 { 14 "src": "./my-awesome-icon-192x192.png", 15 "sizes": "192x192", 16 "type": "image/png" 17 }, 18 { 19 "src": "./my-awesome-icon-384x384.webp", 20 "sizes": "384x384", 21 "type": "image/webp" 22 }, 23 { 24 "src": "./my-awesome-icon-384x384.png", 25 "sizes": "384x384", 26 "type": "image/png" 27 }, 28 { 29 "src": "./my-awesome-icon-512x512.webp", 30 "sizes": "512x512", 31 "type": "image/webp" 32 }, 33 { 34 "src": "./my-awesome-icon-512x512.png", 35 "sizes": "512x512", 36 "type": "image/png" 37 } 38 ] 39}
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>.
What?
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.
Why?
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.
Documentation
All configuration is done in package.json under the pwaManifest (or pwa-manifest) key.
Almost anything that usually goes in a manifest.json file can go into pwaManifest. 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 inserted into the manifest whenever provided in pwaManifest. There are a few reasonable defaults, like '.' for start_url. Watch out for three changes, though: the removal of the icons option to allow icon generation and the modification of the screenshots and shortcuts options' 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.
Changes from standard manifest
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.
Each shortcut in the shortcuts should not include an icons field but rather a single icon, which will automatically be resized according to the icon generation options. The other fields like name, short_name have aliases.
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:
baseIcon
The path to the icon to generate all other icons from. Path is relative to the placement of package.json.
- For best results, use a high-resolution (at least 512x512) PNG or an SVG.
sizes
An array of pixel values for the sizes to generate. Defaults to [96, 152, 192, 384, 512].
- All PWAs need at least 192px and 512px icons, so those will be added in regardless of whether they are provided in the
sizesparameter.
shortcutSizes
An array of pixel values for the sizes of the shortcut icons. Defaults to [96, 192].
- All PWAs need at least 96x shortcut icons, so those will be added in regardless of whether they are provided in the
shortcutSizesparameter.
formats
An 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.
- If you prefer the user getting one format over another, put that format first in the object.
- All PWAs need at least PNG, so that's inserted first if you provide your own config. If you don't want it first, put your own
pngkey-value pair in your config.
appleTouchIconBG
The background color for the Apple Touch Icon (to fill transparent regions). Defaults to the theme color.
- Useful because by default, Apple uses black for transparent regions, which doesn't look good with most icons.
- Recommended to use
atibalias for brevity.
appleTouchIconPadding
The number of pixels to pad the Apple Touch Icon with on all sides. Defaults to 12.
- Used to account for Apple's courner-rounding.
- Recommended to use
atipalias for brevity.
genFavicons
Whether or not to generate 16x16 and 32x32 favicons and insert links in the HTML. Defaults to false.
genSafariPinnedTab
Whether or not to generate a Safari Pinned Tab SVG icon using an autotracer. Defaults to false
- Has a significant impact on performance (not managed by
sharpbut by native JavaScript). - Recommended to use
genPinnedTaborgsptfor brevity.
safariPinnedTabColor
The color for the Safari Pinned Tab icon. Defaults to the theme color (or 'black' if no theme was manually specified).
- Recommended to use
pinnedTabColororsptcfor brevity.
msTileColor
The background color for Microsoft Tiles. Defaults to the theme color.
resizeMethod
The method to use for resizing non-square images. Can be one of 'cover' (default), 'contain', or 'fill'.
purpose
An array of possible purposes for the icons. Each element should be one of 'badge', 'maskable', or 'any'
disabled
Disables the manifest creation with no warning.
- Used to speed up builds when icon generation isn't needed (i.e. when developing with HMR)
production / development
The parameters to use when NODE_ENV is a certain value. Merged with the outer parameters.
- Useful for disabling/generating less icons in development
- Case-insensitive - use lowercase in options
- Can be anything.
productionanddevelopmentare common, but you could hypothetically set yourNODE_ENVtoasdfand have anasdfkey with custom manifest generation options
Advanced: Events
See the events section for the core package. All events are emitted on the bundler. The only difference is that all event names are prefixed with the string 'pwa' and there is no '*' (wildcard) event. Events are still camelCase, though. For example, start becomes pwaStart, appleTouchIconGen becomes pwaAppleTouchIconGen, etc.
If you have the plugin configured in package.json, you can do this in a custom build script:
1const Bundler = require('parcel-bundler'); 2 3const bundler = new Bundler('index.html'); 4bundler.on('pwaAppleTouchIconGen', data => { 5 // Prevent filename hashing for Apple Touch Icon 6 data.filename = Promise.resolve('apple-touch-icon.png'); 7})
License
MIT
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
Found 2/27 approved changesets -- score normalized to 0
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
license file not detected
Details
- Warn: project does not have a license file
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
branch protection not enabled on development/release branches
Details
- Warn: branch protection not enabled for branch 'master'
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 5 are checked with a SAST tool
Reason
53 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8
- Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
- Warn: Project is vulnerable to: GHSA-h5c3-5r3r-rr8q
- Warn: Project is vulnerable to: GHSA-rmvr-2pp2-xj38
- Warn: Project is vulnerable to: GHSA-xx4v-prfh-6cgc
- Warn: Project is vulnerable to: GHSA-wf5p-g6vw-rhxx
- Warn: Project is vulnerable to: GHSA-8hc4-vh64-cxmj
- Warn: Project is vulnerable to: GHSA-jr5f-v2jv-69x6
- Warn: Project is vulnerable to: GHSA-xq7p-g2vc-g82p
- Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw
- Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
- Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
- Warn: Project is vulnerable to: GHSA-ghr5-ch3p-vcr6
- Warn: Project is vulnerable to: GHSA-434g-2637-qmqr
- Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m
- Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw
- Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p
- Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747
- Warn: Project is vulnerable to: GHSA-vjh7-7g9h-fjfh
- Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc
- Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp
- Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22
- Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
- Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
- Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
- Warn: Project is vulnerable to: GHSA-7hpj-7hhx-2fgx
- Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55
- Warn: Project is vulnerable to: GHSA-5rrq-pxf6-6jx5
- Warn: Project is vulnerable to: GHSA-8fr3-hfg3-gpgp
- Warn: Project is vulnerable to: GHSA-gf8q-jrpm-jvxq
- Warn: Project is vulnerable to: GHSA-2r2c-g63r-vccr
- Warn: Project is vulnerable to: GHSA-cfm4-qjh2-4765
- Warn: Project is vulnerable to: GHSA-x4jg-mjrx-434g
- Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr
- Warn: Project is vulnerable to: GHSA-h7cp-r72f-jxh6
- Warn: Project is vulnerable to: GHSA-v62p-rq8g-8h59
- Warn: Project is vulnerable to: GHSA-566m-qj78-rww5
- Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
- Warn: Project is vulnerable to: GHSA-hwj9-h5mp-3pm3
- Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
- Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
- Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
- Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
- Warn: Project is vulnerable to: GHSA-54xq-cgqr-rpm3
- Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
- Warn: Project is vulnerable to: GHSA-pq67-2wwv-3xjx
- Warn: Project is vulnerable to: GHSA-8cj5-5rvv-wf4v
- Warn: Project is vulnerable to: GHSA-4wf5-vphf-c2xc
- Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
- Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7
- Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
Score
1.3
/10
Last Scanned on 2025-07-14
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More