diff --git a/docs/content/80.pwa.md b/docs/content/80.pwa.md index f2db0f5d..929de881 100644 --- a/docs/content/80.pwa.md +++ b/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. diff --git a/modules/build-env.ts b/modules/build-env.ts index 3f5656d0..9052dd94 100644 --- a/modules/build-env.ts +++ b/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: '/' }) }, }) diff --git a/modules/pwa/i18n.ts b/modules/pwa/i18n.ts index e52bdc8b..4f3cf732 100644 --- a/modules/pwa/i18n.ts +++ b/modules/pwa/i18n.ts @@ -78,6 +78,11 @@ export async function createI18n(): Promise { 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 { src: 'pwa-512x512.png', sizes: '512x512', type: 'image/png', - purpose: 'any', }, { src: 'maskable-icon.png', @@ -114,6 +118,8 @@ export async function createI18n(): Promise { }, } + // TODO: add related_applications, only when env === 'release' + const locales: RequiredWebManifestEntry[] = await Promise.all( pwaLocales .filter(l => l.code !== 'en-US') diff --git a/package.json b/package.json index bfd0617e..784e4aa9 100644 --- a/package.json +++ b/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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 01e3fda5..3669e2eb 100644 --- a/pnpm-lock.yaml +++ b/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 diff --git a/public-dev/maskable-icon.png b/public-dev/maskable-icon.png index 82864824..f0935013 100644 Binary files a/public-dev/maskable-icon.png and b/public-dev/maskable-icon.png differ diff --git a/public-dev/pwa-192x192.png b/public-dev/pwa-192x192.png index fd6c0ed3..218ae737 100644 Binary files a/public-dev/pwa-192x192.png and b/public-dev/pwa-192x192.png differ diff --git a/public-dev/pwa-512x512.png b/public-dev/pwa-512x512.png index 609b9d15..cea393dc 100644 Binary files a/public-dev/pwa-512x512.png and b/public-dev/pwa-512x512.png differ diff --git a/public-dev/pwa-windows-44x44-64.png b/public-dev/pwa-windows-44x44-64.png new file mode 100644 index 00000000..10c43968 Binary files /dev/null and b/public-dev/pwa-windows-44x44-64.png differ diff --git a/public-staging/maskable-icon.png b/public-staging/maskable-icon.png index 0f6560a3..3f5616ba 100644 Binary files a/public-staging/maskable-icon.png and b/public-staging/maskable-icon.png differ diff --git a/public-staging/pwa-192x192.png b/public-staging/pwa-192x192.png index 2416d6e9..7bac7f39 100644 Binary files a/public-staging/pwa-192x192.png and b/public-staging/pwa-192x192.png differ diff --git a/public-staging/pwa-512x512.png b/public-staging/pwa-512x512.png index 661be7e3..3f7bbe31 100644 Binary files a/public-staging/pwa-512x512.png and b/public-staging/pwa-512x512.png differ diff --git a/public-staging/pwa-windows-44x44-64.png b/public-staging/pwa-windows-44x44-64.png new file mode 100644 index 00000000..82437679 Binary files /dev/null and b/public-staging/pwa-windows-44x44-64.png differ diff --git a/public/maskable-icon.png b/public/maskable-icon.png index 63518cca..816f809a 100644 Binary files a/public/maskable-icon.png and b/public/maskable-icon.png differ diff --git a/public/pwa-192x192.png b/public/pwa-192x192.png index e7e81d6d..b77b944e 100644 Binary files a/public/pwa-192x192.png and b/public/pwa-192x192.png differ diff --git a/public/pwa-512x512.png b/public/pwa-512x512.png index fe911849..c9bb40fd 100644 Binary files a/public/pwa-512x512.png and b/public/pwa-512x512.png differ diff --git a/public/pwa-windows-44x44-64.png b/public/pwa-windows-44x44-64.png new file mode 100644 index 00000000..222225f5 Binary files /dev/null and b/public/pwa-windows-44x44-64.png differ