fix!: unable to use custom service worker without precaching (#83)

* fix!: unable to use custom service worker without precaching * chore: use rename also inside injection point logic
vite-pwa · Jul 4, 2024 · 0e52330 · 0e52330
1 parent 30c177e
commit 0e52330
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 27 deletions.
diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
  "name": "@vite-pwa/sveltekit",
  "type": "module",
  "version": "0.5.0",
- "packageManager": "pnpm@9.0.6",
+ "packageManager": "pnpm@9.4.0",
  "description": "Zero-config PWA for SvelteKit",
  "author": "antfu <anthonyfu117@hotmail.com>",
  "license": "MIT",

diff --git a/src/plugins/SvelteKitPlugin.ts b/src/plugins/SvelteKitPlugin.ts
@@ -1,4 +1,4 @@
-import { lstat, mkdir, readFile, rm, writeFile } from 'node:fs/promises'
+import { lstat, mkdir, readFile, rename, rm, writeFile } from 'node:fs/promises'
 import { join } from 'node:path'
 import type { Plugin, ResolvedConfig } from 'vite'
 import type { VitePWAOptions, VitePluginPWAAPI } from 'vite-plugin-pwa'
@@ -117,31 +117,44 @@ export function SvelteKitPlugin(
  if (swName.endsWith('.ts'))
  swName = swName.replace(/\.ts$/, '.js')
 
- // kit fixes sw name to 'service-worker.js'
- const injectManifestOptions: import('workbox-build').InjectManifestOptions = {
- globDirectory: outDir.replace(/\\/g, '/'),
- ...options.injectManifest ?? {},
- swSrc: join(clientOutputDir, 'service-worker.js').replace(/\\/g, '/'),
- swDest: join(clientOutputDir, 'service-worker.js').replace(/\\/g, '/'),
- }
+ const injectionPoint = !options.injectManifest || !('injectionPoint' in options.injectManifest) || !!options.injectManifest.injectionPoint
 
- const [injectManifest, logWorkboxResult] = await Promise.all([
- import('workbox-build').then(m => m.injectManifest),
- import('./log').then(m => m.logWorkboxResult),
- ])
-
- // inject the manifest
- const buildResult = await injectManifest(injectManifestOptions)
- // log workbox result
- logWorkboxResult('injectManifest', buildResult, viteConfig)
- // rename the sw
- if (swName !== 'service-worker.js') {
- await writeFile(
- join(clientOutputDir, swName).replace('\\/g', '/'),
- await readFile(injectManifestOptions.swSrc, 'utf-8'),
- 'utf-8',
- )
- await rm(injectManifestOptions.swDest)
+ if (injectionPoint) {
+ // kit fixes sw name to 'service-worker.js'
+ const injectManifestOptions: import('workbox-build').InjectManifestOptions = {
+ globDirectory: outDir.replace(/\\/g, '/'),
+ ...options.injectManifest ?? {},
+ swSrc: join(clientOutputDir, 'service-worker.js').replace(/\\/g, '/'),
+ swDest: join(clientOutputDir, 'service-worker.js').replace(/\\/g, '/'),
+ }
+
+ const [injectManifest, logWorkboxResult] = await Promise.all([
+ import('workbox-build').then(m => m.injectManifest),
+ import('./log').then(m => m.logWorkboxResult),
+ ])
+
+ // inject the manifest
+ const buildResult = await injectManifest(injectManifestOptions)
+ // log workbox result
+ logWorkboxResult('injectManifest', viteConfig, buildResult)
+ // rename the sw
+ if (swName !== 'service-worker.js') {
+ await rename(
+ join(clientOutputDir, 'service-worker.js').replace('\\/g', '/'),
+ join(clientOutputDir, swName).replace('\\/g', '/'),
+ )
+ }
+ }
+ else {
+ const { logWorkboxResult } = await import('./log')
+ // log workbox result
+ logWorkboxResult('injectManifest', viteConfig)
+ if (swName !== 'service-worker.js') {
+ await rename(
+ join(clientOutputDir, 'service-worker.js').replace('\\/g', '/'),
+ join(clientOutputDir, swName).replace('\\/g', '/'),
+ )
+ }
  }
  }
  },

diff --git a/src/plugins/log.ts b/src/plugins/log.ts
@@ -5,12 +5,21 @@ import type { ResolvedConfig } from 'vite'
 import { cyan, dim, green, magenta, yellow } from 'kolorist'
 import { version } from '../../package.json'
 
-export function logWorkboxResult(strategy: string, buildResult: BuildResult, viteOptions: ResolvedConfig) {
+export function logWorkboxResult(strategy: string, viteOptions: ResolvedConfig, buildResult?: BuildResult) {
  const { root, logLevel = 'info' } = viteOptions
 
  if (logLevel === 'silent')
  return
 
+ if (!buildResult) {
+ console.info([
+ '',
+ `${cyan(`SvelteKit VitePWA v${version}`)}`,
+ `mode ${magenta(strategy)}`,
+ ].join('\n'))
+ return
+ }
+
  const { count, size, filePaths, warnings } = buildResult
 
  if (logLevel === 'info') {