feat: add support for PWA

[SimonGolms]

Feature Request

Describe the Feature Request
Generate icons for PWA and copy the generated icons into the appropriate PWA folder. If possible update the manifest, too.

Describe Alternatives

• Mobicon: https://github.com/SamVerschueren/mobicon
• Web App Manifest Generator: https://app-manifest.firebaseapp.com/

Related Code

$ cordova-res pwa
$ cordova-res pwa --skip-config --copy

Additional Context

• Set of recommended icon size:

icon-72x72
icon-96x96
icon-120x120
icon-128x128
icon-144x144
icon-152x152
icon-180x180
icon-192x192
icon-384x384
icon-512x512

• W3C Web App Manifest: https://www.w3.org/TR/appmanifest/

[imhoffd]

Thanks for making an issue for this feature request, I'm surprised I didn't have it logged somewhere.

[mlynch]

@SimonGolms taking a look at this one. Where should we output these images by default? I assume we need to make it configurable given static assets for web apps can be in any place in your project tree

[SimonGolms]

Hi @mlynch, thanks for the question and I'm happy to see that this topic will hopefully be taken up again.

In the best case, the default values are automatically used by the detected template.
For the react template the default folder would be public or can be configured e.g. via --pwa-project=foo.
In this folder a file with manifest.json is expected. If this is not the case, it can be configured via --pwa-project-manifest=foo/.webmanifest.
From the manifest.json file the icon directory could be determined. If this is not the case, they are saved per default and following the example under foo/assets/icon. However it can be also configured via --pwa-project-icons-target=src/assets/icon.

By default the icons are created in different recommended sizes (TBD¹), but this can also be configured with --pwa-project-icons-size=32,64,128,192,384,512.

Furthermore the purpose of the icons can be configured with --pwa-project-icons-purpose=maskable. But this is not set by default.

By default the favicon should also be updated. Since it is similar to the Android Bar and Notifications icons in my opinion. If this is not desired, it can be skipped via --pwa-project-skip-favicon.

Footnotes

1. According to the Google docs, a general icon size of 192x192 and 512x512 pixels is sufficient for Android and Browser. For completeness, 180x180 pixels would be recommended for iOS as well. Reference: https://web.dev/installable-manifest/#recommendations & https://web.dev/apple-touch-icon ↩

[mlynch]

@SimonGolms thanks, this is very helpful. React is easy, but what about Angular? The www folder is gitignored, so it would probably be src/assetsbut your manifest will be in src/ I believe. Maybe it's as simple as just using src/assets for Angular

[SimonGolms]

@mlynch, true... my development time with angular is a while back and no experciense with vue so far, but it handles as well differently. 🤯

Anyway, I took a look at the standard templates and compared the PWA support according to the docs and can give you the following insights:

React

Recommended default values:

• manifest: public/manifest.json
• icon assets: public/assets/icon/

Angular

PWA support for angular apps needs to be added first with ng add @angular/pwa. The following relevant files will be added/created:

  src
  ├─ assets
+ │  └─ icons
+ │     ├─ icon-72x72.png
+ │     ├─ icon-96x96.png
+ │     ├─ icon-128x128.png
+ │     ├─ icon-144x144.png
+ │     ├─ icon-152x152.png
+ │     ├─ icon-192x192.png
+ │     ├─ icon-384x384.png
+ │     └─ icon-512x512.png
+ └─ manifest.webmanifest

See: https://angular.io/guide/service-worker-getting-started#adding-a-service-worker-to-your-project

Recommended default values:

• manifest: src/manifest.webmanifest
• icon assets: src/assets/icons/

Vue

PWA support for vue apps needs to be added first with vue add pwa. The following relevant files will be added/created:

  public
+ └─ img
+    └─ icons
+       ├─ android-chrome-192x192.png
+       ├─ android-chrome-512x512.png
+       ├─ android-chrome-maskable-192x192.png
+       ├─ android-chrome-maskable-512x512.png
+       ├─ apple-touch-icon-120x120.png
+       ├─ apple-touch-icon-152x152.png
+       ├─ apple-touch-icon-180x180.png
+       ├─ apple-touch-icon-60x60.png
+       ├─ apple-touch-icon-76x76.png
+       ├─ apple-touch-icon.png
+       ├─ favicon-16x16.png
+       ├─ favicon-32x32.png
+       ├─ msapplication-icon-144x144.png
+       ├─ mstile-150x150.png
+       └─ safari-pinned-tab.svg

See: https://cli.vuejs.org/core-plugins/pwa.html#configuration

Recommended default values:

• manifest: part of the vue plugin configuration vue.config.js or in the vue field of package.json (this needs to be updated manually and is not part of the vue add pwa command)
• icon assets: public/img/icons/

---

As you can see in the Vue example, it would be great if we could also add the filename and a possible scaling to the generated icon via further configuration, something like --pwa-project-icons-settings='[{"name":"android-chrome-192x192","output":"png","height":192,"width":192},{"name":"android-chrome-maskable-192x192","output":"png","height":192,"width":192,"scale":0.8},{"name":"apple-touch-icon","output":"png","height":180,"width":180},...]'

SVG support would be great, but I don't see it in v1.0.0.

I haven't looked at the code base of the new @capacitor/assets package yet, but maybe it makes sense not to detect the template variant automatically, instead to configure it via cli parameters. Either via @capacitor/assets pwa --template=angular|react|vue or @capacitor/assets pwa-(angular|react|vue)? 🤷‍♂️

[mlynch]

This is awesome, thank you so much! I'm definitely missing some stuff in the 1.x branch that I'll have to add for the above, but I have basic PWA asset detection and output working if you're curious: https://github.com/ionic-team/capacitor-assets/tree/1.x

Next thing on the list is supporting the adaptive icons, should be straightforward. I'd rather keep the CLI args needed to a minimum, I think if you're that prepared in advance to supply args like that you probably don't need this tool in the first place 😅

[mlynch]

Basic PWA Support added in @capacitor/assets, closing