chore: dev and staging apple touch icons 0.45 padding

.eslintignore

@@ -6,6 +6,8 @@
 *.txt
 Dockerfile
 public/
+public-dev/
+public-staging/
 https-dev-config/localhost.crt
 https-dev-config/localhost.key
 Dockerfile

docs/content/80.pwa.md

@@ -103,6 +103,50 @@ 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
+
+::alert{type="info"}
+**WIP:** We are working to generate PWA icons using a Node script.
+::
+
+Elk icons have been generated using [PWA Builder Image Generator](https://www.pwabuilder.com/imageGenerator), we generate the icons 3 times per environment: transparent, apple touch 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 apple touch icons:
+- upload `logo.svg`  from `public` folders: `public`, ` public-dev` and `public-staging`
+- configure `0,45` as padding
+- check `Custom` in background color and set `#ffffff` as color
+- check only `iOS` in platforms
+- click on `Generate` button
+
+Once generated, we use the following icons:
+- `ios/180.png` for `apple-touch-icon.png`
+
+To generate maskable icons:
+- upload `logo.svg`  from `public` folders: `public`, ` public-dev` and `public-staging`
+- configure `0,6` 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:** to generate `favicon.ico` icons, we use [RealFaviconGenerator](https://realfavicongenerator.net/) providing `logo.svg` from `public` folders: `public`, ` public-dev` and `public-staging` (transparent 64x64 32 bit).
+::
+
 ### 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/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

public-dev/logo.svg

@@ -18,7 +18,7 @@
      maskUnits="userSpaceOnUse"
      style="mask-type:alpha">
     <path
-       fill="#D9D9D9"
+       fill="white"
        d="M244 123c0 64.617-38.383 112-103 112-64.617 0-103-30.883-103-95.5C38 111.194-8.729 36.236 8 16 29.46-9.959 88.689 6 125 6c64.617 0 119 52.383 119 117Z"
        id="path19" />
   </mask>

public-staging/logo.svg

@@ -18,7 +18,7 @@
      maskUnits="userSpaceOnUse"
      style="mask-type:alpha">
     <path
-       fill="#D9D9D9"
+       fill="white"
        d="M244 123c0 64.617-38.383 112-103 112-64.617 0-103-30.883-103-95.5C38 111.194-8.729 36.236 8 16 29.46-9.959 88.689 6 125 6c64.617 0 119 52.383 119 117Z"
        id="path19" />
   </mask>

public/logo.svg

@@ -18,7 +18,7 @@
      maskUnits="userSpaceOnUse"
      style="mask-type:alpha">
     <path
-       fill="#D9D9D9"
+       fill="white"
        d="M244 123c0 64.617-38.383 112-103 112-64.617 0-103-30.883-103-95.5C38 111.194-8.729 36.236 8 16 29.46-9.959 88.689 6 125 6c64.617 0 119 52.383 119 117Z"
        id="path19" />
   </mask>