chore: add generate pwa icons script (#2130)

.eslintignore

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

config/pwa.ts

@@ -15,6 +15,16 @@ export const pwa: VitePWANuxtOptions = {
   injectManifest: {
     globPatterns: ['**/*.{js,json,css,html,txt,svg,png,ico,webp,woff,woff2,ttf,eot,otf,wasm}'],
     globIgnores: ['emojis/**', 'shiki/**', 'manifest**.webmanifest'],
+    manifestTransforms: [(entries) => {
+      const manifest = entries.map((entry) => {
+        if (entry.url.length > 1 && entry.url[0] !== '/')
+          entry.url = `/${entry.url}`
+
+        return entry
+      })
+
+      return { manifest, warnings: [] }
+    }],
   },
   devOptions: {
     enabled: process.env.VITE_DEV_PWA === 'true',

docs/content/80.pwa.md

@@ -103,6 +103,16 @@ 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's favicon and PWA icons are generated from [Elk's SVG Logo](https://github.com/elk-zone/elk/blob/main/public/logo.svg) via [custom script](https://github.com/elk-zone/elk/blob/main/scripts/generate-pwa-icons.ts), using [sharp](https://github.com/lovell/sharp/) and [sharp-io](https://github.com/ssnangua/sharp-ico) libraries:
+- favicon.ico: transparent 64x64 32-bits icon
+- pwa-64x64.png: transparent 64x64 8-bits icon (optimized from 32-bitss color)
+- pwa-192x192.png: transparent 192x192 8-bits icon (optimized from 32-bits color)
+- pwa-512x512.png: transparent 512x512 8-bits icon (optimized from 32-bit color)
+- maskable-icon.png: white background 512x512 8-bits icon (optimized from 32-bits color)
+- apple-touch-icon.png: white background 180x180 8-bits icon (optimized from 32-bits color)
+
 ### 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

@@ -76,8 +76,13 @@ export async function createI18n(): Promise<LocalizedWebManifest> {
     orientation: 'natural',
     display: 'standalone',
     display_override: ['window-controls-overlay'],
-    categories: ['social', 'social networking'],
+    categories: ['social', 'social networking', 'news'],
     icons: [
+      {
+        src: 'pwa-64x64.png',
+        sizes: '64x64',
+        type: 'image/png',
+      },
       {
         src: 'pwa-192x192.png',
         sizes: '192x192',
@@ -114,6 +119,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

@@ -25,6 +25,7 @@
     "update:team:avatars": "tsx scripts/avatars.ts",
     "cleanup-translations": "tsx scripts/cleanup-translations.ts",
     "prepare-translation-status": "tsx scripts/prepare-translation-status.ts",
+    "generate-pwa-icons": "tsx scripts/generate-pwa-icons.ts",
     "postinstall": "ignore-dependency-scripts \"stale-dep -u && simple-git-hooks && nuxi prepare && nr prepare-translation-status\"",
     "release": "stale-dep && bumpp && tsx scripts/release.ts"
   },
@@ -94,7 +95,7 @@
     "ufo": "^1.1.2",
     "ultrahtml": "^1.2.0",
     "unimport": "^3.0.7",
-    "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",
@@ -120,6 +121,8 @@
     "lint-staged": "^13.2.2",
     "nuxt": "3.5.2",
     "prettier": "^2.8.8",
+    "sharp": "^0.32.1",
+    "sharp-ico": "^0.1.5",
     "simple-git-hooks": "^2.8.1",
     "tsx": "^3.12.7",
     "typescript": "^5.0.4",