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:
+2
-1
@@ -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: '传统文化典籍资料库',
|
||||||
|
|||||||
@@ -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: () => {
|
||||||
|
|||||||
@@ -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 域名打开站点并登录
|
||||||
|
|||||||
Reference in New Issue
Block a user