feat: pwa

- update pwa setup to work with public_path external cdn

src/client/utils/pwa/pwa.util.ts

@@ -1,12 +1,10 @@
 import { Workbox } from 'workbox-window'
-import { basePath } from 'src/common'
+import { basename, basePath } from 'src/common'
 
 export function registerSW(promptForUpdate: () => Promise<boolean>) {
 	if (!('serviceWorker' in navigator)) return
 
-	const wb = new Workbox(basePath('/service-worker.js'), {
-		scope: '/'
-	})
+	const wb = new Workbox(basePath('/service-worker.js'), { scope: basename })
 
 	wb.addEventListener('waiting', async () => {
 		wb.addEventListener('controlling', () => window.location.reload())

src/server/controller/index.ts

@@ -1,3 +1,4 @@
 export * from './render'
 export * from './health'
 export * from './version'
+export * from './pwa'

src/server/controller/pwa/index.ts

@@ -0,0 +1,34 @@
+import type { Request, Response } from 'express'
+import { basename, publicPath } from 'src/common'
+
+export const getManifest = (_: Request, res: Response) => {
+	res.json({
+		short_name: 'SSR app',
+		name: 'SSR app',
+		start_url: basename,
+		display: 'standalone',
+		theme_color: '#efefef',
+		background_color: '#f2f4f6',
+		icons: [
+			{
+				src: publicPath('icons/192.png'),
+				sizes: '192x192'
+			},
+			{
+				src: publicPath('icons/512.png'),
+				sizes: '512x512'
+			},
+			{
+				src: publicPath('icons/maskable.png'),
+				sizes: '150x150',
+				type: 'image/svg+xml',
+				purpose: 'any'
+			},
+			{
+				src: publicPath('icons/maskable.png'),
+				type: 'image/svg+xml',
+				purpose: 'maskable'
+			}
+		]
+	})
+}

src/server/router/index.ts

@@ -3,9 +3,11 @@ import { appRoutes } from './app'
 import { staticRoutes } from './static'
 import { versionRoutes } from './version'
 import { healthRoutes } from './health'
+import { pwaRoutes } from './pwa'
 
 export const router = Router()
 staticRoutes(router)
 versionRoutes(router)
 healthRoutes(router)
+pwaRoutes(router)
 appRoutes(router)

src/server/router/pwa.ts

@@ -0,0 +1,13 @@
+import { type Router, static as staticRoute } from 'express'
+import { resolve } from 'path'
+
+import { basename, basePath } from 'src/common'
+import { getManifest } from '../controller'
+import { pwa } from '../middleware'
+
+export const pwaRoutes = (router: Router) => {
+	if (IS_DEV) return
+
+	router.get(basePath('/manifest.json'), getManifest)
+	router.use(basename, pwa, staticRoute(resolve(__dirname, '../client/pwa'), { redirect: false }))
+}

src/server/router/static.ts

@@ -1,13 +1,6 @@
 import { resolve } from 'path'
 import { Router, static as staticRoute } from 'express'
-import { pwa } from 'server/middleware'
-import { basename } from 'src/common'
 
 export function staticRoutes(router: Router) {
-	const distClient = resolve(__dirname, '../client')
-	router.use(staticRoute(IS_DEV ? 'assets' : distClient))
-
-	if (IS_PROD) {
-		router.use(basename, pwa, staticRoute(resolve(distClient, 'pwa'), { redirect: false }))
-	}
+	router.use(staticRoute(IS_DEV ? 'assets' : resolve(__dirname, '../client')))
 }

webpack/plugins/copy.plugin.ts

@@ -3,10 +3,7 @@ import CopyPlugin from 'copy-webpack-plugin'
 import { IS_PROD, ROOT_DIR } from '../utils'
 
 const config = {
-	patterns: [
-		{ from: join(ROOT_DIR, 'assets/icons'), to: 'icons' },
-		{ from: join(ROOT_DIR, 'pwa/manifest.json'), to: 'pwa' }
-	]
+	patterns: [{ from: join(ROOT_DIR, 'assets/icons'), to: 'icons' }]
 }
 
 export const copyPlugin = IS_PROD && new CopyPlugin(config)