elegantapp/pwa-asset-generator

Automates PWA asset generation and image declaration. Automatically generates icon and splash screen images, favicons and mstile images. Updates manifest.json and index.html files with the generated images according to Web App Manifest specs and Apple Human Interface guidelines.

pwa-asset-generator's Issues

npm detects vulnerability

Describe the bug
When running npm audit, a high severity vulnerability is detected

To Reproduce
Steps to reproduce the behavior:

1. Execute cli command npm audit

Expected behavior
No vulnerability gets flagged

System (please complete the following information):

• macOS Catalina
• node version v10.16.0
• npm version 6.9.0
• cli version 1.1.6

Screenshots

Additional context
None

Add test suite for pwa.js helper

Add maskable icons for Android

Is your feature request related to a problem? Please describe.
As W3C specs on manifest file has been extended with the new purpose field and maskable icons, it's a good idea to add maskable icons feature to pwa-asset-generator.

Describe the solution you'd like
We need to add a new flag --maskable which will be respected when icons are generated. When flag is provided, the manifest file meta has to be aligned with specs here: https://www.w3.org/TR/appmanifest/#icon-masks

A more detailed article on maskable icons is here: https://css-tricks.com/maskable-icons-android-adaptive-icons-for-your-pwa/

Nice to have: if we can detect the safe zone of a custom html input and warn if it exceeds the zone. Intersection Observer API might be handy for that.

add favicon only flags

Here is the situation,
I want to generate a transparent favicon, and white background for splash and icon, but there is no such option.

when I set {favicon: true}, the program automatically generate icon & splash for me

Thus here is my workaround, first I generate favicon with { opaque: false, iconOnly: true, favicon: true } and then overwrite it with {background:"#FFFFFF", favicon:false} option.

I wonder if we can add faviconOnly flag.

Deprecated media feature “device-width”

After updating the source and validating, multiple error are shown.

line 47: Bad value “(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)” for attribute “media” on element “link”: Deprecated media feature “device-width”. For guidance, see the Deprecated Media Features section in the current Media Queries specification.

And this is that line:

<link rel="apple-touch-startup-image" href="http://127.0.0.1/compro/public/pwa/apple-splash-2048-2732.png" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">

Thanks.

Incorrect file paths generated on Windows

Describe the bug
On Windows, the asset paths generated have double back-slashes (sometimes three) at the first directory level. This causes cli.test.js to fail, also user has to manually correct the asset paths generated.

To Reproduce
Steps to reproduce the behavior:

1. Execute cli command git clone https://github.com/onderceylan/pwa-asset-generator.git
2. cd to project root and execute cli command: npm run jest
3. See error

Expected behavior
cli.test.js should pass

System (please complete the following information):

• OS: windows 10
• node version: v10.15.3
• npm version: 6.11.2
• cli version: 1.1.6

Screenshots

Splash Screen not showing in landscape on iOS 12.4

First of all: awesome package. Such a good idea!

In order for me to get splash screens to work on (2) separate iOS devices (iPhone XS Max + iPad mini) both running iOS 12.4, I had to add and (orientation: landscape) as well as maintaining the device-width and device-height dimensions as its portrait counterpart.

For instance, this got landscape working on my iPhone XS Max:

<link
  rel="apple-touch-startup-image"
  href="/static/images/splash/apple-splash-1242-2688.png"
  media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
/>
<link
  rel="apple-touch-startup-image"
  href="/static/images/splash/apple-splash-2688-1242.png"
  media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
/>

This is what was generated by this package (only portrait works):

<link rel="apple-touch-startup-image" href="apple-splash-1242-2688.png" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3)">
<link rel="apple-touch-startup-image" href="apple-splash-2688-1242.png" media="(device-width: 896px) and (device-height: 414px) and (-webkit-device-pixel-ratio: 3)">

You would think that the way landscape meta tags are currently generated would be fine... Thanks Apple

Add issue templates

Add test suite for file.js helper

Add single-quotes option for generated meta and link tags

Low code platforms like Outsystems doesn't allow adding double quoted html in the system. Adding an optional single-quotes option will make things easier for platforms with such limitation and for people with single quote taste.

Optimize build for node >=8.16.0

Remove tslib and change tsconfig target to align with engine >=8.16.0 req

Question : How to make image smaller relative to the background ?

If I use margin 30%, some of the generated splashscreen is empty

Thanks

Generate favicon

Please make an option to generate a favicon

Question: landscape

