Skip to content

Commit

Permalink
feat: unregister pwa support (#323)
Browse files Browse the repository at this point in the history
* feat: add unregister pwa support

* chore: use HMR to load dev sw (race condition generating registerSW.js)

* chore: add unregister docs

* chore: wording

* chore: use `options.injectRegister` for inline in HMR response

* chore: add credits to unregister entry in docs

* chore: wording on unregister doc entry

* chore: remove rimraf from vanilla-ts build script
  • Loading branch information
userquin authored Jul 7, 2022
1 parent bf64bde commit b10b121
Show file tree
Hide file tree
Showing 33 changed files with 663 additions and 83 deletions.
4 changes: 4 additions & 0 deletions docs/.vitepress/config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,10 @@ const Guide = [
text: 'Development',
link: '/guide/development',
},
{
text: 'Unregister Service Worker',
link: '/guide/unregister-service-worker',
},
{
text: 'FAQ',
link: '/guide/faq',
Expand Down
28 changes: 28 additions & 0 deletions docs/guide/unregister-service-worker.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
---
title: Unregister Service Worker | Guide
---

# Unregister Service Worker

If you want to unregister the service worker from your PWA application, you only need to add `selfDestroying: true` to the plugin configuration.

`vite-plugin-pwa` plugin will create a new special service worker and replace the existing one in your application once deployed in production: it has to be put in the place of the previous broken/unwanted service worker, with the same name.

::: danger
It is **IMPORTANT TO NOT CHANGE ANYTHING** in the plugin configuration (especially **DO NOT CHANGE THE SERVICE WORKER NAME**), just keep the options and the PWA UI components (if included some toast/dialog for ready to work offline or prompt for update), the plugin will take care of changing the service worker and avoid interacting with the UI if configured.
:::

In a future, if you want to add the PWA again to your application, you only need to remove the `selfDestroying` option or just disable it: `selfDestroying: false`.

## Development

You can also check the `selfDestroying` plugin option in the dev server with development options enabled: check [Development section](/guide/development) for more info.

## Examples

You have in the examples folder the `**-destroy` scripts in their corresponding `package.json`, you can try it on the development server or from the production build.


## Credits

The implementation is based on this GitHub repo [Self-destroying ServiceWorker](https://github.com/NekR/self-destroying-sw), for more info read [Medium: Self-destroying ServiceWorker](https://medium.com/@nekrtemplar/self-destroying-serviceworker-73d62921d717).
26 changes: 22 additions & 4 deletions examples/preact-router/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -3,16 +3,18 @@
"version": "0.0.0",
"private": true,
"scripts": {
"dev": "rimraf dev-dist && cross-env DEBUG=vite-plugin-pwa:* SW_DEV=true vite --force",
"dev-claims": "rimraf dev-dist && cross-env DEBUG=vite-plugin-pwa:* SW_DEV=true CLAIMS=true SW=true vite --force",
"dev-destroy": "rimraf dev-dist && cross-env DEBUG=vite-plugin-pwa:* SW_DESTROY=true SW_DEV=true vite --force",
"dev-claims-destroy": "rimraf dev-dist && cross-env DEBUG=vite-plugin-pwa:* SW_DESTROY=true SW_DEV=true CLAIMS=true SW=true vite --force",
"start": "npm run run-build && npm run serve",
"start-reloadsw": "npm run run-build-reloadsw && npm run serve",
"start-claims": "npm run run-build-claims && npm run serve",
"start-claims-reloadsw": "npm run run-build-reloadsw-claims && npm run serve",
"start-sw": "npm run run-build-sw && npm run serve",
"start-sw-reloadsw": "npm run run-build-sw-reloadsw && npm run serve",
"start-sw-claims": "npm run run-build-sw-claims && npm run serve",
"start-sw-claims-reloadsw": "npm run run-build-sw-reloadsw-claims && npm run serve",
"dev": "cross-env DEBUG=vite-plugin-pwa:* SW_DEV=true vite",
"dev-claims": "cross-env DEBUG=vite-plugin-pwa:* SW_DEV=true CLAIMS=true SW=true vite",
"start-sw-claims-reloadsw": "npm run run-build-sw-claims-reloadsw && npm run serve",
"build": "rimraf dist && cross-env DEBUG=vite-plugin-pwa:* BASE_URL=/ SOURCE_MAP=true vite build",
"run-build": "rimraf dist && cross-env DEBUG=vite-plugin-pwa:* BASE_URL=/ SOURCE_MAP=true vite build",
"run-build-reloadsw": "rimraf dist && cross-env DEBUG=vite-plugin-pwa:* BASE_URL=/ SOURCE_MAP=true RELOAD_SW=true vite build",
Expand All @@ -21,7 +23,23 @@
"run-build-sw": "rimraf dist && cross-env DEBUG=vite-plugin-pwa:* BASE_URL=/ SOURCE_MAP=true SW=true vite build",
"run-build-sw-reloadsw": "cross-env DEBUG=vite-plugin-pwa:* BASE_URL=/ SOURCE_MAP=true RELOAD_SW=true SW=true vite build",
"run-build-sw-claims": "cross-env DEBUG=vite-plugin-pwa:* BASE_URL=/ SOURCE_MAP=true CLAIMS=true SW=true vite build",
"run-build-sw-reloadsw-claims": "cross-env DEBUG=vite-plugin-pwa:* BASE_URL=/ SOURCE_MAP=true CLAIMS=true RELOAD_SW=true SW=true vite build",
"run-build-sw-claims-reloadsw": "cross-env DEBUG=vite-plugin-pwa:* BASE_URL=/ SOURCE_MAP=true CLAIMS=true RELOAD_SW=true SW=true vite build",
"start-destroy": "npm run run-build-destroy && npm run serve",
"start-reloadsw-destroy": "npm run run-build-reloadsw-destroy && npm run serve",
"start-claims-destroy": "npm run run-build-claims-destroy && npm run serve",
"start-claims-reloadsw-destroy": "npm run run-build-reloadsw-claims-destroy && npm run serve",
"start-sw-destroy": "npm run run-build-sw-destroy && npm run serve",
"start-sw-reloadsw-destroy": "npm run run-build-sw-reloadsw-destroy && npm run serve",
"start-sw-claims-destroy": "npm run run-build-sw-claims-destroy && npm run serve",
"start-sw-claims-reloadsw-destroy": "npm run run-build-sw-reloadsw-claims-destroy && npm run serve",
"run-build-destroy": "cross-env DEBUG=vite-plugin-pwa:* BASE_URL=/ SOURCE_MAP=true SW_DESTROY=true vite build",
"run-build-reloadsw-destroy": "cross-env DEBUG=vite-plugin-pwa:* BASE_URL=/ SOURCE_MAP=true SW_DESTROY=true RELOAD_SW=true vite build",
"run-build-claims-destroy": "cross-env DEBUG=vite-plugin-pwa:* BASE_URL=/ SOURCE_MAP=true SW_DESTROY=true CLAIMS=true vite build",
"run-build-reloadsw-claims-destroy": "cross-env DEBUG=vite-plugin-pwa:* BASE_URL=/ SOURCE_MAP=true SW_DESTROY=true CLAIMS=true RELOAD_SW=true vite build",
"run-build-sw-destroy": "rimraf dist && cross-env DEBUG=vite-plugin-pwa:* BASE_URL=/ SOURCE_MAP=true SW_DESTROY=true SW=true vite build",
"run-build-sw-reloadsw-destroy": "cross-env DEBUG=vite-plugin-pwa:* BASE_URL=/ SOURCE_MAP=true SW_DESTROY=true RELOAD_SW=true SW=true vite build",
"run-build-sw-claims-destroy": "cross-env DEBUG=vite-plugin-pwa:* BASE_URL=/ SOURCE_MAP=true SW_DESTROY=true CLAIMS=true SW=true vite build",
"run-build-sw-reloadsw-claims-destroy": "cross-env DEBUG=vite-plugin-pwa:* BASE_URL=/ SOURCE_MAP=true SW_DESTROY=true CLAIMS=true RELOAD_SW=true SW=true vite build",
"serve": "serve dist"
},
"dependencies": {
Expand Down
4 changes: 4 additions & 0 deletions examples/preact-router/vite.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@ const pwaOptions: Partial<VitePWAOptions> = {
const replaceOptions = { __DATE__: new Date().toISOString() }
const claims = process.env.CLAIMS === 'true'
const reload = process.env.RELOAD_SW === 'true'
const selfDestroying = process.env.SW_DESTROY === 'true'

if (process.env.SW === 'true') {
pwaOptions.srcDir = 'src'
Expand All @@ -59,6 +60,9 @@ if (reload) {
replaceOptions.__RELOAD_SW__ = 'true'
}

if (selfDestroying)
pwaOptions.selfDestroying = selfDestroying

// https://vitejs.dev/config/
export default defineConfig({
// base: process.env.BASE_URL || 'https://github.com/',
Expand Down
26 changes: 22 additions & 4 deletions examples/react-router/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -3,16 +3,18 @@
"version": "0.0.0",
"private": true,
"scripts": {
"dev": "rimraf dev-dist && cross-env DEBUG=vite-plugin-pwa:* SW_DEV=true vite --force",
"dev-claims": "rimraf dev-dist && cross-env DEBUG=vite-plugin-pwa:* SW_DEV=true CLAIMS=true SW=true vite --force",
"dev-destroy": "rimraf dev-dist && cross-env DEBUG=vite-plugin-pwa:* SW_DESTROY=true SW_DEV=true vite --force",
"dev-claims-destroy": "rimraf dev-dist && cross-env DEBUG=vite-plugin-pwa:* SW_DESTROY=true SW_DEV=true CLAIMS=true SW=true vite --force",
"start": "npm run run-build && npm run serve",
"start-reloadsw": "npm run run-build-reloadsw && npm run serve",
"start-claims": "npm run run-build-claims && npm run serve",
"start-claims-reloadsw": "npm run run-build-reloadsw-claims && npm run serve",
"start-sw": "npm run run-build-sw && npm run serve",
"start-sw-reloadsw": "npm run run-build-sw-reloadsw && npm run serve",
"start-sw-claims": "npm run run-build-sw-claims && npm run serve",
"start-sw-claims-reloadsw": "npm run run-build-sw-reloadsw-claims && npm run serve",
"dev": "cross-env DEBUG=vite-plugin-pwa:* SW_DEV=true vite",
"dev-claims": "cross-env DEBUG=vite-plugin-pwa:* SW_DEV=true CLAIMS=true SW=true vite",
"start-sw-claims-reloadsw": "npm run run-build-sw-claims-reloadsw && npm run serve",
"build": "cross-env DEBUG=vite-plugin-pwa:* BASE_URL=/ SOURCE_MAP=true vite build",
"run-build": "cross-env DEBUG=vite-plugin-pwa:* BASE_URL=/ SOURCE_MAP=true vite build",
"run-build-reloadsw": "cross-env DEBUG=vite-plugin-pwa:* BASE_URL=/ SOURCE_MAP=true RELOAD_SW=true vite build",
Expand All @@ -21,7 +23,23 @@
"run-build-sw": "rimraf dist && cross-env DEBUG=vite-plugin-pwa:* BASE_URL=/ SOURCE_MAP=true SW=true vite build",
"run-build-sw-reloadsw": "cross-env DEBUG=vite-plugin-pwa:* BASE_URL=/ SOURCE_MAP=true RELOAD_SW=true SW=true vite build",
"run-build-sw-claims": "cross-env DEBUG=vite-plugin-pwa:* BASE_URL=/ SOURCE_MAP=true CLAIMS=true SW=true vite build",
"run-build-sw-reloadsw-claims": "cross-env DEBUG=vite-plugin-pwa:* BASE_URL=/ SOURCE_MAP=true CLAIMS=true RELOAD_SW=true SW=true vite build",
"run-build-sw-claims-reloadsw": "cross-env DEBUG=vite-plugin-pwa:* BASE_URL=/ SOURCE_MAP=true CLAIMS=true RELOAD_SW=true SW=true vite build",
"start-destroy": "npm run run-build-destroy && npm run serve",
"start-reloadsw-destroy": "npm run run-build-reloadsw-destroy && npm run serve",
"start-claims-destroy": "npm run run-build-claims-destroy && npm run serve",
"start-claims-reloadsw-destroy": "npm run run-build-reloadsw-claims-destroy && npm run serve",
"start-sw-destroy": "npm run run-build-sw-destroy && npm run serve",
"start-sw-reloadsw-destroy": "npm run run-build-sw-reloadsw-destroy && npm run serve",
"start-sw-claims-destroy": "npm run run-build-sw-claims-destroy && npm run serve",
"start-sw-claims-reloadsw-destroy": "npm run run-build-sw-reloadsw-claims-destroy && npm run serve",
"run-build-destroy": "cross-env DEBUG=vite-plugin-pwa:* BASE_URL=/ SOURCE_MAP=true SW_DESTROY=true vite build",
"run-build-reloadsw-destroy": "cross-env DEBUG=vite-plugin-pwa:* BASE_URL=/ SOURCE_MAP=true SW_DESTROY=true RELOAD_SW=true vite build",
"run-build-claims-destroy": "cross-env DEBUG=vite-plugin-pwa:* BASE_URL=/ SOURCE_MAP=true SW_DESTROY=true CLAIMS=true vite build",
"run-build-reloadsw-claims-destroy": "cross-env DEBUG=vite-plugin-pwa:* BASE_URL=/ SOURCE_MAP=true SW_DESTROY=true CLAIMS=true RELOAD_SW=true vite build",
"run-build-sw-destroy": "rimraf dist && cross-env DEBUG=vite-plugin-pwa:* BASE_URL=/ SOURCE_MAP=true SW_DESTROY=true SW=true vite build",
"run-build-sw-reloadsw-destroy": "cross-env DEBUG=vite-plugin-pwa:* BASE_URL=/ SOURCE_MAP=true SW_DESTROY=true RELOAD_SW=true SW=true vite build",
"run-build-sw-claims-destroy": "cross-env DEBUG=vite-plugin-pwa:* BASE_URL=/ SOURCE_MAP=true SW_DESTROY=true CLAIMS=true SW=true vite build",
"run-build-sw-reloadsw-claims-destroy": "cross-env DEBUG=vite-plugin-pwa:* BASE_URL=/ SOURCE_MAP=true SW_DESTROY=true CLAIMS=true RELOAD_SW=true SW=true vite build",
"serve": "serve dist"
},
"dependencies": {
Expand Down
4 changes: 4 additions & 0 deletions examples/react-router/vite.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@ const pwaOptions: Partial<VitePWAOptions> = {
const replaceOptions = { __DATE__: new Date().toISOString() }
const claims = process.env.CLAIMS === 'true'
const reload = process.env.RELOAD_SW === 'true'
const selfDestroying = process.env.SW_DESTROY === 'true'

if (process.env.SW === 'true') {
pwaOptions.srcDir = 'src'
Expand All @@ -59,6 +60,9 @@ if (reload) {
replaceOptions.__RELOAD_SW__ = 'true'
}

if (selfDestroying)
pwaOptions.selfDestroying = selfDestroying

export default defineConfig({
// base: process.env.BASE_URL || 'https://github.com/',
build: {
Expand Down
26 changes: 22 additions & 4 deletions examples/solid-router/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -3,16 +3,18 @@
"version": "0.0.0",
"private": true,
"scripts": {
"dev": "rimraf dev-dist && cross-env DEBUG=vite-plugin-pwa:* SW_DEV=true vite --force",
"dev-claims": "rimraf dev-dist && cross-env DEBUG=vite-plugin-pwa:* SW_DEV=true CLAIMS=true SW=true vite --force",
"dev-destroy": "rimraf dev-dist && cross-env DEBUG=vite-plugin-pwa:* SW_DESTROY=true SW_DEV=true vite --force",
"dev-claims-destroy": "rimraf dev-dist && cross-env DEBUG=vite-plugin-pwa:* SW_DESTROY=true SW_DEV=true CLAIMS=true SW=true vite --force",
"start": "npm run run-build && npm run serve",
"start-reloadsw": "npm run run-build-reloadsw && npm run serve",
"start-claims": "npm run run-build-claims && npm run serve",
"start-claims-reloadsw": "npm run run-build-reloadsw-claims && npm run serve",
"start-sw": "npm run run-build-sw && npm run serve",
"start-sw-reloadsw": "npm run run-build-sw-reloadsw && npm run serve",
"start-sw-claims": "npm run run-build-sw-claims && npm run serve",
"start-sw-claims-reloadsw": "npm run run-build-sw-reloadsw-claims && npm run serve",
"dev": "cross-env DEBUG=vite-plugin-pwa:* SW_DEV=true vite",
"dev-claims": "cross-env DEBUG=vite-plugin-pwa:* SW_DEV=true CLAIMS=true SW=true vite",
"start-sw-claims-reloadsw": "npm run run-build-sw-claims-reloadsw && npm run serve",
"build": "rimraf dist && cross-env DEBUG=vite-plugin-pwa:* BASE_URL=/ SOURCE_MAP=true vite build",
"run-build": "rimraf dist && cross-env DEBUG=vite-plugin-pwa:* BASE_URL=/ SOURCE_MAP=true vite build",
"run-build-reloadsw": "rimraf dist && cross-env DEBUG=vite-plugin-pwa:* BASE_URL=/ SOURCE_MAP=true RELOAD_SW=true vite build",
Expand All @@ -21,7 +23,23 @@
"run-build-sw": "rimraf dist && cross-env DEBUG=vite-plugin-pwa:* BASE_URL=/ SOURCE_MAP=true SW=true vite build",
"run-build-sw-reloadsw": "cross-env DEBUG=vite-plugin-pwa:* BASE_URL=/ SOURCE_MAP=true RELOAD_SW=true SW=true vite build",
"run-build-sw-claims": "cross-env DEBUG=vite-plugin-pwa:* BASE_URL=/ SOURCE_MAP=true CLAIMS=true vite SW=true build",
"run-build-sw-reloadsw-claims": "cross-env DEBUG=vite-plugin-pwa:* BASE_URL=/ SOURCE_MAP=true CLAIMS=true RELOAD_SW=true SW=true vite build",
"run-build-sw-claims-reloadsw": "cross-env DEBUG=vite-plugin-pwa:* BASE_URL=/ SOURCE_MAP=true CLAIMS=true RELOAD_SW=true SW=true vite build",
"start-destroy": "npm run run-build-destroy && npm run serve",
"start-reloadsw-destroy": "npm run run-build-reloadsw-destroy && npm run serve",
"start-claims-destroy": "npm run run-build-claims-destroy && npm run serve",
"start-claims-reloadsw-destroy": "npm run run-build-reloadsw-claims-destroy && npm run serve",
"start-sw-destroy": "npm run run-build-sw-destroy && npm run serve",
"start-sw-reloadsw-destroy": "npm run run-build-sw-reloadsw-destroy && npm run serve",
"start-sw-claims-destroy": "npm run run-build-sw-claims-destroy && npm run serve",
"start-sw-claims-reloadsw-destroy": "npm run run-build-sw-reloadsw-claims-destroy && npm run serve",
"run-build-destroy": "cross-env DEBUG=vite-plugin-pwa:* BASE_URL=/ SOURCE_MAP=true SW_DESTROY=true vite build",
"run-build-reloadsw-destroy": "cross-env DEBUG=vite-plugin-pwa:* BASE_URL=/ SOURCE_MAP=true SW_DESTROY=true RELOAD_SW=true vite build",
"run-build-claims-destroy": "cross-env DEBUG=vite-plugin-pwa:* BASE_URL=/ SOURCE_MAP=true SW_DESTROY=true CLAIMS=true vite build",
"run-build-reloadsw-claims-destroy": "cross-env DEBUG=vite-plugin-pwa:* BASE_URL=/ SOURCE_MAP=true SW_DESTROY=true CLAIMS=true RELOAD_SW=true vite build",
"run-build-sw-destroy": "cross-env DEBUG=vite-plugin-pwa:* BASE_URL=/ SOURCE_MAP=true SW_DESTROY=true SW=true vite build",
"run-build-sw-reloadsw-destroy": "cross-env DEBUG=vite-plugin-pwa:* BASE_URL=/ SOURCE_MAP=true SW_DESTROY=true RELOAD_SW=true SW=true vite build",
"run-build-sw-claims-destroy": "cross-env DEBUG=vite-plugin-pwa:* BASE_URL=/ SOURCE_MAP=true SW_DESTROY=true CLAIMS=true SW=true vite build",
"run-build-sw-reloadsw-claims-destroy": "cross-env DEBUG=vite-plugin-pwa:* BASE_URL=/ SOURCE_MAP=true SW_DESTROY=true CLAIMS=true RELOAD_SW=true SW=true vite build",
"serve": "serve dist"
},
"dependencies": {
Expand Down
4 changes: 4 additions & 0 deletions examples/solid-router/vite.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@ const pwaOptions: Partial<VitePWAOptions> = {
const replaceOptions = { __DATE__: new Date().toISOString() }
const claims = process.env.CLAIMS === 'true'
const reload = process.env.RELOAD_SW === 'true'
const selfDestroying = process.env.SW_DESTROY === 'true'

if (process.env.SW === 'true') {
pwaOptions.srcDir = 'src'
Expand All @@ -59,6 +60,9 @@ if (reload) {
replaceOptions.__RELOAD_SW__ = 'true'
}

if (selfDestroying)
pwaOptions.selfDestroying = selfDestroying

export default defineConfig({
build: {
sourcemap: process.env.SOURCE_MAP === 'true',
Expand Down
Loading

0 comments on commit b10b121

Please sign in to comment.