îles

Progressive Web Application (PWA)

îles 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:

    • if workbox.navigationFallback is not configured and 404.vue or 404.mdx is found under src/pages folder, it will be set to <base>404 or <base>404.html based on prettyUrls and base configuration options.
    • if workbox.navigationFallback is not configured, it will be set to <base> (where <base> is the base configuration option).

  • 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.