parent
18056038c7
commit
85ac005570
|
@ -1,5 +1,3 @@
|
|||
import { pwaInfo } from 'virtual:pwa-info'
|
||||
import type { Link } from '@unhead/schema'
|
||||
import type { Directions } from 'vue-i18n-routing'
|
||||
import { buildInfo } from 'virtual:build-info'
|
||||
import type { LocaleObject } from '#i18n'
|
||||
|
@ -7,28 +5,6 @@ import type { LocaleObject } from '#i18n'
|
|||
export function setupPageHeader() {
|
||||
const { locale, locales, t } = useI18n()
|
||||
|
||||
const link: Link[] = []
|
||||
|
||||
if (pwaInfo && pwaInfo.webManifest) {
|
||||
const { webManifest } = pwaInfo
|
||||
if (webManifest) {
|
||||
const { href, useCredentials } = webManifest
|
||||
if (useCredentials) {
|
||||
link.push({
|
||||
rel: 'manifest',
|
||||
href,
|
||||
crossorigin: 'use-credentials',
|
||||
})
|
||||
}
|
||||
else {
|
||||
link.push({
|
||||
rel: 'manifest',
|
||||
href,
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const localeMap = (locales.value as LocaleObject[]).reduce((acc, l) => {
|
||||
acc[l.code!] = l.dir ?? 'auto'
|
||||
return acc
|
||||
|
@ -46,6 +22,12 @@ export function setupPageHeader() {
|
|||
titleTemplate += ` (${buildInfo.env})`
|
||||
return titleTemplate
|
||||
},
|
||||
link,
|
||||
link: process.client && useRuntimeConfig().public.pwaEnabled
|
||||
? () => [{
|
||||
key: 'webmanifest',
|
||||
rel: 'manifest',
|
||||
href: `/manifest-${locale.value}.webmanifest`,
|
||||
}]
|
||||
: [],
|
||||
})
|
||||
}
|
||||
|
|
|
@ -1,7 +1,5 @@
|
|||
import { isCI, isDevelopment } from 'std-env'
|
||||
import type { VitePWANuxtOptions } from '../modules/pwa/types'
|
||||
import { APP_NAME } from '../constants'
|
||||
import { getEnv } from './env'
|
||||
|
||||
export const pwa: VitePWANuxtOptions = {
|
||||
mode: isCI ? 'production' : 'development',
|
||||
|
@ -13,40 +11,9 @@ export const pwa: VitePWANuxtOptions = {
|
|||
strategies: 'injectManifest',
|
||||
injectRegister: false,
|
||||
includeManifestIcons: false,
|
||||
manifest: async () => {
|
||||
const { env } = await getEnv()
|
||||
const envName = `${env === 'release' ? '' : ` (${env})`}`
|
||||
return {
|
||||
scope: '/',
|
||||
id: '/',
|
||||
name: `${APP_NAME}${envName}`,
|
||||
short_name: `${APP_NAME}${envName}`,
|
||||
description: `A nimble Mastodon Web Client${envName}`,
|
||||
theme_color: '#ffffff',
|
||||
icons: [
|
||||
{
|
||||
src: 'pwa-192x192.png',
|
||||
sizes: '192x192',
|
||||
type: 'image/png',
|
||||
},
|
||||
{
|
||||
src: 'pwa-512x512.png',
|
||||
sizes: '512x512',
|
||||
type: 'image/png',
|
||||
},
|
||||
/*
|
||||
{
|
||||
src: 'logo.svg',
|
||||
sizes: '250x250',
|
||||
type: 'image/png',
|
||||
purpose: 'any maskable',
|
||||
},
|
||||
*/
|
||||
],
|
||||
}
|
||||
},
|
||||
manifest: false,
|
||||
injectManifest: {
|
||||
globPatterns: ['**/*.{js,json,css,html,txt,svg,png,ico,webp,woff,woff2,ttf,eot,otf,wasm}'],
|
||||
globPatterns: ['**/*.{js,json,css,html,txt,svg,png,ico,webp,woff,woff2,ttf,eot,otf,wasm,webmanifest}'],
|
||||
globIgnores: ['emojis/**'],
|
||||
},
|
||||
devOptions: {
|
||||
|
|
|
@ -187,7 +187,29 @@
|
|||
"dismiss": "Dismiss",
|
||||
"title": "New Elk update available!",
|
||||
"update": "Update",
|
||||
"update_available_short": "Update Elk"
|
||||
"update_available_short": "Update Elk",
|
||||
"webmanifest": {
|
||||
"dev": {
|
||||
"description": "A nimble Mastodon web client (dev)",
|
||||
"name": "Elk (dev)",
|
||||
"short_name": "Elk (dev)"
|
||||
},
|
||||
"main": {
|
||||
"description": "A nimble Mastodon web client (main)",
|
||||
"name": "Elk (main)",
|
||||
"short_name": "Elk (main)"
|
||||
},
|
||||
"preview": {
|
||||
"description": "A nimble Mastodon web client (preview)",
|
||||
"name": "Elk (preview)",
|
||||
"short_name": "Elk (preview)"
|
||||
},
|
||||
"release": {
|
||||
"description": "A nimble Mastodon web client",
|
||||
"name": "Elk",
|
||||
"short_name": "Elk"
|
||||
}
|
||||
}
|
||||
},
|
||||
"search": {
|
||||
"search_desc": "Search for people & hashtags"
|
||||
|
|
|
@ -0,0 +1,85 @@
|
|||
import { readFile } from 'fs-extra'
|
||||
import { resolve } from 'pathe'
|
||||
import type { ManifestOptions } from 'vite-plugin-pwa'
|
||||
import { getEnv } from '../../config/env'
|
||||
import { i18n } from '../../config/i18n'
|
||||
import type { LocaleObject } from '#i18n'
|
||||
|
||||
export type LocalizedWebManifest = Record<string, Partial<ManifestOptions>>
|
||||
|
||||
export const pwaLocales = i18n.locales as LocaleObject[]
|
||||
|
||||
type WebManifestEntry = Pick<ManifestOptions, 'name' | 'short_name' | 'description'>
|
||||
type RequiredWebManifestEntry = Required<WebManifestEntry & Pick<ManifestOptions, 'dir' | 'lang'>>
|
||||
|
||||
export const createI18n = async (): Promise<LocalizedWebManifest> => {
|
||||
const { env } = await getEnv()
|
||||
const envName = `${env === 'release' ? '' : `(${env})`}`
|
||||
const { pwa } = await readI18nFile('en-US.json')
|
||||
|
||||
const defaultManifest: Required<WebManifestEntry> = pwa.webmanifest[env]
|
||||
|
||||
const locales: RequiredWebManifestEntry[] = await Promise.all(
|
||||
pwaLocales
|
||||
.filter(l => l.code !== 'en-US')
|
||||
.map(async ({ code, dir = 'ltr', file }) => {
|
||||
// read locale file
|
||||
const { pwa, app_name, app_desc_short } = await readI18nFile(file!)
|
||||
const entry: WebManifestEntry = pwa?.webmanifest?.[env] ?? {}
|
||||
if (!entry.name && app_name)
|
||||
entry.name = dir === 'rtl' ? `${envName} ${app_name}` : `${app_name} ${envName}`
|
||||
|
||||
if (!entry.short_name && app_name)
|
||||
entry.short_name = dir === 'rtl' ? `${envName} ${app_name}` : `${app_name} ${envName}`
|
||||
|
||||
if (!entry.description && app_desc_short)
|
||||
entry.description = app_desc_short
|
||||
|
||||
return <RequiredWebManifestEntry>{
|
||||
...defaultManifest,
|
||||
...entry,
|
||||
lang: code,
|
||||
dir,
|
||||
}
|
||||
}),
|
||||
)
|
||||
locales.push({
|
||||
...defaultManifest,
|
||||
lang: 'en-US',
|
||||
dir: 'ltr',
|
||||
})
|
||||
return locales.reduce((acc, { lang, dir, name, short_name, description }) => {
|
||||
acc[lang] = {
|
||||
scope: '/',
|
||||
id: '/',
|
||||
start_url: '/',
|
||||
display: 'standalone',
|
||||
lang,
|
||||
name,
|
||||
short_name,
|
||||
description,
|
||||
dir,
|
||||
theme_color: '#ffffff',
|
||||
icons: [
|
||||
{
|
||||
src: 'pwa-192x192.png',
|
||||
sizes: '192x192',
|
||||
type: 'image/png',
|
||||
},
|
||||
{
|
||||
src: 'pwa-512x512.png',
|
||||
sizes: '512x512',
|
||||
type: 'image/png',
|
||||
},
|
||||
],
|
||||
}
|
||||
|
||||
return acc
|
||||
}, {} as LocalizedWebManifest)
|
||||
}
|
||||
|
||||
async function readI18nFile(file: string) {
|
||||
return JSON.parse(Buffer.from(
|
||||
await readFile(resolve(`./locales/${file}`), 'utf-8'),
|
||||
).toString())
|
||||
}
|
|
@ -1,9 +1,10 @@
|
|||
import { defineNuxtModule } from '@nuxt/kit'
|
||||
import type { VitePWAOptions, VitePluginPWAAPI } from 'vite-plugin-pwa'
|
||||
import type { VitePluginPWAAPI } from 'vite-plugin-pwa'
|
||||
import { VitePWA } from 'vite-plugin-pwa'
|
||||
import type { Plugin } from 'vite'
|
||||
import type { VitePWANuxtOptions } from './types'
|
||||
import { configurePWAOptions } from './config'
|
||||
import { type LocalizedWebManifest, createI18n, pwaLocales } from './i18n'
|
||||
|
||||
export * from './types'
|
||||
export default defineNuxtModule<VitePWANuxtOptions>({
|
||||
|
@ -20,6 +21,7 @@ export default defineNuxtModule<VitePWANuxtOptions>({
|
|||
const resolveVitePluginPWAAPI = (): VitePluginPWAAPI | undefined => {
|
||||
return vitePwaClientPlugin?.api
|
||||
}
|
||||
let webmanifests: LocalizedWebManifest | undefined
|
||||
|
||||
// TODO: combine with configurePWAOptions?
|
||||
nuxt.hook('nitro:init', (nitro) => {
|
||||
|
@ -37,12 +39,55 @@ export default defineNuxtModule<VitePWANuxtOptions>({
|
|||
const plugin = viteInlineConfig.plugins.find(p => p && typeof p === 'object' && 'name' in p && p.name === 'vite-plugin-pwa')
|
||||
if (plugin)
|
||||
throw new Error('Remove vite-plugin-pwa plugin from Vite Plugins entry in Nuxt config file!')
|
||||
const resolvedOptions: Partial<VitePWAOptions> = {
|
||||
...options,
|
||||
manifest: options.manifest ? await options.manifest() : undefined,
|
||||
|
||||
webmanifests = await createI18n()
|
||||
const generateManifest = (locale: string) => {
|
||||
const manifest = webmanifests![locale]
|
||||
if (!manifest)
|
||||
throw new Error(`No webmanifest found for locale ${locale}`)
|
||||
return JSON.stringify(manifest)
|
||||
}
|
||||
configurePWAOptions(resolvedOptions, nuxt)
|
||||
const plugins = VitePWA(resolvedOptions)
|
||||
viteInlineConfig.plugins.push({
|
||||
name: 'elk:pwa:locales:build',
|
||||
apply: 'build',
|
||||
generateBundle(_, bundle) {
|
||||
if (options.disable || !bundle)
|
||||
return
|
||||
|
||||
Object.keys(webmanifests!).map(l => [l, `manifest-${l}.webmanifest`]).forEach(([l, fileName]) => {
|
||||
bundle[fileName] = {
|
||||
isAsset: true,
|
||||
type: 'asset',
|
||||
name: undefined,
|
||||
source: generateManifest(l),
|
||||
fileName,
|
||||
}
|
||||
})
|
||||
},
|
||||
})
|
||||
viteInlineConfig.plugins.push({
|
||||
name: 'elk:pwa:locales:dev',
|
||||
apply: 'serve',
|
||||
configureServer(server) {
|
||||
const localeMatcher = new RegExp(`^${nuxt.options.app.baseURL}manifest-(.*).webmanifest$`)
|
||||
server.middlewares.use((req, res, next) => {
|
||||
const match = req.url?.match(localeMatcher)
|
||||
const entry = match && webmanifests![match[1]]
|
||||
if (entry) {
|
||||
res.statusCode = 200
|
||||
res.setHeader('Content-Type', 'application/manifest+json')
|
||||
res.write(JSON.stringify(entry), 'utf-8')
|
||||
res.end()
|
||||
}
|
||||
else {
|
||||
next()
|
||||
}
|
||||
})
|
||||
},
|
||||
})
|
||||
|
||||
configurePWAOptions(options, nuxt)
|
||||
const plugins = VitePWA(options)
|
||||
viteInlineConfig.plugins.push(plugins)
|
||||
if (isClient)
|
||||
vitePwaClientPlugin = plugins.find(p => p.name === 'vite-plugin-pwa') as Plugin
|
||||
|
@ -61,8 +106,17 @@ export default defineNuxtModule<VitePWANuxtOptions>({
|
|||
return
|
||||
|
||||
viteServer.middlewares.stack.push({ route: webManifest, handle: emptyHandle })
|
||||
if (webmanifests) {
|
||||
Object.keys(webmanifests).forEach((locale) => {
|
||||
viteServer.middlewares.stack.push({
|
||||
route: `${nuxt.options.app.baseURL}manifest-${locale}.webmanifest`,
|
||||
handle: emptyHandle,
|
||||
})
|
||||
})
|
||||
}
|
||||
viteServer.middlewares.stack.push({ route: devSw, handle: emptyHandle })
|
||||
})
|
||||
|
||||
if (!options.strategies || options.strategies === 'generateSW') {
|
||||
nuxt.hook('vite:serverCreated', (viteServer, { isServer }) => {
|
||||
if (isServer)
|
||||
|
@ -76,6 +130,16 @@ export default defineNuxtModule<VitePWANuxtOptions>({
|
|||
}
|
||||
}
|
||||
else {
|
||||
nuxt.hook('nitro:config', async (nitroConfig) => {
|
||||
nitroConfig.routeRules = nitroConfig.routeRules || {}
|
||||
for (const locale of pwaLocales) {
|
||||
nitroConfig.routeRules![`/manifest-${locale.code}.webmanifest`] = {
|
||||
headers: {
|
||||
'Content-Type': 'application/manifest+json',
|
||||
},
|
||||
}
|
||||
}
|
||||
})
|
||||
nuxt.hook('nitro:init', (nitro) => {
|
||||
nitro.hooks.hook('rollup:before', async () => {
|
||||
await resolveVitePluginPWAAPI()?.generateSW()
|
||||
|
|
|
@ -1,9 +1,6 @@
|
|||
import type { ManifestOptions, VitePWAOptions } from 'vite-plugin-pwa'
|
||||
import type { Overwrite } from '../../types/utils'
|
||||
import type { VitePWAOptions } from 'vite-plugin-pwa'
|
||||
|
||||
export type VitePWANuxtOptions = Overwrite<Partial<VitePWAOptions>, {
|
||||
manifest?: () => Promise<Partial<ManifestOptions>>
|
||||
}>
|
||||
export interface VitePWANuxtOptions extends Partial<VitePWAOptions> {}
|
||||
|
||||
declare module '@nuxt/schema' {
|
||||
interface NuxtConfig {
|
||||
|
|
|
@ -113,7 +113,7 @@ export default defineNuxtConfig({
|
|||
],
|
||||
prerender: {
|
||||
crawlLinks: false,
|
||||
routes: ['/', '/200.html'],
|
||||
routes: ['/'],
|
||||
},
|
||||
},
|
||||
app: {
|
||||
|
|
Loading…
Reference in New Issue