feat: 更新 PWA 安装逻辑,添加 Service Worker 注册和安装提示处理

This commit is contained in:
2026-01-06 22:40:51 +07:00
parent db3a2327c8
commit e4e4d50ca8
4 changed files with 115 additions and 77 deletions

View File

@@ -6,46 +6,52 @@ import IconParkOutlineDownload from "~icons/icon-park-outline/download";
import IconParkOutlinePhone from "~icons/icon-park-outline/phone";
import IconParkOutlineShare from "~icons/icon-park-outline/share";
const { showInstallButton, isInstalled, promptInstall, isIOS, isIOSSafari } = usePWAInstall();
const { canInstall, isInstalled, install, isIOS, isIOSSafari } = usePWAInstall();
const platform = usePlatform();
const appName = "Riwa";
const isLoading = ref(false);
const showIOSGuide = ref(false);
// 调试日志
onMounted(() => {
console.log("[Download Page] Mounted");
console.log("[Download Page] platform:", platform);
console.log("[Download Page] canInstall:", canInstall.value);
console.log("[Download Page] isInstalled:", isInstalled.value);
console.log("[Download Page] isIOS:", isIOS);
console.log("[Download Page] isIOSSafari:", isIOSSafari);
});
// 检测用户是否卸载过应用
const wasUninstalled = computed(() => {
// 如果localStorage中有标记表示曾经安装过但当前未安装
const wasInstalled = localStorage.getItem("pwa-was-installed");
return wasInstalled === "true" && !isInstalled.value;
});
// 显示下载按钮的条件
// 1. 浏览器环境
// 2. 未安装或曾经卸载过
// 3. Android 或有安装提示事件
// 显示下载按钮的条件
const shouldShowDownloadButton = computed(() => {
return platform === "browser" && (!isInstalled.value || wasUninstalled.value) && (showInstallButton.value || wasUninstalled.value);
const result = platform === "browser" && !isInstalled.value && (canInstall.value || isIOSSafari);
console.log("[Download Page] shouldShowDownloadButton:", result);
return result;
});
// iOS 安装指引
async function showIOSInstallGuide() {
showIOSGuide.value = true;
}
// 处理安装
async function handleInstall() {
if (isIOSSafari) {
await showIOSInstallGuide();
const alert = await alertController.create({
header: "iOS 安装指引",
message: "请点击浏览器底部的分享按钮,然后选择\"添加到主屏幕\"",
buttons: ["知道了"],
});
await alert.present();
return;
}
isLoading.value = true;
try {
const result = await promptInstall();
const result = await install();
if (result.outcome === "accepted") {
// 记录已安装状态
if (result.success && result.outcome === "accepted") {
localStorage.setItem("pwa-was-installed", "true");
const alert = await alertController.create({
@@ -56,7 +62,12 @@ async function handleInstall() {
await alert.present();
}
else if (result.outcome === "ios-instruction") {
await showIOSInstallGuide();
const alert = await alertController.create({
header: "iOS 安装指引",
message: "请点击浏览器底部的分享按钮,然后选择\"添加到主屏幕\"",
buttons: ["知道了"],
});
await alert.present();
}
}
catch (error) {