fix: use swDest folder to resolve mjs and map files in Vite build (#…

…661)
vite-pwa · Feb 15, 2024 · aaa856b · aaa856b
1 parent f9c6d91
commit aaa856b
Show file tree

Hide file tree

Showing 12 changed files with 327 additions and 12 deletions.
diff --git a/.gitignore b/.gitignore
@@ -2,6 +2,7 @@ node_modules
 .DS_Store
 dist
 dev-dist
+dist-examples-root
 # intellij stuff
 .idea/
 # routify

diff --git a/examples/vanilla-js-custom-sw/index.html b/examples/vanilla-js-custom-sw/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="icon" href="/favicon.svg" type="image/svg+xml">
+    <link rel="apple-touch-icon" href="/pwa-192x192.png">
+    <link rel="mask-icon" href="/favicon.svg" color="#FFFFFF">
+    <meta name="msapplication-TileColor" content="#FFFFFF">
+    <meta name="theme-color" content="#ffffff">
+    <title>Vite App</title>
+    <style>
+        #app {
+            text-align: center;
+        }
+    </style>
+</head>
+<body>
+<div id="app"></div>
+<script type="module" src="/src/main.js"></script>
+</body>
+</html>
diff --git a/examples/vanilla-js-custom-sw/package.json b/examples/vanilla-js-custom-sw/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "vanilla-js-custom-sw",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "build-on-root": "vite build --outDir=../../dist-examples-root",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "vite": "^5.0.0",
+    "vite-plugin-pwa": "workspace:*",
+    "workbox-cacheable-response": "^7.0.0",
+    "workbox-core": "^7.0.0",
+    "workbox-expiration": "^7.0.0",
+    "workbox-routing": "^7.0.0",
+    "workbox-strategies": "^7.0.0",
+    "workbox-window": "^7.0.0"
+  }
+}
diff --git a/examples/vanilla-js-custom-sw/public/favicon.svg b/examples/vanilla-js-custom-sw/public/favicon.svg
diff --git a/examples/vanilla-js-custom-sw/public/pwa-192x192.png b/examples/vanilla-js-custom-sw/public/pwa-192x192.png
diff --git a/examples/vanilla-js-custom-sw/public/pwa-512x512.png b/examples/vanilla-js-custom-sw/public/pwa-512x512.png
diff --git a/examples/vanilla-js-custom-sw/service-worker/sw.js b/examples/vanilla-js-custom-sw/service-worker/sw.js
@@ -0,0 +1,24 @@
+/// <reference lib="webworker" />
+import { cleanupOutdatedCaches, createHandlerBoundToURL, precacheAndRoute } from 'workbox-precaching'
+import { clientsClaim } from 'workbox-core'
+import { NavigationRoute, registerRoute } from 'workbox-routing'
+
+// self.__WB_MANIFEST is default injection point
+precacheAndRoute(self.__WB_MANIFEST)
+
+// clean old assets
+cleanupOutdatedCaches()
+
+/** @type {RegExp[] | undefined} */
+let allowlist
+if (import.meta.env.DEV)
+  allowlist = [/^\/$/]
+
+// to allow work offline
+registerRoute(new NavigationRoute(
+  createHandlerBoundToURL('index.html'),
+  { allowlist },
+))
+
+self.skipWaiting()
+clientsClaim()
diff --git a/examples/vanilla-js-custom-sw/src/main.js b/examples/vanilla-js-custom-sw/src/main.js
@@ -0,0 +1,28 @@
+import { pwaInfo } from 'virtual:pwa-info'
+import { registerSW } from 'virtual:pwa-register'
+
+const date = __DATE__
+
+console.log(pwaInfo)
+
+const app = document.querySelector('#app')
+
+app.innerHTML = `
+  <div>
+   <img src="/favicon.svg" alt="PWA Logo" width="60" height="60">
+    <h1>Vite + Vanilla JavaScript Custom Service Worker</h1>
+    <br/>
+    <p>${date}</p>
+    <br/>
+  </div>
+`
+
+registerSW({
+  immediate: true,
+  onNeedRefresh() {
+    console.log('onNeedRefresh message should not appear')
+  },
+  onOfflineReady() {
+    console.log('onOfflineReady message should not appear')
+  },
+})
diff --git a/examples/vanilla-js-custom-sw/vite.config.js b/examples/vanilla-js-custom-sw/vite.config.js
@@ -0,0 +1,58 @@
+import { defineConfig } from 'vite'
+import { VitePWA } from 'vite-plugin-pwa'
+
+export default defineConfig({
+  mode: 'development',
+  logLevel: 'info',
+  define: {
+    __DATE__: `'${new Date().toISOString()}'`,
+  },
+  build: {
+    sourcemap: true,
+  },
+  plugins: [
+    VitePWA({
+      mode: 'development',
+      base: '/',
+      strategies: 'injectManifest',
+      srcDir: './service-worker',
+      filename: 'sw.js',
+      includeAssets: ['favicon.svg'],
+      injectRegister: false,
+      injectManifest: {
+        minify: false,
+        enableWorkboxModulesLogs: true,
+      },
+      manifest: {
+        name: 'PWA Router',
+        short_name: 'PWA Router',
+        theme_color: '#ffffff',
+        icons: [
+          {
+            src: 'pwa-192x192.png', // <== don't add slash, for testing
+            sizes: '192x192',
+            type: 'image/png',
+          },
+          {
+            src: '/pwa-512x512.png', // <== don't remove slash, for testing
+            sizes: '512x512',
+            type: 'image/png',
+          },
+          {
+            src: 'pwa-512x512.png', // <== don't add slash, for testing
+            sizes: '512x512',
+            type: 'image/png',
+            purpose: 'any maskable',
+          },
+        ],
+      },
+      devOptions: {
+        enabled: true,
+        /* when using generateSW the PWA plugin will switch to classic */
+        navigateFallback: 'index.html',
+        suppressWarnings: true,
+        type: 'module',
+      },
+    }),
+  ],
+})
diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
   "name": "vite-plugin-pwa",
   "type": "module",
   "version": "0.18.1",
