为何React应用浏览器地址栏显示“Install Create React App Sample”下载图标？

根本原因 #

这个图标是浏览器的PWA（渐进式Web应用）安装提示，Create React App默认集成了PWA支持（通过模板自带的service-worker.js或Workbox配置），当应用满足以下条件时，浏览器会触发该提示：

• 通过HTTPS访问（本地开发的localhost也被浏览器认定为安全环境）
• 项目根目录存在有效的manifest.json文件，你看到的“Install Create React App Sample”就是该文件里name字段的默认值
• 已注册Service Worker
• 应用未被用户安装过

解决方法 #

根据需求可以选择以下两种处理方式：

1. 完全关闭PWA功能（彻底移除安装提示） #

如果不需要PWA特性，直接禁用即可：

• 删除项目根目录下的public/manifest.json文件
• 在src/index.js中移除注册Service Worker的代码：

  // 删除这部分代码
  import * as serviceWorkerRegistration from './serviceWorkerRegistration';
  serviceWorkerRegistration.register();
  

• 若使用react-scripts@5+版本，也可以在package.json中添加配置：

  "scripts": {
    "build": "react-scripts build --no-pwa"
  }
  

2. 修改PWA配置（自定义提示或调整触发逻辑） #

如果需要保留PWA但想修改提示内容或控制弹出时机：

• 编辑public/manifest.json，替换name和short_name字段为你的应用名称：

  {
    "name": "你的应用全名",
    "short_name": "应用简称",
    // 其他配置保持不变
  }
  

• 手动拦截默认安装提示，自定义触发逻辑：
  在项目中监听beforeinstallprompt事件，阻止浏览器自动弹出，转而通过自定义按钮触发安装：

  let deferredPrompt;
  
  window.addEventListener('beforeinstallprompt', (e) => {
    // 阻止浏览器默认提示
    e.preventDefault();
    // 保存事件，用于后续自定义触发
    deferredPrompt = e;
    // 这里可以渲染自定义的安装按钮，点击时再调用deferredPrompt.prompt()
  });
  

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