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:
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 theservice worker
ready. - Show
Prompt for update
when newservice worker
available.
- Show
Auto update
:- Show
Ready to work offline
on first visit and once theservice worker
ready. - When new content available, the service worker will be updated automatically.
- Show
Prompt for update
withPeriodic service worker updates
:- Show
Ready to work offline
on first visit and once theservice worker
ready. - Show
Prompt for update
when newservice worker
available. - The example project will register a
Periodic service worker updates
- Show
Auto update
withPeriodic service worker updates
:- Show
Ready to work offline
on first visit and once theservice worker
ready. - The example project will register a
Periodic service worker updates
- When new content available, the service worker will be updated automatically.
- Show
injectManifest
injectManifest
has the following behavior:
Prompt for update
:- Show
Ready to work offline
on first visit and once theservice worker
ready. - Show
Prompt for update
when newservice worker
available.
- Show
Auto update
:- Show
Ready to work offline
on first visit and once theservice worker
ready. - When new content available, the service worker will be updated automatically.
- Show
Prompt for update
withPeriodic service worker updates
:- Show
Ready to work offline
on first visit and once theservice worker
ready. - Show
Prompt for update
when newservice worker
available. - The example project will register a
Periodic service worker updates
- Show
Auto update
withPeriodic service worker updates
:- Show
Ready to work offline
on first visit and once theservice worker
ready. - The example project will register a
Periodic service worker updates
- When new content available, the service worker will be updated automatically.
- Show