From 3bde9f90b05de83a0fe9b5acc5926f95e76e4c04 Mon Sep 17 00:00:00 2001
From: "tangly1024.com" <tlyong1992@hotmail.com>
Date: Mon, 1 Apr 2024 15:25:27 +0800
Subject: [PATCH] =?UTF-8?q?theme-game=20=E4=B8=8B=E8=BD=BDPWA=E6=8C=89?=
 =?UTF-8?q?=E9=92=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 themes/game/components/DownloadButton.js | 84 ++++++++++++++++++++++++
 themes/game/index.js                     |  7 +-
 2 files changed, 88 insertions(+), 3 deletions(-)
 create mode 100644 themes/game/components/DownloadButton.js

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 && (
+        <div
+          className=' justify-center items-center md:flex hidden group text-white w-full rounded-lg m-2 md:m-0 p-2 hover:bg-gray-700 bg-[#1F2030] md:rounded-none md:bg-none'
+          onClick={download}>
+          <i
+            alt='download'
+            title='download'
+            className='cursor-pointer fas fa-download group-hover:scale-125 transition-all duration-150 '
+          />
+          <span className='h-full flex mx-2 md:hidden items-center select-none'>
+            Download
+          </span>
+        </div>
+      )}
+    </>
+  )
+}
diff --git a/themes/game/index.js b/themes/game/index.js
index faf2c5de..84b2c63f 100644
--- a/themes/game/index.js
+++ b/themes/game/index.js
@@ -17,6 +17,7 @@ import BlogArchiveItem from './components/BlogArchiveItem'
 import { BlogListPage } from './components/BlogListPage'
 import { BlogListScroll } from './components/BlogListScroll'
 import BlogPostBar from './components/BlogPostBar'
+import DownloadButton from './components/DownloadButton'
 import { Footer } from './components/Footer'
 import FullScreenButton from './components/FullScreenButton'
 import { GameListIndexCombine } from './components/GameListIndexCombine'
@@ -404,15 +405,15 @@ const LayoutSlug = props => {
 
                 {/* 游戏窗口装饰器 */}
                 {game && !loading && (
-                  <div className='game-decorator bg-[#0B0D14] right-0 bottom-0 flex justify-center h-12 md:w-12 z-10 md:absolute'>
-                    {/* 全屏按钮 */}
+                  <div className='game-decorator bg-[#0B0D14] right-0 bottom-0 flex justify-center z-10 md:absolute'>
+                    <DownloadButton />
                     <FullScreenButton />
                   </div>
                 )}
               </div>
 
               {/* 游戏资讯 */}
-              <div className='game-info dark:text-white py-4 px-2 md:px-0 mt-8 md:mt-0'>
+              <div className='game-info dark:text-white py-4 px-2 md:px-0 mt-14 md:mt-0'>
                 {/* 关联游戏 */}
                 <div className='w-full'>
                   <GameListRelate posts={relateGames} />