如何允许浏览器安装HTTP协议的PWA？本地自定义域名测试需求

针对你遇到的问题，这里有几个适合本地测试的可行方案：

1. 本地启用HTTPS（最推荐，贴近生产环境） #

Vite可以轻松配置本地HTTPS，用自签名证书就能绕过浏览器的安全限制，同时完全符合PWA的安装要求：

• 安装Vite官方的SSL插件：

  npm install @vitejs/plugin-basic-ssl -D
  

• 在vite.config.js中配置插件：

  import { defineConfig } from 'vite';
  import basicSsl from '@vitejs/plugin-basic-ssl';
  import { VitePWA } from 'vite-plugin-pwa';
  
  export default defineConfig({
    plugins: [
      basicSsl(),
      VitePWA({ /* 你的PWA配置 */ })
    ],
  });
  

• 启动项目后，浏览器会提示证书不安全，只需手动添加信任（比如Chrome里选择"高级"->"继续访问"），之后就能正常安装PWA，也不影响子域Cookie同步。

2. 修改Chrome启动参数（快速临时方案） #

如果不想配置HTTPS，可以通过Chrome启动参数将你的指定域名标记为安全源：

• 关闭所有Chrome窗口
• 找到Chrome的快捷方式，右键选择"属性"，在"目标"字段末尾添加（注意和原有内容留空格）：

  --unsafely-treat-insecure-origin-as-secure=http://appName.local.company.com
  

• 启动Chrome后，访问你的应用就能正常安装PWA。测试完成后记得改回快捷方式，避免长期开启带来的安全风险。

3. 通过Chrome Flags配置（和启动参数效果一致） #

• 打开Chrome，访问chrome://flags/#unsafely-treat-insecure-origin-as-secure
• 将选项设置为"Enabled"，在输入框中填入你的域名http://appName.local.company.com
• 点击"Relaunch"重启浏览器，之后就能正常安装PWA。

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