diff --git a/themes/game/components/DownloadButton.js b/themes/game/components/DownloadButton.js new file mode 100644 index 00000000..c3f30f9d --- /dev/null +++ b/themes/game/components/DownloadButton.js @@ -0,0 +1,84 @@ +/* eslint-disable @next/next/no-img-element */ + +import { useEffect, useState } from 'react' + +/** + * 下载按钮 + * @returns + */ +export default function DownloadButton() { + const [showButton, setShowButton] = useState(false) + + useEffect(() => { + // 判断用户是在PWA中打开,就隐藏 + const isInStandaloneMode = () => + window.matchMedia('(display-mode: standalone)').matches || + window.navigator.standalone || + document.referrer.includes('android-app://') + + if ('serviceWorker' in navigator && !isInStandaloneMode()) { + setShowButton(true) + window.addEventListener('load', () => { + navigator.serviceWorker + .register('/service-worker.js') + .then(registration => { + console.log('Service Worker 注册成功:', registration) + }) + .catch(error => { + console.log('Service Worker 注册失败:', error) + }) + }) + + window.addEventListener('beforeinstallprompt', event => { + // 阻止浏览器默认的安装提示 + event.preventDefault() + // 保存安装提示的事件 + window.deferredPrompt = event + // 在按钮上显示一个标识,提示用户可以安装应用 + setShowButton(true) + }) + } + }, []) + + /** + * 点击后提示用户安装 + */ + function download() { + // 检查是否支持安装提示 + if (window.deferredPrompt) { + // 显示安装提示 + window.deferredPrompt.prompt() + // 等待用户做出选择 + window.deferredPrompt.userChoice.then(choiceResult => { + if (choiceResult.outcome === 'accepted') { + // 用户已安装,隐藏按钮 + setShowButton(false) + console.log('用户已同意安装') + } else { + console.log('用户已拒绝安装') + } + // 清除安装提示 + window.deferredPrompt = null + }) + } + } + + return ( + <> + {showButton && ( +