From a2adacc2780fcef1bc413c17540d3487dd4901aa Mon Sep 17 00:00:00 2001 From: userquin Date: Sat, 10 Feb 2024 14:37:46 +0100 Subject: [PATCH] chore: include new custom sw build plugins options --- .vitepress/components.d.ts | 1 + .../theme/components/InjectManifestBuild.md | 17 +++++++++++++++++ guide/change-log.md | 17 +---------------- guide/inject-manifest.md | 10 ++++++++++ 4 files changed, 29 insertions(+), 16 deletions(-) create mode 100644 .vitepress/theme/components/InjectManifestBuild.md diff --git a/.vitepress/components.d.ts b/.vitepress/components.d.ts index f559882..6c767b2 100644 --- a/.vitepress/components.d.ts +++ b/.vitepress/components.d.ts @@ -16,6 +16,7 @@ declare module 'vue' { GenerateSWSourceMap: typeof import('./theme/components/GenerateSWSourceMap.md')['default'] HeuristicWorkboxWindow: typeof import('./theme/components/HeuristicWorkboxWindow.md')['default'] HomePage: typeof import('./theme/components/HomePage.vue')['default'] + InjectManifestBuild: typeof import('./theme/components/InjectManifestBuild.md')['default'] InjectManifestCleanupOutdatedCaches: typeof import('./theme/components/InjectManifestCleanupOutdatedCaches.md')['default'] InjectManifestSourceMap: typeof import('./theme/components/InjectManifestSourceMap.md')['default'] NavBarTitle: typeof import('./theme/components/vp/NavBarTitle.vue')['default'] diff --git a/.vitepress/theme/components/InjectManifestBuild.md b/.vitepress/theme/components/InjectManifestBuild.md new file mode 100644 index 0000000..3afdf34 --- /dev/null +++ b/.vitepress/theme/components/InjectManifestBuild.md @@ -0,0 +1,17 @@ +From `v0.18.0`, `vite-plugin-pwa` adds five new options to `injectManifest` option to allow customizing the service worker build output: +- `target`: you can change the `target` build, the plugin will use the Vite's [build.target](https://vitejs.dev/config/build-options.html#build-target) option if not configured +- `minify`: you can change the `minify` build, the plugin will use the Vite's [build.minify](https://vitejs.dev/config/build-options.html#build-minify) option if not configured +- `sourcemap`: you can change the `sourcemap` build, the plugin will use the Vite's [build.sourcemap](https://vitejs.dev/config/build-options.html#build-sourcemap) option if not configured +- `enableWorkboxModulesLogs`: you can enable/disable the `workbox` modules log for a development or production build, by default, the plugin will use `process.env.NODE_ENV` (Workbox modules logs logic will be removed from the service worker in `production` build: dead code elimination) +- `buildPlugins`: you can add custom Rollup and/or Vite plugins to the service worker build + +The new Vite build will allow you to use [.env Files](https://vitejs.dev/guide/env-and-mode.html#env-files), the `mode` option in your PWA configuration will not be used when using `injectManifest` strategy, the plugin will use the Vite's [mode](https://vitejs.dev/config/#mode) option instead: +- use `import.meta.env.MODE` to access the Vite mode inside your service worker. +- use `import.meta.env.DEV` or `import.meta.env.PROD` to check if the service worker is running on development or production (equivalent to `process.env.NODE_ENV`), check Vite [NODE_ENV and Modes](https://vitejs.dev/guide/env-and-mode#node-env-and-modes) docs. + +::: tip +If you are using TypeScript in your service worker accessing `import.meta.env` variables, if TypeScript complains, add the following reference to the beginning of your service worker code: +```ts +/// +``` +::: diff --git a/guide/change-log.md b/guide/change-log.md index 953ff8c..777c203 100644 --- a/guide/change-log.md +++ b/guide/change-log.md @@ -15,22 +15,7 @@ Please refer to the corresponding installation section: ## New Vite Build -From `v0.18.0`, `vite-plugin-pwa` adds four new options to `injectManifest` option to allow customizing the service worker build output: -- `target`: you can change the `target` build, the plugin will use the Vite's [build.target](https://vitejs.dev/config/build-options.html#build-target) option if not configured -- `minify`: you can change the `minify` build, the plugin will use the Vite's [build.minify](https://vitejs.dev/config/build-options.html#build-minify) option if not configured -- `sourcemap`: you can change the `sourcemap` build, the plugin will use the Vite's [build.sourcemap](https://vitejs.dev/config/build-options.html#build-sourcemap) option if not configured -- `enableWorkboxModulesLogs`: you can enable/disable the `workbox` modules log for a development or production build, by default, the plugin will use `process.env.NODE_ENV` (Workbox modules logs logic will be removed from the service worker in `production` build: dead code elimination) - -The new Vite build will allow you to use [.env Files](https://vitejs.dev/guide/env-and-mode.html#env-files), the `mode` option in your PWA configuration will not be used when using `injectManifest` strategy, the plugin will use the Vite's [mode](https://vitejs.dev/config/#mode) option instead: -- use `import.meta.env.MODE` to access the Vite mode inside your service worker. -- use `import.meta.env.DEV` or `import.meta.env.PROD` to check if the service worker is running on development or production (equivalent to `process.env.NODE_ENV`), check Vite [NODE_ENV and Modes](https://vitejs.dev/guide/env-and-mode#node-env-and-modes) docs. - -::: tip -If you are using TypeScript in your service worker accessing `import.meta.env` variables, if TypeScript complains, add the following reference to the beginning of your service worker code: -```ts -/// -``` -::: + ## Rollup 4 and Vite 5 diff --git a/guide/inject-manifest.md b/guide/inject-manifest.md index cf6f922..1935c83 100644 --- a/guide/inject-manifest.md +++ b/guide/inject-manifest.md @@ -79,6 +79,16 @@ injectManifest: { +### Custom Rollup and Vite Plugins + +From `v0.18.0`, you can add custom Rollup and/or Vite plugins to the service worker build, using `rollup` and `vite` in `buildPlugins` options. + +The old `plugins` option has been deprecated, use `buildPlugins.rollup` instead: +- if `buildPlugins.rollup` is configured then `plugins` will be ignored +- if `buildPlugins.rollup` is not configured then `plugins` will be used + +You can check the [vue-router example](https://github.com/vite-pwa/vite-plugin-pwa/tree/main/examples/vue-router) using a custom Vite plugin with a simple virtual module consumed by both custom service workers. + ## Auto Update Behavior If you need your custom service worker works with `Auto Update` behavior, you need to change the plugin configuration options and add some custom code to your service worker code.