feat(plugin-remove-pwa): add remove pwa plugin (#54)

docs/.vuepress/configs/navbar/en.ts

@@ -38,7 +38,7 @@ export const navbarEn: NavbarConfig = [
       },
       {
         text: 'PWA',
-        children: ['/plugins/pwa', '/plugins/pwa-popup'],
+        children: ['/plugins/pwa', '/plugins/pwa-popup', '/plugins/remove-pwa'],
       },
       {
         text: 'SEO',

docs/.vuepress/configs/navbar/zh.ts

@@ -38,7 +38,11 @@ export const navbarZh: NavbarConfig = [
       },
       {
         text: 'PWA',
-        children: ['/zh/plugins/pwa', '/zh/plugins/pwa-popup'],
+        children: [
+          '/zh/plugins/pwa',
+          '/zh/plugins/pwa-popup',
+          '/zh/plugins/remove-pwa',
+        ],
       },
       {
         text: '搜索引擎增强',

docs/.vuepress/configs/sidebar/en.ts

@@ -39,7 +39,7 @@ export const sidebarEn: SidebarConfig = {
     },
     {
       text: 'PWA',
-      children: ['/plugins/pwa', '/plugins/pwa-popup'],
+      children: ['/plugins/pwa', '/plugins/pwa-popup', '/plugins/remove-pwa'],
     },
     {
       text: 'SEO',

docs/.vuepress/configs/sidebar/zh.ts

@@ -40,7 +40,11 @@ export const sidebarZh: SidebarConfig = {
     },
     {
       text: 'PWA',
-      children: ['/zh/plugins/pwa', '/zh/plugins/pwa-popup'],
+      children: [
+        '/zh/plugins/pwa',
+        '/zh/plugins/pwa-popup',
+        '/zh/plugins/remove-pwa',
+      ],
     },
     {
       text: '搜索引擎增强',

docs/plugins/pwa.md

@@ -6,6 +6,12 @@ Make your VuePress site a [Progressive Web Application (PWA)](https://developer.
 
 This plugin uses [workbox-build](https://developers.google.com/web/tools/workbox/modules/workbox-build) to generate service worker file, and uses [register-service-worker](https://github.com/yyx990803/register-service-worker) to register service worker.
 
+::: warning
+
+If you enabled this plugin once and you want to disable it, you might need [`@vuepress/plugin-remove-pwa](./remove-pwa.md) to remove the existing service worker.
+
+:::
+
 ## Usage
 
 ```bash

docs/plugins/remove-pwa.md

@@ -0,0 +1,50 @@
+# remove-pwa
+
+<NpmBadge package="@vuepress/plugin-remove-pwa" />
+
+This plugin removes any related service worker from your VuePress site, so that users can still get updates if you removed any PWA plugin after enabling it.
+
+::: tip Why this plugin is needed if you used PWA plugin once?
+
+PWA plugins like [`@vuepress/plugin-pwa`](./pwa.md) register service worker to your site, which will cache your site and make it available offline.
+
+However, if you remove pwa plugin, the old service worker will still be there, but they can never get an update because they can never found a new service worker to update to. So users will stay with the old version of your site.
+
+To solve this problem:
+
+1. A new service worker with empty contents shall be generated in the original place.
+1. The new service worker shall attempt to remove contents that old service worker cached, then it should unregister itself.
+
+:::
+
+## Usage
+
+```bash
+npm i -D @vuepress/plugin-remove-pwa@next
+```
+
+```ts
+import { removePwaPlugin } from '@vuepress/plugin-remove-pwa'
+
+export default {
+  plugins: [
+    removePwaPlugin({
+      // options
+    }),
+  ],
+}
+```
+
+## Config
+
+### cachePrefix
+
+- Type: `string`
+- Default: `'workbox'`
+- Details: The cache prefix for the service worker.
+
+### swLocation
+
+- Type: `string`
+- Default: `'service-worker.js'`
+- Details: The location of the old service worker.

docs/zh/plugins/pwa.md

@@ -6,6 +6,12 @@
 
 该插件使用 [workbox-build](https://developers.google.com/web/tools/workbox/modules/workbox-build) 来生成 Service Worker 文件，并通过 [register-service-worker](https://github.com/yyx990803/register-service-worker) 来注册 Service Worker 。
 
+::: warning
+
+如果你启用过该插件，并想要禁用它，你可能需要 [`@vuepress/plugin-remove-pwa](./remove-pwa.md) 来移除现有的 Service Worker 。
+
+:::
+
 ## 使用方法
 
 ```bash

docs/zh/plugins/remove-pwa.md

@@ -0,0 +1,51 @@
+# remove-pwa
+
+<NpmBadge package="@vuepress/plugin-remove-pwa" />
+
+此插件从你的 VuePress 站点中删除任何相关的 Service Worker，因此如果你在启用后任何 PWA 插件后移除它们，用户仍然可以获得更新。
+
+::: tip 如果你启用过 PWA，为什么需要这个插件？
+
+PWA 插件，如 [`@vuepress/plugin-pwa`](./pwa.md) 将 Service Worker 注册到你的站点，这将缓存你的站点并使其离线可用。
+
+但是，如果你删除 PWA 插件，先前的 Service Worker 仍将在那里，但它们永远无法获得更新，因为他们永远无法找到要更新的新 Service Worker。 因此，用户将继续使用你网站的旧版本。
+
+要解决这个问题：
+
+1. 一个新的内容为空的 Service Worker 需要生成在原位置。
+
+1. 新的 Service Worker 应该尝试删除旧 Service Worker 缓存的内容，然后它应该注销自己。
+
+:::
+
+## Usage
+
+```bash
+npm i -D @vuepress/plugin-remove-pwa@next
+```
+
+```ts
+import { removePwaPlugin } from '@vuepress/plugin-remove-pwa'
+
+export default {
+  plugins: [
+    removePwaPlugin({
+      // options
+    }),
+  ],
+}
+```
+
+## Config
+
+### cachePrefix
+
+- 类型：`string`
+- 默认值：`'workbox'`
+- 详情：Service worker 的缓存前缀。
+
+### swLocation
+
+- 类型： `string`
+- 默认值：`'service-worker.js'`
+- 详情：旧 Service Worker 的位置。

plugins/plugin-remove-pwa/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@vuepress/plugin-remove-pwa",
+  "version": "2.0.0-rc.7",
+  "description": "VuePress plugin - remove-pwa",
+  "keywords": [
+    "vuepress-plugin",
+    "vuepress",
+    "plugin",
+    "remove-pwa"
+  ],
+  "homepage": "https://ecosystem.vuejs.press/plugins/rtl.html",
+  "bugs": {
+    "url": "https://github.com/vuepress/ecosystem/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vuepress/ecosystem.git",
+    "directory": "plugins/plugin-remove-pwa"
+  },
+  "license": "MIT",
+  "author": {
+    "name": "Mr.Hope",
+    "email": "[email protected]",
+    "url": "https://mister-hope.com"
+  },
+  "type": "module",
+  "exports": {
+    ".": "./lib/node/index.js",
+    "./package.json": "./package.json"
+  },
+  "main": "./lib/node/index.js",
+  "types": "./lib/node/index.d.ts",
+  "files": [
+    "lib"
+  ],
+  "scripts": {
+    "build": "tsc -b tsconfig.build.json",
+    "clean": "rimraf --glob ./lib ./*.tsbuildinfo"
+  },
+  "peerDependencies": {
+    "vuepress": "2.0.0-rc.2"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

plugins/plugin-remove-pwa/src/node/index.ts

@@ -0,0 +1 @@
+export * from './removePWAPlugin.js'

plugins/plugin-remove-pwa/src/node/removePWAPlugin.ts

@@ -0,0 +1,40 @@
+import type { PluginObject } from 'vuepress/core'
+import { removeLeadingSlash } from 'vuepress/shared'
+import { fs } from 'vuepress/utils'
+
+export interface RemovePWAPluginOptions {
+  /**
+   * Original service worker cache prefix
+   *
+   * 原始 service worker 缓存前缀
+   *
+   * @default "workbox"
+   */
+  cachePrefix?: string
+
+  /**
+   * Original service worker location relative to dest folder
+   *
+   * 相对于 dest 文件夹的原始 service worker 位置
+   *
+   * @default "service-worker.js"
+   */
+  swLocation?: string
+}
+
+export const removePWAPlugin = ({
+  cachePrefix = 'workbox',
+  swLocation = 'service-worker.js',
+}: RemovePWAPluginOptions): PluginObject => ({
+  name: 'vuepress-plugin-remove-pwa',
+
+  onGenerated: async (app): Promise<void> => {
+    const SERVICE_WORKER_CONTENT = `self.addEventListener("install",(()=>self.skipWaiting())),self.addEventListener("activate",(()=>{const e=[${JSON.stringify(cachePrefix)},"precache-v2","undefined"!=typeof registration?registration.scope:""].filter((e=>e&&e.length>0)).join("-");self.caches.open(e).then((e=>e.keys())).then((e=>e.forEach((e=>cache.delete(e))))).then((()=>{self.clients.claim().then((()=>{})).then((()=>self.registration.unregister())).then((()=>self.clients.matchAll())).then((e=>e.forEach((e=>e.navigate(e.url)))))}))}));`
+
+    await fs.writeFile(
+      app.dir.dest(removeLeadingSlash(swLocation)),
+      SERVICE_WORKER_CONTENT,
+      'utf-8',
+    )
+  },
+})

plugins/plugin-remove-pwa/tsconfig.build.json

@@ -0,0 +1,8 @@
+{
+  "extends": "../../tsconfig.build.json",
+  "compilerOptions": {
+    "rootDir": "./src",
+    "outDir": "./lib"
+  },
+  "include": ["./src"]
+}

tsconfig.build.json

@@ -36,6 +36,7 @@
     {
       "path": "./plugins/plugin-register-components/tsconfig.build.json"
     },
+    { "path": "./plugins/plugin-remove-pwa/tsconfig.build.json" },
     { "path": "./plugins/plugin-rtl/tsconfig.build.json" },
     { "path": "./plugins/plugin-search/tsconfig.build.json" },
     { "path": "./plugins/plugin-seo/tsconfig.build.json" },