Hi!
What about the next screenshot? :

Does the generator currently cover all cases or any is missing?

Add test suite for images.js helper

Add --portrait and --landscape flags

Currently app generates splash screens on both portrait and landscape format. Some PWAs are constrained to be launched in one of portrait or landscape. So, adding this options will make it possible to only generate splash screen images for a specific orientation.

Utilize util.promisify()

As node engine req has been increased to >=8.16.0 with pptr v2 upgrade, we can use node's util.promisify()method on file service.

Add --splash and --icon flags

Adding optional --splash and --icon flags will make it possible to only generate images for a specific set. This will make it possible to generate splash screen images and icons with different options per each set.

Revisit the project labels

Revisit the project labels after working on issue templates and contribution guidelines.

Add test suite for url.js helper

Expose private API and add typings.d.ts

Currently it's not possible to use underlying API of the library other than using it via executable binary. Exposing private API that binary uses, will make it possible for users to use it in their node projects.

Exporting typings.d.ts will introduce a living documentation for the API.

Release 1.3.0 breaks relative source file locations

Describe the bug
After upgrading to 1.3.0, "npx pwa-asset-generator logo.svg" stopped working. The output files all had the typical "missing image" that you've scene in browsers before. I haven't fully diagnosed the problem, but it still works with absolute urls and with absolute paths for local files, just not relative ones.

To Reproduce
Steps to reproduce the behavior:

1. create a new directory, copy some image to that directory
2. run npx pwa-asset-generator <your image file>
3. open manifest-icon-512.png

