如何添加按钮提示用户添加到渐进式Web应用主屏幕

时间:2018-10-21 19:25:41

标签: javascript google-chrome service-worker progressive-web-apps

我的网络应用通过了灯塔的所有测试,并归类为PWA。但是我添加了一个按钮,当单击该按钮时,将提示添加到主屏幕横幅。

我的script.js代码

let deferredPrompt;

window.addEventListener('beforeinstallprompt', (e) => {
  // Prevent Chrome 67 and earlier from automatically showing the prompt
  e.preventDefault();
  // Stash the event so it can be triggered later.
  deferredPrompt = e;
  btnAdd.style.display = 'block';
});
btnAdd.addEventListener('click', (e) => {
  // hide our user interface that shows our A2HS button
  btnAdd.style.display = 'none';
  // Show the prompt
  deferredPrompt.prompt();
  // Wait for the user to respond to the prompt
  deferredPrompt.userChoice
    .then((choiceResult) => {
      if (choiceResult.outcome === 'accepted') {
        console.log('User accepted the A2HS prompt');
      } else {
        console.log('User dismissed the A2HS prompt');
      }
      deferredPrompt = null;
    });
});

html代码:

<script type="text/javascript" src="/static/script.js"></script>
   <div class="wit-log" style="float:left;margin-left:6.8%">



            <a href="/logout">
            <button class="header logout"
                    style="border-width:0;border-radius:50px;color:white;background-color:#2F5FD2;font-size:1rem;line-height:1.5;padding: .8rem .8rem;padding-left:.8rem; padding-right:.8rem;font-weight:300;width:130px;margin-left:0px;clear:both;display:flex;justify-content:center;font-size:15px;margin:0 auto;outline:none">
                <span style="color:white">Log Out</span>
            </button>
                </a>

            **<button id="btnAdd">Click To Add To Homescreen</button>**
        </div>



    </div>


</div>

以上似乎无效。我知道提示被触发,但是我还需要做其他事情吗?

0 个答案:

没有答案