1. 需求

這種需求其實在國外一些游戲網站和推廣網站中經常會用到，目的是為了讓客戶 快捷方便的保存網站到桌面 ，網站主動盡量避免下次找不到網站地址了，當然精確的客戶自己也可以使用瀏覽器的收藏功能去收藏

2. 實現效果

1. 下面 gif 效果我們可以看到默認進去會彈窗一個提示，提示用戶進行網站安裝到桌面的提示效果
   

2. 當我們點擊 安裝 后，會馬上單獨開一個窗口（這個窗口和普通的瀏覽器彈窗有點不一樣，類似于一個Electron），并且會保存到桌面，展示快捷方式
   

3. 測試：打開電腦 應用 -> 安裝的應用，也可以看到，這個網站地址也被安裝到應用上了
   

3. 核心邏輯

window.deferredPrompt?.prompt

const installApp = () => {clearTimeout(timeOut);window.deferredPrompt?.prompt().then(() => {showInstallSet(false);});showInstallSet(false);
};

4. 完整react代碼

1. 新建一個 GuideDown 組件，實現代碼如下，代碼內容其實很簡單，這邊不做過多詳解

import React, {useEffect, useState} from 'react';
import {observer} from 'mobx-react-lite';
import {CloseOutline} from 'antd-mobile-icons';
import {Divider} from 'antd';
import {Button} from 'antd-mobile';
import {useTranslation} from 'react-i18next';let timeOut = null;
const GuideDown = () => {const {t} = useTranslation();const [showInstall, showInstallSet] = useState(false); // 彈窗展示const [linkTime, lineTimeSet] = useState(5); // 倒計時獲取能否安裝狀態，如果這個時間內一直沒有，就不彈出useEffect(() => {try {if (window?.deferredPrompt) {if (sessionStorage.getItem('closeAppInstall') !== '1') showInstallSet(true);}} catch (error) {}timeOut = setTimeout(() => {lineTimeSet((e) => e - 1);clearTimeout(timeOut);}, 3000);}, [linkTime]);const installApp = () => {clearTimeout(timeOut);window.deferredPrompt?.prompt().then(() => {showInstallSet(false);});showInstallSet(false);};return showInstall ? (<div className='fixed top-4 right-4 w-75 bg-b2 z-[200] rounded-lg shadow-lg'><div className='flex justify-between items-center p-3'><span className='text-[16px] theme'>如何快速訪問網站</span>{' '}<CloseOutlineclassName='cursor-pointer'onClick={() => {showInstallSet(false);sessionStorage.setItem('closeAppInstall', '1');}}/></div><div className='pt-4 grid grid-cols-2 text-[12px]'><div className='px-3 flex flex-col justify-between relative after:content-[""] after:bg-white/5 after:w-[1px] after:h-20 after:absolute after:right-0 after:top-1/2 after:-translate-y-1/2'><div className='leading-4'>1、在瀏覽器搜索欄點擊該圖標</div><div className='mt-2'><img src={require('@/branch/assets/images/download/guide1.png')} className='max-w-full' /></div></div><div className='px-3 flex flex-col justify-between'><div className='leading-4'>2、在彈出框內點擊安裝</div><div className='mt-2'><img src={require('@/branch/assets/images/download/guide2.png')} className='max-w-full' /></div></div></div><div className='px-3 text-[12px]'>在桌面找到快捷方式即可直接打開網站</div><Divider className='mt-2 mb-0 h-[1px bg-white/5' /><div className='flex justify-end items-center h-11'><ButtonclassName='bg-b1 text-w2 px-3 border-none rounded-full min-w-[70px] flex justify-center items-center !h-7 mr-3'onClick={() => installApp()}>{t('anzhuang')}</Button><ButtonclassName='border border-solid border-deep text-[#AFCAFA] px-3 rounded-full min-w-[70px] flex justify-center items-center !h-7 mr-3'onClick={() => {showInstallSet(false);sessionStorage.setItem('closeAppInstall', '1');}}>{t('btn_cancel')}</Button></div></div>) : (<></>);
};export default observer(GuideDown);