React

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

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

The React example has been created using create-vite template with pnpx:

pnpx create-vite

pnpx create-vite
+ create-vite 2.5.4
√ Project name: ... react-router
√ Select a framework: » react
√ Select a variant: » react-ts

Scaffolding project in examples\react-router...

Done. Now run:

  cd react-router
  npm install
  npm run dev

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

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:

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:

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.