feat(pwa): change default icons

docs/content/80.pwa.md

@@ -103,6 +103,40 @@ Elk will generate 2 web manifests per locale, one for light theme and one for da
 
 You can check web manifest generation on [modules/pwa/i18n.ts](https://github.com/elk-zone/elk/blob/main/modules/pwa/i18n.ts) module.
 
+### PWA Icons
+
+Elk icons have been generated using [PWA Builder Image Generator](https://www.pwabuilder.com/imageGenerator), we generate the icons twice per environment: transparent and maskable icons.
+
+To generate transparent icons:
+- upload `logo.svg`  from `public` folders: `public`, ` public-dev` and `public-staging`
+- configure `0,1` as padding
+- check `Transparent` in background color
+- check `Windows 11` and `Android` in platforms
+- click on `Generate` button
+
+Once generated, we use the following icons:
+- `windows11/Square44x44Logo.altform-lightunplated_targetsize-64.png` for `pwa-windows-44x44-64.png`
+- `android/android-launchericon-192x192.png` for `pwa-192x192.png` 
+- `android/android-launchericon-512x512.png` for `pwa-512x512.png`
+
+To generate maskable icons:
+- upload `logo.svg`  from `public` folders: `public`, ` public-dev` and `public-staging`
+- configure `0,5` as padding
+- check `Custom` in background color and set `#ffffff` as color
+- check only `Android` in platforms
+- click on `Generate` button
+
+Once generated, we use the following icons:
+- `android/android-launchericon-512x512.png` for `maskable-icon.png`
+
+::alert{type="info"}
+**Note 1:** to generate `favicon.ico` we use [RealFaviconGenerator](https://realfavicongenerator.net/), we upload `logo.svg` from `public` folders: `public`, ` public-dev` and `public-staging`.
+::
+
+::alert{type="info"}
+**Note 2:** Safari don't use `apple-touch-icon` and so we don't need to generate it anymore: we use [RealFaviconGenerator](https://realfavicongenerator.net/) to generate it, using white background color and 10px of padding.
+::
+
 ### PWA UI Components
 
 Elk will provide a set of UI components to allow you to customize the PWA installation prompt on browsers with [beforeinstallprompt](https://web.dev/customize-install/) support.

modules/build-env.ts

@@ -29,8 +29,8 @@ export default defineNuxtModule({
 
     nuxt.options.nitro.publicAssets = nuxt.options.nitro.publicAssets || []
     if (env === 'dev')
-      nuxt.options.nitro.publicAssets.unshift({ dir: resolve('../public-dev') })
+      nuxt.options.nitro.publicAssets.unshift({ dir: resolve('../public-dev'), baseURL: '/' })
     else if (env === 'canary' || env === 'preview' || !isCI)
-      nuxt.options.nitro.publicAssets.unshift({ dir: resolve('../public-staging') })
+      nuxt.options.nitro.publicAssets.unshift({ dir: resolve('../public-staging'), baseURL: '/' })
   },
 })

modules/pwa/i18n.ts

@@ -78,6 +78,11 @@ export async function createI18n(): Promise<LocalizedWebManifest> {
     display_override: ['window-controls-overlay'],
     categories: ['social', 'social networking'],
     icons: [
+      {
+        src: 'pwa-windows-44x44-64.png',
+        sizes: '64x64',
+        type: 'image/png',
+      },
       {
         src: 'pwa-192x192.png',
         sizes: '192x192',
@@ -87,7 +92,6 @@ export async function createI18n(): Promise<LocalizedWebManifest> {
         src: 'pwa-512x512.png',
         sizes: '512x512',
         type: 'image/png',
-        purpose: 'any',
       },
       {
         src: 'maskable-icon.png',
@@ -114,6 +118,8 @@ export async function createI18n(): Promise<LocalizedWebManifest> {
     },
   }
 
+  // TODO: add related_applications, only when env === 'release'
+
   const locales: RequiredWebManifestEntry[] = await Promise.all(
     pwaLocales
       .filter(l => l.code !== 'en-US')

package.json

@@ -94,7 +94,7 @@
     "ufo": "^1.1.1",
     "ultrahtml": "^1.2.0",
     "unimport": "^3.0.6",
-    "vite-plugin-pwa": "^0.15.0",
+    "vite-plugin-pwa": "^0.15.1",
     "vue-advanced-cropper": "^2.8.8",
     "vue-virtual-scroller": "2.0.0-beta.8",
     "workbox-build": "^6.5.4",

pnpm-lock.yaml

@@ -208,8 +208,8 @@ importers:
         specifier: ^3.0.6
         version: 3.0.6(rollup@2.79.1)
       vite-plugin-pwa:
-        specifier: ^0.15.0
-        version: 0.15.0(vite@4.3.4)(workbox-build@6.5.4)(workbox-window@6.5.4)
+        specifier: ^0.15.1
+        version: 0.15.1(vite@4.3.4)(workbox-build@6.5.4)(workbox-window@6.5.4)
       vue-advanced-cropper:
         specifier: ^2.8.8
         version: 2.8.8(vue@3.2.45)
@@ -13387,8 +13387,8 @@ packages:
       - supports-color
     dev: false
 
-  /vite-plugin-pwa@0.15.0(vite@4.3.4)(workbox-build@6.5.4)(workbox-window@6.5.4):
-    resolution: {integrity: sha512-gpmx3BeubsRIXRBkjPToOTJbo8fknNmZFQs24i0TPZyaNVa0n27YHDo0Y72amnO70WvHKGE3e1fn8SYUP7e8SA==}
+  /vite-plugin-pwa@0.15.1(vite@4.3.4)(workbox-build@6.5.4)(workbox-window@6.5.4):
+    resolution: {integrity: sha512-lJVzEYda/Y9AfwxFzX0rV+QCQ2+WdBoEGtR1RBZKWxvrJ4NWEH1VZaHOMyzvRiYhWQsi7aFhewsp1CDvN/R1Og==}
     peerDependencies:
       vite: ^3.1.0 || ^4.0.0
       workbox-build: ^6.5.4