feat: add support for PWA about capacitor-assets HOT 7 CLOSED

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 😅

from capacitor-assets.

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

from capacitor-assets.

@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

from capacitor-assets.

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.

from capacitor-assets.

@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

from capacitor-assets.

@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)? 🤷‍♂️

from capacitor-assets.

Basic PWA Support added in @capacitor/assets, closing

from capacitor-assets.