Expected behavior
manifest-icon-512.png should contain my image (but it doesn't)

System (please complete the following information):

• OS: macOS high sierra
• node version v11.10.0
• npm version 6.10.3
• cli version 1.3.0 (note, it works fine in 1.2.0)

Screenshots

Create output folder if it doesn't exist

Currently app throws an error when output directory does not exist or it's not writable. If doesn't exist, app should create the folder on behalf of the user.

Path prefix encoding in index.html

Describe the bug
Path prefix are html encoded.
I'm trying to use this for a VueJS app. Index.html file is a template that will be augmented during the build process.

Typically it contains some templating for environment variables

  <link rel="icon" href="<%= BASE_URL %>favicon.ico">

This tool is encoding any path, can we disable this behavior ?

To Reproduce
Steps to reproduce the behavior:

1. Execute cli command pwa-asset-generator -i ./public/index.html -a "<%= BASE_URL %>" ./public/img/assets/logo.svg ./public/assets
2. Open 'index.html'
3. <> are encoded

<link rel="icon" href="&lt;%= BASE_URL %&gt;favicon.ico">

Expected behavior
A clear and concise description of what you expected to happen.

System (please complete the following information):

• cli version 2.0.0

Avoid SPOF when chrome launcher fails to connect

Chrome launcher might fail to connect to system Chromium instance on some systems. This introduced SPOF for the lib.

Use chrome-launcher to skip chromium download

This feature is for adding support for PUPPETEER_SKIP_CHROMIUM_DOWNLOAD env var, which skips downloading chromium installation on install. When this env var is provided, library should use https://www.npmjs.com/package/chrome-launcher to locate chrome on the system.

Create a gif showing the cli usage and output

• Creating a gif that shows apps usage and output
• Putting it as a static resource on repository
• Embedding it to documentation

will attract more users and it will help on libraries promotion.

Avoid shell html creation in module folder

Currently, the library saves a shell html file on the fly to the libraries /static folder each time you execute an image generation. Although it's not a problem for most users, this design causes some issues where there are ownership problems with the installed module on users OS.

We can get over this issue by using following page navigation via puppeteer;
await page.goto(data:text/html,${html});

Add --type and --quality flags

Currently app only generates images in png format. Adding --type flag will make it possible to generate jpg output with compression options provided by --quality flag. This is important for reducing sizes of large launch images with rich background.

Transparent background does not work

Describe the bug
The docs says that transparent background is default but this is not happening

To Reproduce
Steps to reproduce the behavior:

1. Execute cli command npx pwa-asset-generator https://icon-library.net/images/img_566996.png
2. Open generated images
3. See error

Expected behavior
Images with transparent background.

System (please complete the following information):

• OS: windows 10
• node version 12.13.0
• npm version 6.12.0
• cli version 2.1.1

Screenshots
Webstorm show if the background is transparent (which is not in this case)

Add test suite for logger.js helper

Browser timeout exceeds in some cases

We need to increase the browser timeout to 60000 millis to prevent cli exiting with a timeout error.

Calculate relative path distance when meta tags saved to index.html

When index.html is provided to save the meta tags with image paths, relative folder distance of output folder from index.html should be respected.

The automated release is failing 🚨

🚨 The automated release from the master branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you could benefit from your bug fixes and new features.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can resolve this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the master branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here is some links that can help you:

• Usage documentation
• Frequently Asked Questions
• Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

---

Invalid npm token.

The npm token configured in the NPM_TOKEN environment variable must be a valid token allowing to publish to the registry https://registry.npmjs.org/.

If you are using Two-Factor Authentication, make configure the auth-only level is supported. semantic-release cannot publish with the default auth-and-writes level.

Please make sure to set the NPM_TOKEN environment variable in your CI with the exact value of the npm token.

---

Good luck with your project ✨

Your semantic-release bot 📦🚀

Upgrade to pptr 2 to and generate images on single chromium instance

Before puppeteer v2, we had to initialize a new chromium instance to take a screenshot of a different window size. New schreenshot API can change the viewport properly so we just need to create a new tab, no need to create a new instance.

This change will make the lib much less cpu and memory intensive.

Chrome launcher can't kill instances failing with error

When called chrome.kill(), chrome launcher sometimes fails to kill the instance, causing lib to fail at that point.

Extend cli test suite with file saving scenarios

When any of index.html or manifest.json file is provided to a cli, meta information is saved on them. Current functionality of that is not tested in any scenarios. We need to extend cli.test.js file by adding those test to cover existing functionality.

Assets are not created in current folder if output param is not provided

Readme tells that "The assets will be saved to the folder where the command is executed if no output-folder provided". To check this point, I'm executing the example from Readme without output folder provided like that:
pwa-asset-generator https://cdn.freebiesupply.com/logos/large/2x/amazon-icon-logo-png-transparent.png -p "20%" -b "linear-gradient(to top, #fad0c4 0%, #ffd1ff 100%)"

It gives me an error:
cli TypeError: path must be a string or Buffer

Add GitHub actions workflow

Change cli help text to reflect docs

Cli help text doesn't align with readme contents.

Calculate relative path when output is not provided

When output is not provided, file paths are being but as full system paths. It should be changed in a way that it's relative to the execution folder.

Add a pre-release script to update static fallback data

Before every release, we need to generate and update the fallback data. This will introduce an automated approach and help on reducing maintenance effort.

Add dark mode support for iOS

I just found out that we can actually use dark mode media attributes (prefers-color-scheme: dark) to differentiate splash screens on iOS 13, based on user preference. The same media attribute doesn't have any affect on icons, even though it's the same web element and same media attr.

Light mode (default):
<link rel="apple-touch-startup-image" href="light/apple-splash-2048-2732.jpeg" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">

Dark mode:
<link rel="apple-touch-startup-image" href="dark/apple-splash-2048-2732.jpeg" media="(prefers-color-scheme: dark) and (device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">

It has to be declared in that order, tags with no prefers-color-scheme media attr declared first and dark ones declared after.

Chrome launcher does not exit properly on connection error

In case of connect ECONNREFUSED error, chrome launcher instances doesn't get killed. This creates memory issues and introduces SPOF for the lib.

A preferred solution for this is to treat system browser initialization differently and let launcher handle the process management on error.

Migrate code to TypeScript

Migrating code to TypeScript will make the contribution easier for the project.

It will also enable us to deliver a compiled code which will help project to be used with earlier versions of node. Due to ES2015 features used in the code, node engine is restricted for versions <8.3.0

Add option to provide path prefix to generated href links

Would be nice to be able to prepend a path to the href links generated in index.html.

In my case, I'm using pwa-asset-generator in the context of a create-react-app application and my links need to look like this: <link rel="apple-touch-icon" sizes="180x180" href="%PUBLIC_URL%/apple-icon-180.png">

Doesn't write to index.html when using -c option

Should be pretty self explanatory... unless I'm missing something?

Great stuff by the way. Incredibly helpful.

Prevent reformatting index.html

When index.html is provided as an output, cheerio reformats the code style on the file while adding the html tags. It also creates empty new lines when modification happens on already processed index.html file.

Image save path in generateImages API result includes backslash on Windows

Image save path in generateImages API result includes backslash on Windows. We need to replace backslashes with slashes for the path output.

Add contribution guidelines