Package - vite-plugin-pwa

vite-plugin-pwa - Zero-config PWA for Vite
Zero-config PWA Framework-agnostic Plugin for Vite

???? Features

???? Documentation & guides
???? Zero-Config: sensible built-in default configs for common use cases
???? Extensible: expose the full ability to customize the behavior of the plugin
???? Type Strong: written in TypeScript
???? Offline Support: generate service worker with offline support (via Workbox)
⚡ Fully tree shakable: auto inject Web App Manifest
???? Prompt for new content: built-in support for Vanilla JavaScript, Vue 3, React, Svelte, SolidJS and Preact
⚙️ Stale-while-revalidate: automatic reload when new content is available
✨ Static assets handling: configure static assets for offline support
???? Development Support: debug your custom service worker logic as you develop your application

???? Install

npm i vite-plugin-pwa -D 

# yarn 
yarn add vite-plugin-pwa -D

# pnpm 
pnpm add vite-plugin-pwa -D

???? Usage

???? From version 0.11.0, workbox has been updated to version 6.2.2 (previous versions were using 6.1.5 version): if you are using advanced configuration like workbox or injectManifest options, you must review the plugin configuration, since this new version of workbox has breaking changes!

???? Changes on version 0.12.0:

TypeScript updated to 4.6.3 version, client and DevOptions types changed to interface.

If you were using shortcuts on the PWA Manifest, there is a breaking change to add correct type for shortcuts icons, you should review all icon declarations.

You can change the PWA Manifest File name, which default value is manifest.webmanifest, use manifestFilename plugin option to change it.

workbox-build now loads on demand, if you are starting the development server and don't use DevOptions, workbox-build will not be loaded and the development server will boot faster.

You can now provide which Vite plugins add to the service worker build: we have added vite:json and commonsjs, check defaultInjectManifestVitePlugins on src/constants.ts module. Beware using this option since you can break your project build.

Add VitePWA plugin to vite.config.js / vite.config.ts and configure it:

// vite.config.js / vite.config.ts
import { VitePWA } from 'vite-plugin-pwa'

export default {
  plugins: [
    VitePWA()
  ]
}

Read the ???? documentation for a complete guide on how to configure and use this plugin.

Check out the client type declarations client.d.ts for built-in frameworks support.

???? Full config

Check out the type declaration src/types.ts and the following links for more details.

???? License

Current Tags