Change Log

Please refer to the corresponding installation section:

• vite-plugin-pwa
• @vite-pwa/sveltekit
• @vite-pwa/vitepress
• @vite-pwa/astro
• @vite-pwa/nuxt
• @vite-pwa/assets-generator

PWA Assets from v0.19.0 experimental

From v0.19.0, vite-plugin-pwa adds experimental support for @vite-pwa/assets-generator to serve, generate and inject PWA assets on the fly.

Check the PWA Assets Generator Integrations section for more details.

New Vite Build from v0.18.0

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 option if not configured
• minify: you can change the minify build, the plugin will use the Vite's build.minify option if not configured
• sourcemap: you can change the sourcemap build, the plugin will use the Vite's 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, the mode option in your PWA configuration will not be used when using injectManifest strategy, the plugin will use the Vite's 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 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:

/// <reference types="vite/client" />

Rollup 4 and Vite 5

Rollup 4 has changed the asset name layout format, it is using ascii letters (no encoding, including also dash and underscore), previous Rollup versions are using hex encoding:

• Using more characters can make the hash length shorter
• Using a faster hash algorithm can make hashing faster
• This is the PR that changed the hash algorithm: https://github.com/rollup/rollup/pull/5155

This change breaks the way vite-plugin-pwa build plugin builds the service worker, since it is using this regular expression /[.-][a-f0-9]{8}\./ for dontCacheBustURLsMatching in workbox and injectManifest options.

From version v0.17.0, vite-plugin-pwa configures dontCacheBustURLsMatching with a regular expression using the Vite's build.assetsDir option (defaults to assets):

• workbox.dontCacheBustURLsMatching = /^assets\//
• injectManifest.dontCacheBustURLsMatching = /^assets\//

You can refer to this issue for more details about dontCacheBustURLsMatching: Workbox appears to be needlessly generating revision hashes.

@vite-pwa/vitepress

From version v0.3.0, @vite-pwa/vitepress configures dontCacheBustURLsMatching in a similar way to how vite-plugin-pwa does, but using the VitePress' assetsDir option (defaults to assets).

@vite-pwa/nuxt

From version v0.4.0, @vite-pwa/nuxt requires Vite 5 and Nuxt 3.9+.

From version v0.3.3, @vite-pwa/nuxt configures dontCacheBustURLsMatching in a similar way to how vite-plugin-pwa does, but using the Nuxt's app.buildAssetsDir option (defaults to _nuxt).

@vite-pwa/astro

From version v0.2.0, @vite-pwa/astro configures dontCacheBustURLsMatching in a similar way to how vite-plugin-pwa does, but using the Astro's build.assets option (defaults to _astro).

@vite-pwa/sveltekit

From version v0.3.0, @vite-pwa/sveltekit supports SvelteKit 2 (should also support SvelteKit 1).

From version v0.2.9, @vite-pwa/sveltekit configures dontCacheBustURLsMatching in a similar way to how vite-plugin-pwa does, but using the Sveltkit's appDir option (defaults to _app).

WARNING

From version v0.2.0, SvelteKitPWA plugin requires SvelteKit 1.3.1 or above.

If you're using a SvelteKit version prior to v1.3.1, you should use SvelteKitPWA plugin version 0.1.*.

Other integrations

If you're using vite-plugin-pwa or another integration with other meta frameworks (îles), review the generated service worker if you're using Vite 5 or Rollup 4, and update the dontCacheBustURLsMatching regular expression properly when required.