progressive-web-apps - PWA。如何向用户提供安装应用程序的报价？

Question

我当然可以强制在设备上安装我的 pwa。然而，市场上的现有网站本身就为用户提供安装应用程序的机会。关于安装我的应用程序的可能性，用户不会知道他是否不想尝试(很可能他不想尝试)。

如何向用户提出这样的提议，遗憾的是我还没有弄清楚。找不到文章(可能是搜索设置错误)，对service worker的代码分析也无济于事。

请帮忙。

Answer 1

在 Chrome 手机上，默认提示非常明显。在桌面上，更少。

但是，Chrome 实际上有一个事件。如果一切都是为了安装 PWA，则会触发“beforeinstallprompt”事件。您可以简单地为此事件添加一个监听器，并使用它在您的页面上显示一条消息，以通知用户安装 PWA 的可能性。

以下示例是为 Angular 编写的，但您可以了解事件的概念。

ngOnInit() {
    /**
     * The beforeinstallprompt event is only triggered in certain browsers. This event simply indicates that everything is in order
     * for the user to install the PWA. On mobile Chrome, a message is shown by default to the user, but we can also interfere and
     * block it. This way, we can show our own message, and continue the event on our own terms.
     * In this case, we store the event, and prevent it from continuing. We then show a regular <div> in the HTML, which contains the
     * question to install the PWA, and a button to do so. That button then triggers the prompt, which the user can then accept or deny.
     * The result of this prompt is mostly irrelevant to the functionality. Our code has no impact on the proceedings of the installation
     * after the user has accepted the prompt.
     * A possible usecase for the Promise resolved by the prompt, is for metrics. We can use the result to calculate how many users have
     * accepted or denied our prompts.
     */
    window.addEventListener('beforeinstallprompt', (e) => {
      // Prevent Chrome 67 and earlier from automatically showing the prompt
      e.preventDefault();
      // Stash the event so it can be triggered later.
      this.deferredPrompt = e;

      console.log('beforeinstallprompt!');
      // if askedOnce is true, no need to ask again.
      this.showPwaPrompt = !this.askedOnce;
    });
  }

  acceptPwaPrompt() {
    this.showPwaPrompt = false;
    this.askedOnce = true;
    this.deferredPrompt.prompt();  // Wait for the user to respond to the prompt
    this.deferredPrompt.userChoice.then((choiceResult) => {
      if (choiceResult.outcome === 'accepted') {
        console.log('User accepted the A2HS prompt');
      } else {
        console.log('User dismissed the A2HS prompt');
      }

      this.deferredPrompt = null;
    });
  }