防止 PWA 在桌面上安装提示 chrome 76？答案

【问题标题】：Prevent PWA install prompt chrome 76 on desktop?防止 PWA 在桌面上安装提示 chrome 76？
【发布时间】：2019-08-19 12:01:05
【问题描述】：

如果满足 PWA 标准，Chrome 76 会在多功能框中引入一个“安装应用”按钮。

有没有办法阻止这个按钮出现在 chrome 桌面的多功能框中？

【问题讨论】：

如果您不想安装 PWA，为什么要创建它？ - 只是想知道
现在我只想在移动设备上提供安装服务。

标签： google-chrome progressive-web-apps

【解决方案1】：

假设您想阻止默认设置以显示自定义安装横幅，read here。

但是，这个脚本会完全阻止安装横幅！

window.addEventListener('beforeinstallprompt', (e) => {
    // Prevent Chrome 67 and earlier from automatically showing the prompt
    e.preventDefault();
});

【讨论】：

这只会阻止显示安装横幅提示。在 chrome 桌面上，地址栏（多功能框）现在有一个按钮（一个带加号的圆圈）。我想隐藏这个。
然后你阻止服务人员在非移动设备上安装，这是我能找到的唯一方法。更新了我的答案！

【解决方案2】：

为了使您的 PWA只能安装在移动设备上而不能安装在桌面设备上，您可以选择以下方法之一：

重定向到子域或没有清单文件的另一个域

如果您使用的是服务器端渲染，请在发送到客户端之前删除清单 link 标记

<!-- do not include this if the client userAgent is a desktop device (wide screen) -->
<link rel="manifest" href="./manifest.json"/>

在桌面加载页面后删除客户端上的清单

window.addEventListener("load", function() {
  if (navigator.userAgent.indexOf('Mobile') === -1) {
    document.querySelector('link[rel="manifest"]').remove();
  }
});

这样会使您的 PWA 无法安装，因此不会在多功能框中显示“添加到主屏幕”。

【讨论】：