Merge pull request #2251 from tangly1024/feat/theme-game-pwa

theme-game 下载PWA按钮

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>
+      )}
+    </>
+  )
+}

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} />