fix(pwa): pwa icons in dev and build (#2137)

This commit is contained in:
Joaquín Sánchez 2023-05-30 19:38:24 +02:00 committed by GitHub
parent d601a117c0
commit c6c4d52556
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 68 additions and 26 deletions

View file

@ -1,14 +1,27 @@
import { mkdir, writeFile } from 'node:fs/promises'
import { mkdir, readFile, writeFile } from 'node:fs/promises'
import type { Buffer } from 'node:buffer'
import { dirname } from 'node:path'
import { fileURLToPath } from 'node:url'
import { addPlugin, createResolver, defineNuxtModule } from '@nuxt/kit'
import type { VitePluginPWAAPI } from 'vite-plugin-pwa'
import { VitePWA } from 'vite-plugin-pwa'
import type { Plugin } from 'vite'
import { join } from 'pathe'
import { join, resolve } from 'pathe'
import type { VitePWANuxtOptions } from './types'
import { configurePWAOptions } from './config'
import { type LocalizedWebManifest, createI18n, pwaLocales } from './i18n'
export * from './types'
interface PwaDevIcon {
src: string
type: string
}
interface ResolvedPwaDevIcon extends PwaDevIcon {
data: Promise<Buffer>
}
export default defineNuxtModule<VitePWANuxtOptions>({
meta: {
name: 'elk-pwa',
@ -88,12 +101,33 @@ export default defineNuxtModule<VitePWANuxtOptions>({
})
}
viteInlineConfig.plugins.push({
name: 'elk:pwa:locales:dev',
name: 'elk:pwa:dev',
apply: 'serve',
configureServer(server) {
const icons: PwaDevIcon[] = webmanifests?.['en-US']?.icons as any
const mappedIcons: PwaDevIcon[] = [
...icons.map(({ src, type }) => ({ src, type })),
{ src: 'favicon.ico', type: 'image/x-icon' },
{ src: 'apple-touch-icon.png', type: 'image/png' },
{ src: 'logo.svg', type: 'image/svg+xml' },
]
const folder = dirname(fileURLToPath(import.meta.url))
const useIcons = mappedIcons.reduce((acc, icon) => {
icon.src = `${nuxt.options.app.baseURL}${icon.src}`
acc[icon.src] = {
...icon,
data: readFile(resolve(join(folder, '../../public-dev', icon.src))),
}
return acc
}, <Record<string, ResolvedPwaDevIcon>>{})
const localeMatcher = new RegExp(`^${nuxt.options.app.baseURL}manifest-(.*).webmanifest$`)
server.middlewares.use((req, res, next) => {
const match = req.url?.match(localeMatcher)
server.middlewares.use(async (req, res, next) => {
const url = req.url
if (!url)
return next()
const match = url.match(localeMatcher)
const entry = match && webmanifests![match[1]]
if (entry) {
res.statusCode = 200
@ -101,10 +135,18 @@ export default defineNuxtModule<VitePWANuxtOptions>({
res.setHeader('Cache-Control', 'public, max-age=0, must-revalidate')
res.write(JSON.stringify(entry), 'utf-8')
res.end()
return
}
else {
next()
}
const icon = useIcons[url]
if (!icon)
return next()
res.statusCode = 200
res.setHeader('Content-Type', icon.type)
res.setHeader('Cache-Control', 'public, max-age=0, must-revalidate')
res.write(await icon.data)
res.end()
})
},
})

View file

@ -95,7 +95,7 @@
"ufo": "^1.1.2",
"ultrahtml": "^1.2.0",
"unimport": "^3.0.7",
"vite-plugin-pwa": "^0.15.1",
"vite-plugin-pwa": "^0.15.2",
"vue-advanced-cropper": "^2.8.8",
"vue-virtual-scroller": "2.0.0-beta.8",
"workbox-build": "^6.5.4",

View file

@ -205,8 +205,8 @@ importers:
specifier: ^3.0.7
version: 3.0.7(rollup@2.79.1)
vite-plugin-pwa:
specifier: ^0.15.1
version: 0.15.1(vite@4.3.9)(workbox-build@6.5.4)(workbox-window@6.5.4)
specifier: ^0.15.2
version: 0.15.2(vite@4.3.9)(workbox-build@6.5.4)(workbox-window@6.5.4)
vue-advanced-cropper:
specifier: ^2.8.8
version: 2.8.8(vue@3.3.4)
@ -1994,8 +1994,8 @@ packages:
vue-i18n:
optional: true
dependencies:
'@intlify/message-compiler': 9.3.0-beta.17
'@intlify/shared': 9.3.0-beta.17
'@intlify/message-compiler': 9.3.0-beta.18
'@intlify/shared': 9.3.0-beta.18
jsonc-eslint-parser: 1.4.1
source-map: 0.6.1
vue-i18n: 9.3.0-beta.16(vue@3.3.4)
@ -2014,8 +2014,8 @@ packages:
vue-i18n:
optional: true
dependencies:
'@intlify/message-compiler': 9.3.0-beta.17
'@intlify/shared': 9.3.0-beta.17
'@intlify/message-compiler': 9.3.0-beta.18
'@intlify/shared': 9.3.0-beta.18
jsonc-eslint-parser: 1.4.1
source-map: 0.6.1
vue-i18n: 9.3.0-beta.16(vue@3.3.4)
@ -2047,11 +2047,11 @@ packages:
source-map: 0.6.1
dev: false
/@intlify/message-compiler@9.3.0-beta.17:
resolution: {integrity: sha512-i7hvVIRk1Ax2uKa9xLRJCT57to08OhFMhFXXjWN07rmx5pWQYQ23MfX1xgggv9drnWTNhqEiD+u4EJeHoS5+Ww==}
engines: {node: '>= 14'}
/@intlify/message-compiler@9.3.0-beta.18:
resolution: {integrity: sha512-pN/MOrKjWHJWSRxt0kEdqPcPqHV1pJlJXmvrX8Lv12HRWmiGo1w4lVBz5POS1sych+gk/DK4RvdZZJTmFwrXGA==}
engines: {node: '>= 16'}
dependencies:
'@intlify/shared': 9.3.0-beta.17
'@intlify/shared': 9.3.0-beta.18
source-map: 0.6.1
dev: false
@ -2060,9 +2060,9 @@ packages:
engines: {node: '>= 14'}
dev: false
/@intlify/shared@9.3.0-beta.17:
resolution: {integrity: sha512-mscf7RQsUTOil35jTij4KGW1RC9SWQjYScwLxP53Ns6g24iEd5HN7ksbt9O6FvTmlQuX77u+MXpBdfJsGqizLQ==}
engines: {node: '>= 14'}
/@intlify/shared@9.3.0-beta.18:
resolution: {integrity: sha512-Z+XZ1YQL/ZudauayZFNbW2PDf4ac7UBs3PCRsBRb2UcAgat3jN9IZYNDyluQBx4Gmko02kvqc8kC5uJmMlGhmQ==}
engines: {node: '>= 16'}
dev: false
/@intlify/unplugin-vue-i18n@0.8.1(vue-i18n@9.3.0-beta.16):
@ -2081,7 +2081,7 @@ packages:
optional: true
dependencies:
'@intlify/bundle-utils': 3.4.0(vue-i18n@9.3.0-beta.16)
'@intlify/shared': 9.3.0-beta.17
'@intlify/shared': 9.3.0-beta.18
'@rollup/pluginutils': 4.2.1
'@vue/compiler-sfc': 3.3.4
debug: 4.3.4
@ -13898,8 +13898,8 @@ packages:
- supports-color
dev: false
/vite-plugin-pwa@0.15.1(vite@4.3.9)(workbox-build@6.5.4)(workbox-window@6.5.4):
resolution: {integrity: sha512-lJVzEYda/Y9AfwxFzX0rV+QCQ2+WdBoEGtR1RBZKWxvrJ4NWEH1VZaHOMyzvRiYhWQsi7aFhewsp1CDvN/R1Og==}
/vite-plugin-pwa@0.15.2(vite@4.3.9)(workbox-build@6.5.4)(workbox-window@6.5.4):
resolution: {integrity: sha512-l1srtaad5NMNrAtAuub6ArTYG5Ci9AwofXXQ6IsbpCMYQ/0HUndwI7RB2x95+1UBFm7VGttQtT7woBlVnNhBRw==}
peerDependencies:
vite: ^3.1.0 || ^4.0.0
workbox-build: ^6.5.4
@ -14195,7 +14195,7 @@ packages:
vue-router:
optional: true
dependencies:
'@intlify/shared': 9.3.0-beta.17
'@intlify/shared': 9.3.0-beta.18
'@intlify/vue-i18n-bridge': 0.8.0(vue-i18n@9.3.0-beta.16)
'@intlify/vue-router-bridge': 0.8.0(vue-router@4.2.2)(vue@3.3.4)
ufo: 1.1.2