vite-plugin-pwa

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',
    }),
  ],
});
```