Product
Introducing License Enforcement in Socket
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
vite-plugin-pwa
Advanced tools
vite-plugin-pwa is a plugin for Vite that enables Progressive Web App (PWA) functionalities. It helps in generating service workers, manifest files, and other PWA-related configurations to make your web application installable and offline-capable.
Generate Service Worker
This feature allows you to generate a service worker with runtime caching strategies. The code sample demonstrates how to cache image files using a 'CacheFirst' strategy.
```javascript
import { defineConfig } from 'vite';
import { VitePWA } from 'vite-plugin-pwa';
export default defineConfig({
plugins: [
VitePWA({
registerType: 'autoUpdate',
workbox: {
runtimeCaching: [
{
urlPattern: /\.(?:png|jpg|jpeg|svg|gif)$/,
handler: 'CacheFirst',
options: {
cacheName: 'images',
expiration: {
maxEntries: 10,
},
},
},
],
},
}),
],
});
```
Generate Manifest File
This feature allows you to generate a web app manifest file. The code sample shows how to configure the manifest with app name, description, theme color, and icons.
```javascript
import { defineConfig } from 'vite';
import { VitePWA } from 'vite-plugin-pwa';
export default defineConfig({
plugins: [
VitePWA({
manifest: {
name: 'My App',
short_name: 'App',
description: 'My awesome app',
theme_color: '#ffffff',
icons: [
{
src: 'icon-192x192.png',
sizes: '192x192',
type: 'image/png',
},
{
src: 'icon-512x512.png',
sizes: '512x512',
type: 'image/png',
},
],
},
}),
],
});
```
Auto Update Service Worker
This feature enables the service worker to automatically update when new content is available. The code sample shows how to set the 'registerType' to 'autoUpdate'.
```javascript
import { defineConfig } from 'vite';
import { VitePWA } from 'vite-plugin-pwa';
export default defineConfig({
plugins: [
VitePWA({
registerType: 'autoUpdate',
}),
],
});
```
workbox-webpack-plugin is a plugin for Webpack that provides similar PWA functionalities like generating service workers and caching strategies. It is more tightly integrated with Webpack and offers a comprehensive set of tools for building PWAs.
pwa-asset-generator is a tool that helps generate images and manifest files for PWAs. While it doesn't handle service workers, it complements other PWA tools by focusing on generating the necessary assets for a PWA.
next-pwa is a plugin for Next.js that adds PWA support to Next.js applications. It provides functionalities like service worker generation and caching strategies, similar to vite-plugin-pwa but specifically tailored for Next.js.
This plugin requires Vite
>= v1.0.0-rc.8
npm i vite-plugin-pwa -D # yarn add vite-plugin-pwa -D
Add it to vite.config.js
// vite.config.js
import { VitePWA } from 'vite-plugin-pwa'
export default {
plugins: [
VitePWA()
]
}
VitePWA({
manifest: {
// content of manifest
},
workbox: {
// workbox options
}
})
Check out the type declaration src/index.ts and the following links for more details.
This project is part of my Sponsor Program
MIT License © 2020 Anthony Fu
FAQs
Zero-config PWA for Vite
We found that vite-plugin-pwa demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
Product
We're launching a new set of license analysis and compliance features for analyzing, managing, and complying with licenses across a range of supported languages and ecosystems.
Product
We're excited to introduce Socket Optimize, a powerful CLI command to secure open source dependencies with tested, optimized package overrides.