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

时间:2018-05-23 07:55:56

标签: angular manifest progressive-web-apps angular-service-worker

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

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

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

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

<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事件触发这个控制台一次。如果我再次尝试它什么都不显示。

1 个答案:

答案 0 :(得分:2)

如果您需要在可以更改Chrome标记的选定设备中再次显示安装提示,则可以通过启用此标记来执行此操作,

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

如果网站符合所有PWA标准并且用户访问该网站的次数足以满足参与阈值(任何浏览器供应商或W3C都不难定义),浏览器仅显示安装提示一次。

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