feat: 添加 PWA 安装支持,包含安装提示和 iOS 指导页面

This commit is contained in:
2026-01-04 11:54:48 +07:00
parent c3f4c2709d
commit 03c9ddac66
5 changed files with 329 additions and 0 deletions

View File

@@ -0,0 +1,42 @@
<script setup lang="ts">
import { alertController, modalController } from "@ionic/vue";
import IOSInstallGuide from "./ios-install-guide.vue";
const { t } = useI18n();
const {
showInstallButton,
promptInstall,
isIOS,
} = usePWAInstall();
async function handleInstall() {
const result = await promptInstall();
if (result.outcome === "accepted") {
const alert = await alertController.create({
header: t("pwa.install.success"),
message: t("pwa.install.successMessage"),
buttons: [t("common.ok")],
});
await alert.present();
}
else if (result.outcome === "ios-instruction") {
const modal = await modalController.create({
component: IOSInstallGuide,
});
await modal.present();
}
}
</script>
<template>
<IonButton
v-if="showInstallButton"
expand="block"
@click="handleInstall"
>
<IIcBaselineDownload class="mr-2" />
{{ isIOS ? t('pwa.install.addToHomeScreen') : t('pwa.install.installApp') }}
</IonButton>
</template>