feat: 更新 PWA 安装逻辑,添加 Service Worker 注册和安装提示处理
This commit is contained in:
@@ -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) {
|
||||
|
||||
Reference in New Issue
Block a user