是否可以在 Edge 桌面上自动添加 PWA（Win 10）

Question

我正在开发 PWA，我设法通过 Win 10 上的 Edge 安装它。它作为 Windows 应用程序自行安装，它也可以在 Edge APPS 部分下使用，但是，该应用程序没有出现在我的桌面上.

要在安装后将其添加到我的桌面屏幕，我需要执行以下步骤：

1. 打开 Edge 的应用设置
2. 转到管理应用标签
3. 右键单击我的应用以打开应用上下文菜单
4. 点击 PIN 菜单
5. 点击Pin to desktop
6. 确认

关于如何将 PWA 添加到桌面的 UX 方法非常冗长且不直观，对于不熟悉所有这些细微差别的用户来说可能很难做到。

在 Chrome 中，PWA 快捷方式会自动添加到桌面，我希望 Edge 也有这种行为（如果可能的话，当然可以）。

所以我的问题是：在用户点击安装按钮并确认安装后，是否可以默认在桌面屏幕上添加 PWA？

感谢任何帮助或信息！

Answer 1

您可以向您的应用添加安装横幅。你没有提到你正在使用哪个库，我使用 react：

function App() {
  const deferredPrompt = useRef(null);
  const [installBannerVisible, setInstallBannerVisible] = useState(false);

  useEffect(() => {
    window.addEventListener("beforeinstallprompt", (e) => {
      e.preventDefault();
      deferredPrompt.current = e;
      showInstallPromotion();
    });
  }, []);

  const showInstallPromotion = () => {
    setInstallBannerVisible(true);
  };

  const handleButtonClick = () => {
    deferredPrompt.current.prompt();
    deferredPrompt.current.userChoice.then((choiceResult) => {
      if (choiceResult.outcome === "accepted") {
        console.log("User accepted the install prompt");
      } else {
        console.log("User dismissed the install prompt");
      }
    });
  };

  return (
    <div>
      {installBannerVisible && (
        <button onClick={handleButtonClick}>Install</button>
      )}
    </div>
  );
}

确保您的浏览器支持安装前提示。

我在最新版本的 Microsoft Edge 中进行了测试。

more info