Fix PWA install by registering service worker in theme

VitePress did not auto-inject SW registration; manual registerSW enables true app install on HTTPS.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
dekun
2026-06-05 17:47:57 +08:00
parent f663867a25
commit c9f78ef25f
3 changed files with 31 additions and 1 deletions
+2 -1
View File
@@ -3,7 +3,7 @@ import { VitePWA } from 'vite-plugin-pwa'
export function createPwaPlugin() { export function createPwaPlugin() {
return VitePWA({ return VitePWA({
registerType: 'autoUpdate', registerType: 'autoUpdate',
injectRegister: 'auto', injectRegister: null,
manifestFilename: 'site.webmanifest', manifestFilename: 'site.webmanifest',
includeAssets: [ includeAssets: [
'favicon.ico', 'favicon.ico',
@@ -14,6 +14,7 @@ export function createPwaPlugin() {
'icon-512.png', 'icon-512.png',
], ],
manifest: { manifest: {
id: '/',
name: '道德经 · 传统文化典籍', name: '道德经 · 传统文化典籍',
short_name: '道德经', short_name: '道德经',
description: '传统文化典籍资料库', description: '传统文化典籍资料库',
+6
View File
@@ -2,6 +2,12 @@ import DefaultTheme from 'vitepress/theme'
import { h } from 'vue' import { h } from 'vue'
import InstallApp from './InstallApp.vue' import InstallApp from './InstallApp.vue'
if (typeof window !== 'undefined') {
import('virtual:pwa-register').then(({ registerSW }) => {
registerSW({ immediate: true })
})
}
export default { export default {
extends: DefaultTheme, extends: DefaultTheme,
Layout: () => { Layout: () => {
+23
View File
@@ -367,6 +367,29 @@ ss -tlnp | grep 12100
- **对外访问必须使用 HTTPS**(云服务器反代层配置 SSL) - **对外访问必须使用 HTTPS**(云服务器反代层配置 SSL)
- 内网 `http://192.168.x.x:12100` 仅适合调试,Android 通常不会弹出「安装应用」 - 内网 `http://192.168.x.x:12100` 仅适合调试,Android 通常不会弹出「安装应用」
### 只能「创建快捷方式」,没有「安装应用」?
常见两个原因:
**1. 用了 HTTP 内网地址(如 `http://192.168.x.x:12100`**
| 访问方式 | 浏览器行为 |
|----------|------------|
| HTTP 内网 IP | 只能「创建快捷方式」,**不能**真正安装 PWA |
| **HTTPS 域名** | 可「安装应用 / 添加到主屏幕」 |
**2. Service Worker 未注册(已在最新代码修复)**
更新后按 F12 → **Application(应用)****Service Workers**,应看到 `/sw.js` 状态为 **activated**
若仍是红色报错,执行:
```bash
git pull && npm install && npm run build && npm run start
```
然后 **Ctrl+Shift+R** 强刷,或删除旧快捷方式后重装。
### 电脑(Chrome / Edge ### 电脑(Chrome / Edge
1. 用 HTTPS 域名打开站点并登录 1. 用 HTTPS 域名打开站点并登录