feat: 添加 PWA 安装支持,包含安装提示和 iOS 指导页面
This commit is contained in:
42
src/components/pwa-install-button/index.vue
Normal file
42
src/components/pwa-install-button/index.vue
Normal 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>
|
||||
Reference in New Issue
Block a user