我的网络应用通过了灯塔的所有测试,并归类为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>
以上似乎无效。我知道提示被触发,但是我还需要做其他事情吗?