Question

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

我正在检查Chrome的DevTool中的桌面镶边 - ＆gt;应用程序 - ＆gt; Mainfest sectoin-＆gt;添加到主屏幕。我的服务工作者已正确安装并正常运行。

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

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

<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都不难定义），浏览器仅显示安装提示一次。

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

使用Angular 4在Chrome中添加到主屏幕按钮

1 个答案: