lobe-chat

1
import { pwaInstallHandler } from 'pwa-install-handler';
2
import { useEffect, useState } from 'react';
3

4
import { PWA_INSTALL_ID } from '@/const/layoutTokens';
5
import { isOnServerSide } from '@/utils/env';
6

7
import { usePlatform } from './usePlatform';
8

9
export const usePWAInstall = () => {
10
  const [canInstall, setCanInstall] = useState(false);
11
  const { isSupportInstallPWA, isPWA } = usePlatform();
12

13
  useEffect(() => {
14
    if (isOnServerSide) return;
15
    pwaInstallHandler.addListener(setCanInstall);
16
    return () => {
17
      pwaInstallHandler.removeListener(setCanInstall);
18
    };
19
  }, []);
20

21
  const installCheck = () => {
22
    // 当在 PWA 中时，不显示安装按钮
23
    if (isPWA) return false;
24
    // 其他情况下，根据是否可以安装来显示安装按钮 (如已经安装则不显示)
25
    if (isSupportInstallPWA) return canInstall;
26
    // 当在不支持 PWA 的环境中时，安装按钮 (此时为安装教程)
27
    return true;
28
  };
29

30
  return {
31
    canInstall: installCheck(),
32
    install: () => {
33
      const pwa: any = document.querySelector(`#${PWA_INSTALL_ID}`);
34
      if (!pwa) return;
35
      pwa.externalPromptEvent = pwaInstallHandler.getEvent();
36
      pwa?.showDialog(true);
37
    },
38
  };
39
};
40