React-router/history 阻止“beforeinstallprompt”事件触发答案

【问题标题】：React-router / history prevents 'beforeinstallprompt' event from firingReact-router/history 阻止“beforeinstallprompt”事件触发
【发布时间】：2020-07-01 10:33:07
【问题描述】：

我有一个 Progressive Web App，它使用 react-router 和 history 包进行导航。在某条路线上，我想显示一个按钮，允许用户直接将产品安装到他们的设备上。按钮的显示监听beforeinstallprompt 事件。它将事件存储在状态中，并在用户按下按钮时触发事件，相当简单的代码，如下所示：

import React from 'react';
import styled from 'styled-components';

import Button from 'components/common/button';

function InstallRoute() {
  const [deferredPrompt, setDeferredPrompt] = React.useState(null);

  const beforeInstallPrompt = (event) => {
    event.preventDefault();
    setDeferredPrompt(event);
  };

  React.useEffect(() => {
    window.addEventListener('beforeinstallprompt', beforeInstallPrompt, true);
    return () => {
      window.removeEventListener('beforeinstallprompt', beforeInstallPrompt, true);
    };
  });

  function install() {
    if (!deferredPrompt) return;
    deferredPrompt.prompt();

    deferredPrompt.userChoice.then((choiceResult) => {
      if (choiceResult.outcome === 'accepted') {
        // accepted
      } else {
        // dismissed
      }
      setDeferredPrompt(null);
    });
  }

  return (
    <InstallWrapper visible={deferredPrompt !== null}>
      <Button onClick={install}>Install app</Button>
    </InstallWrapper>
  );
}

const InstallWrapper = styled.div`
  padding: 32px;
  display: ${props => props.visible ? 'block' : 'none'};
`;

export default InstallRoute;

然而，问题在于beforeinstallprompt 事件仅在初始加载时触发。这意味着它仅在您刷新或使用window.location = '/installroute' 导航到该路线时触发。当使用 react-router 包中的 history.push 或 NavLink 导航到安装路径时，该事件不会触发。

安装按钮在刷新或硬位置更改时按预期工作，但自然我希望它也可以与 react-router/history 一起使用。我不想用肮脏的位置更改污染项目。

有什么解决办法吗？我应该为安装路线使用不同类型的路线元素，还是history.push 的替代品？

【问题讨论】：

我也在寻找同样的答案。如果您发现任何有见地的东西，请与我们分享。

标签： javascript reactjs progressive-web-apps react-router-dom history.js

【解决方案1】：

试试这个事件 = 新事件（'安装前提示'） window.dispatchEvent(事件)

PWA: How to retrigger beforeinstallprompt?

【讨论】：