angular - PWA 使用 Angular 4 添加到 Chrome 中的主屏幕按钮

Question

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

我正在从 Chrome 的 DevTool->Application->Mainfest sectoin->Add to Home Screen 检查 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 Event fired 这个控制台。如果我再试一次，它什么也没显示。

Answer 1

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

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

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

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