React PWA移动端已安装检测：如何隐藏安装按钮？

一、先排查getInstalledRelatedApps()失败的核心原因 #

这个方法生效有严格的前提条件，你大概率是没满足配置要求：

• 站点必须处于安全上下文（HTTPS 部署，localhost 本地开发除外）
• manifest.json 必须配置 related_applications 字段，明确关联你的 PWA
• 浏览器需要支持该 API（Chrome、Edge 较新版本支持，Safari 目前不支持）

二、正确配置与调用流程 #

1. 完善 manifest.json #

在项目的 public/manifest.json 中添加以下配置：

{
  // ... 其他已有配置
  "related_applications": [
    {
      "platform": "webapp",
      "url": "https://你的域名.com/manifest.json" // 替换成你实际的manifest完整URL
    }
  ],
  "prefer_related_applications": false // 设为false避免浏览器强制跳转已安装应用
}

2. 在React组件中实现状态检测与按钮控制 #

下面是完整的组件示例，结合getInstalledRelatedApps()和备用方案（检测独立运行模式）：

import { useEffect, useState } from 'react';

export default function InstallButton() {
  const [isInstalled, setIsInstalled] = useState(false);
  const [showPrompt, setShowPrompt] = useState(false);
  let deferredPrompt = null;

  useEffect(() => {
    // 检测应用是否已安装
    const checkInstallStatus = async () => {
      // 方案1：使用getInstalledRelatedApps
      if ('getInstalledRelatedApps' in navigator) {
        try {
          const installedApps = await navigator.getInstalledRelatedApps();
          const found = installedApps.some(app => app.url.includes('你的域名.com/manifest.json'));
          setIsInstalled(found);
        } catch (err) {
          console.error('检测安装状态失败:', err);
        }
      }

      // 方案2：检测独立运行模式（兼容不支持getInstalledRelatedApps的浏览器）
      const isStandalone = window.matchMedia('(display-mode: standalone)').matches;
      if (isStandalone) setIsInstalled(true);

      // 监听媒体查询变化（比如用户刚安装后切换模式）
      const mediaQuery = window.matchMedia('(display-mode: standalone)');
      const handleModeChange = (e) => setIsInstalled(e.matches);
      mediaQuery.addEventListener('change', handleModeChange);

      // 监听安装提示事件
      const handleBeforeInstallPrompt = (e) => {
        e.preventDefault();
        deferredPrompt = e;
        if (!isInstalled) setShowPrompt(true);
      };

      // 监听安装完成事件
      const handleAppInstalled = () => {
        setIsInstalled(true);
        setShowPrompt(false);
        deferredPrompt = null;
      };

      window.addEventListener('beforeinstallprompt', handleBeforeInstallPrompt);
      window.addEventListener('appinstalled', handleAppInstalled);

      // 清理事件监听
      return () => {
        mediaQuery.removeEventListener('change', handleModeChange);
        window.removeEventListener('beforeinstallprompt', handleBeforeInstallPrompt);
        window.removeEventListener('appinstalled', handleAppInstalled);
      };
    };

    checkInstallStatus();
  }, []);

  const handleInstall = async () => {
    if (deferredPrompt) {
      deferredPrompt.prompt();
      const { outcome } = await deferredPrompt.userChoice;
      if (outcome === 'accepted') {
        console.log('用户确认安装');
      }
      deferredPrompt = null;
      setShowPrompt(false);
    }
  };

  // 已安装或无需显示提示时，不渲染按钮
  if (isInstalled || !showPrompt) return null;

  return (
    <button onClick={handleInstall} style={{ padding: '8px 16px', cursor: 'pointer' }}>
      安装应用
    </button>
  );
}

三、常见问题排查 #

• 本地开发时，确保使用localhost而非IP地址，否则安全上下文不满足
• 检查manifest.json是否被正确加载：Chrome DevTools → Application → Manifest，确认所有字段正常显示
• Safari 用户：由于不支持getInstalledRelatedApps()，完全依赖独立模式检测即可，逻辑依然生效

内容的提问来源于stack exchange，提问作者Albert Berty