Vite  

Appearance

Return to top
On this page

React

The React example project can be found on examples/react-router package/directory.

The router used on this example project is react-router.

To test new content available, you should rerun the corresponding script, and then refresh the page.

If you are running an example with Periodic SW updates, you will need to wait 1 minute:

WARNING

This only applies when importing any of the virtual modules or using workbox-window module.

Since workbox-window uses a time-based heuristic algorithm to handle service worker updates, if you build your service worker and register it again, if the time between last registration and the new one is less than 1 minute, then, workbox-window will handle the service worker update found event as an external event, and so the behavior could be strange (for example, if using prompt, instead showing the dialog for new content available, the ready to work offline dialog will be shown; if using autoUpdate, the ready to work offline dialog will be shown and shouldn't be shown).

Executing the examples

WARNING

Before following the instructions below, read the Contribution Guide.

Make sure you install project dependencies, and build the repo on your local clone/fork:

shell
cd vite-plugin-pwa
pnpm install
pnpm run build

cd vite-plugin-pwa
pnpm install
pnpm run build

To run the examples, execute the following script from your shell (from root folder), it will start a CLI where you will select the framework and the pwa options:

shell
pnpm run examples

pnpm run examples

If you don't run pnpm build first, you may see an error like, failed to load config or Please verify that the package.json has a valid "main" entry.

generateSW

generateSW has the following behaviors:

  • Prompt for update:

    • Show Ready to work offline on first visit and once the service worker ready.
    • Show Prompt for update when new service worker available.

  • Auto update:

    • Show Ready to work offline on first visit and once the service worker ready.
    • When new content available, the service worker will be updated automatically.

  • Prompt for update with Periodic service worker updates:

    • Show Ready to work offline on first visit and once the service worker ready.
    • Show Prompt for update when new service worker available.
    • The example project will register a Periodic service worker updates

  • Auto update with Periodic service worker updates:

    • Show Ready to work offline on first visit and once the service worker ready.
    • The example project will register a Periodic service worker updates
    • When new content available, the service worker will be updated automatically.

injectManifest

injectManifest has the following behavior:

  • Prompt for update:

    • Show Ready to work offline on first visit and once the service worker ready.
    • Show Prompt for update when new service worker available.

  • Auto update:

    • Show Ready to work offline on first visit and once the service worker ready.
    • When new content available, the service worker will be updated automatically.

  • Prompt for update with Periodic service worker updates:

    • Show Ready to work offline on first visit and once the service worker ready.
    • Show Prompt for update when new service worker available.
    • The example project will register a Periodic service worker updates

  • Auto update with Periodic service worker updates:

    • Show Ready to work offline on first visit and once the service worker ready.
    • The example project will register a Periodic service worker updates
    • When new content available, the service worker will be updated automatically.

Released under the MIT License.

Copyright © 2021-PRESENT Anthony Fu