Progressive Web Application (PWA)

provides the @islands/pwa module, created by @userquin, which will add and configure vite-plugin-pwa to make your website work offline.

import { defineConfig } from 'iles'
import pwa from '@islands/pwa'

export default defineConfig({
  modules: [
    pwa(options),
  ],
})

iles.config.ts

Defaults

By default, it will use the generateSW strategy, and it will prompt for updates.

• When using generateSW with prompt:

  • registerSW.js won't be generated unless explicitly enabled

• When using generateSW with autoUpdate:

  • clientsClaim and skipWaiting will be enabled
  • registerSW.js won't be generated unless explicitly enabled

Using a prompt for updates

When using the generateSW strategy with prompt, you should register the service worker using a client script block in a component that is rendered in every page of your site (included in every layout).

See the PWA configuration for this website, which uses a dialog component to display a prompt to update the site.

Using autoUpdate

When using the generateSW strategy with autoUpdate, you should register the service worker using a client script block in a component that is rendered in every page of your site (included in every layout).

<script client:load lang="ts">
import { registerSW } from 'virtual:pwa-register'

registerSW({ immediate: true })
</script>

src/layouts/base.vue

Don't specify the Vite plugin manually

You should provide any configuration for vite-plugin-pwa in the @islands/pwa module.