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

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 事件仅触发此控制台一次。如果我再试一次，它什么也没显示。

Answer 1

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

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

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

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