带有 Angular 4 的 Chrome 中的 PWA 添加到主屏幕按钮

Question

我已经开始使用 Workbox3 开发 PWA。到目前为止，它的效果非常惊人。我已将代码添加到 添加到主屏幕 按钮，以便用户可以将其添加到移动设备的主屏幕。但是在主屏幕上添加图标的提示框只显示一次。一旦我将该图标添加到主屏幕，然后如果我将其删除并再次尝试相同，则它不会显示任何内容。

我正在从 Chrome 的 DevTool->Application->Mainfest sectoin->添加到主屏幕签入 Desktop chrome。我的 Service Worker 已正确安装且工作正常。

它没有显示任何错误，没有任何控制台。所以我无法追踪问题所在。

这是我迄今为止为添加到主屏幕所做的代码。我在页脚添加了这个按钮。

<button name="addToHome" id="addToHome" class="addToHome">Add To Homescreen</button> 

var deferredPrompt;
var btnSave = document.querySelectorAll('.addToHome')[0];

    window.addEventListener('beforeinstallprompt', function(e) {
      console.log('beforeinstallprompt Event fired');
      //e.preventDefault();   //I even try with this uncommented no luck so far

      // Stash the event so it can be triggered later.
      deferredPrompt = e;

      return false;
    });

    btnSave.addEventListener('click', function() {
      if(deferredPrompt !== undefined) {
        // The user has had a postive interaction with our app and Chrome
        // has tried to prompt previously, so let's show the prompt.
        deferredPrompt.prompt();

        // Follow what the user has done with the prompt.
        deferredPrompt.userChoice.then(function(choiceResult) {

          console.log(choiceResult.outcome);

          if(choiceResult.outcome == 'dismissed') {
            console.log('User cancelled home screen install');
          }
          else {
            console.log('User added to home screen');
          }

          // We no longer need the prompt.  Clear it up.
          deferredPrompt = null;
        });
      }
    });

    window.addEventListener('appinstalled', (evt) => {
      app.logEvent('a2hs', 'installed');
      console.log("dfadf    ");
    });

它只显示 beforeinstallprompt 事件触发此控制台一次。如果我再试一次，它什么也没显示。

Answer 1

如果您需要在可以更改 Chrome 标志的选定设备中再次显示安装提示，您可以通过启用此标志来实现，

chrome://flags/#bypass-app-banner-engagement-checks

如果网站满足所有 PWA 标准并且用户访问该网站的次数达到了参与度阈值（任何浏览器供应商或 W3C 都没有硬定义），浏览器只会显示一次安装提示。

在您的情况下，它显示了您已使用的提示，但删除了已安装的应用程序，这意味着您必须等待达到浏览器设置的参与度阈值（您将使用上述标志覆盖）。关于浏览器检查已安装应用程序是否存在并重新提示的频率也没有官方文档或标准。虽然这些提示的工作方式仍在不断发展（一些浏览器/操作系统组合现在甚至没有显示），但此标志可以节省开发人员的测试工作量。