Ionic’s support for Progressive Web Apps (PWAs) continues to improve. Currently, there is one small hiccup in the workflow, the generation of icons. When you run
$ ng add @angular/pwa
a manifest.json file is automatically generated and a set of icons added to the src/assets/icon directory. If you have been using Ionic to generate native mobile apps, then you are probably familiar with this command:
$ ionic cordova resouces
This CLI task will generate a collection of icons that need to be included. Unfortunately, it currently does not generate all the sizes that are referenced in the manifest.json file. To save a little time here is a handy table of the icons a PWA should have and the corresponding icon from Cordova.
| PWA | Cordova |
|---|---|
| icon-72×72.png | drawable-hdpi-icon.png |
| icon-96×96.png | drawable-xhdpi-icon.png |
| icon-128×128.png | – |
| icon-144×144.png | drawable-xxhdpi-icon.png |
| icon-152×152.png | icon-76@2x.png |
| icon-192×192.png | drawable-xxxhdpi-icon.png |
| icon-384×384.png | – |
| icon-512×512.png | – |
You will need to generate three icons to have a complete. There is a 1024×102 icon available that can be downsized quickly.
Nice one Chris. Thanks.