在 PWAInstallPrompt.vue 中添加 HTTPS 环境检查

This commit is contained in:
jxxghp
2025-07-10 10:59:02 +08:00
parent 79ae772367
commit af1e0a2a60
+9 -6
View File
@@ -15,9 +15,14 @@ const dismissed = ref(false)
const authStore = useAuthStore() const authStore = useAuthStore()
const isLogin = computed(() => authStore.token) const isLogin = computed(() => authStore.token)
// 检查当前是不是https环境
const isHttps = computed(() => {
return window.location.protocol === 'https:'
})
// 检查是否应该显示横幅 // 检查是否应该显示横幅
const shouldShowBanner = computed(() => { const shouldShowBanner = computed(() => {
return !isInstalled.value && !dismissed.value && !showInstructions.value && isLogin.value return !isInstalled.value && !dismissed.value && !showInstructions.value && isLogin.value && isHttps.value
}) })
// 显示延迟(避免立即显示) // 显示延迟(避免立即显示)
@@ -62,8 +67,6 @@ const dismissBanner = () => {
localStorage.setItem('pwa-install-dismissed', new Date().toISOString()) localStorage.setItem('pwa-install-dismissed', new Date().toISOString())
} }
// 获取平台特定的安装说明 // 获取平台特定的安装说明
const instructions = computed(() => { const instructions = computed(() => {
const rawInstructions = getInstallInstructions() const rawInstructions = getInstallInstructions()
@@ -75,17 +78,17 @@ const instructions = computed(() => {
// 直接使用t函数获取安装步骤,避免编译对象的问题 // 直接使用t函数获取安装步骤,避免编译对象的问题
const steps = [] const steps = []
const maxSteps = 10 // 最大步骤数,防止无限循环 const maxSteps = 10 // 最大步骤数,防止无限循环
for (let i = 0; i < maxSteps; i++) { for (let i = 0; i < maxSteps; i++) {
try { try {
const stepKey = `pwa.installSteps.${platformKey}.${i}` const stepKey = `pwa.installSteps.${platformKey}.${i}`
const stepText = t(stepKey) const stepText = t(stepKey)
// 如果返回的是键名本身,说明没有找到对应的翻译 // 如果返回的是键名本身,说明没有找到对应的翻译
if (stepText === stepKey) { if (stepText === stepKey) {
break break
} }
steps.push(stepText) steps.push(stepText)
} catch (error) { } catch (error) {
// 如果出现错误,说明没有更多步骤 // 如果出现错误,说明没有更多步骤