feat: 增加安装bing到桌面

weaigc · Nov 25, 2023 · 1ab582f · 1ab582f
1 parent 39ca297
commit 1ab582f
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 1 deletion.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "bingo",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "private": true,
   "main": "./cloudflare/cli.js",
   "scripts": {

diff --git a/src/components/user-menu.tsx b/src/components/user-menu.tsx
@@ -19,8 +19,13 @@ import { SVG } from './ui/svg'
 export function UserMenu() {
   const [host, setHost] = useState('')
   const { isCopied, copyToClipboard } = useCopyToClipboard({ timeout: 2000 })
+  const [installPrompt, setInstallPrompt] = useState<Event & { prompt: () => void }>()
   useEffect(() => {
     setHost(location.host)
+    window.addEventListener('beforeinstallprompt', (event) => {
+      event.preventDefault()
+      setInstallPrompt(event as Event & { prompt: () => void })
+    })
   }, [])
 
   useEffect(() => {
@@ -105,6 +110,10 @@ export function UserMenu() {
             <div className="font-medium">版本信息 {pkg.version}</div>
           </DropdownMenuItem>
           <DropdownMenuSeparator />
+          {installPrompt && <DropdownMenuItem className="flex-col items-start">
+            <div className="font-medium" onClick={() => installPrompt.prompt?.()}>安装 Bing 到桌面</div>
+          </DropdownMenuItem>}
+          <DropdownMenuSeparator />
           <DropdownMenuItem className="flex-col items-start">
             <div className="font-medium">站点域名</div>
             <div onClick={() => copyToClipboard(host)} className="flex gap-1 text-xs text-zinc-500 cursor-pointer">