-  "packageManager": "pnpm@8.15.1",
+  "packageManager": "pnpm@8.15.2",
   "description": "Zero-config PWA for Vite",
   "author": "antfu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -87,6 +87,8 @@
     "lint-fix": "nr lint --fix",
     "dev": "esno scripts/dev.ts",
     "build": "rimraf dist && esno scripts/build.ts",
+    "build-js-example-on-root": "vite build --outDir=../../dist-examples-root -c ./examples/vanilla-js-custom-sw/vite.config.js ./examples/vanilla-js-custom-sw",
+    "build-vue-example-on-root": "DEBUG=vite-plugin-pwa BASE_URL=/ SOURCE_MAP=true CLAIMS=true vite build --outDir=../../dist-examples-root -c ./examples/vue-router/vite.config.ts ./examples/vue-router",
     "prepublishOnly": "npm run build",
     "release": "bumpp && npm publish",
     "examples": "esno scripts/run-examples.ts",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/vite-build.ts b/src/vite-build.ts
@@ -1,4 +1,4 @@
-import { basename, relative } from 'node:path'
+import { basename, dirname, relative, resolve } from 'node:path'
 import { promises as fs } from 'node:fs'
 import type { InlineConfig, ResolvedConfig } from 'vite'
 import type { ResolvedVitePWAOptions } from './types'
@@ -36,19 +36,20 @@ export async function buildSW(
   await build(inlineConfig)
 
   if (format !== 'iife') {
-    await fs.rename(
-        `${options.outDir}/${swMjsName}`,
-        `${options.outDir}/${swName}`,
-    )
-    const sourceMap = await fs.lstat(`${options.outDir}/${swMjsName}.map`).then(s => s.isFile()).catch(() => false)
+    const swDestDir = dirname(options.swDest)
+    const mjsPath = resolve(swDestDir, swMjsName)
+    const jsPath = resolve(swDestDir, swName)
+    await fs.rename(mjsPath, jsPath)
+    const mjsMapPath = `${mjsPath}.map`
+    const sourceMap = await fs.lstat(mjsMapPath).then(s => s.isFile()).catch(() => false)
     if (sourceMap) {
       await Promise.all([
-        fs.readFile(`${options.outDir}/${swName}`, 'utf-8').then(content => fs.writeFile(
-            `${options.outDir}/${swName}`,
-            content.replace(`${swMjsName}.map`, `${swName}.map`),
-            'utf-8',
+        fs.readFile(jsPath, 'utf-8').then(content => fs.writeFile(
+          jsPath,
+          content.replace(`${swMjsName}.map`, `${swName}.map`),
+          'utf-8',
         )),
-        fs.rename(`${options.outDir}/${swMjsName}.map`, `${options.outDir}/${swName}.map`),
+        fs.rename(mjsMapPath, `${jsPath}.map`),
       ])
     }
   }