我在我的代码中有一个按钮标签,作为渐进式web应用程序(PWA)的下载按钮。此按钮显示在桌面chrome上,我的android chrome浏览器上,但不显示在我的iphone(Safari)上。以下是代码
index.html<div class="fixed-action-btn">
<button class="add-button modal-trigger btn btn-large btn-floating amber waves-effect waves-light orange darken-3">
<i class="large material-icons">file_download</i>
</button>
</div>javascript中的添加到主屏幕脚本
let deferredPrompt;
const addBtn = document.querySelector('.add-button');
addBtn.style.display = 'none';
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;
// Update UI to notify the user they can add to home screen
addBtn.style.display = 'block';
addBtn.addEventListener('click', (e) => {
// hide our user interface that shows our A2HS button
addBtn.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;
});
});
});
</script>该按钮没有额外的CSS。注意:应用程序托管在heroku上
发布于 2021-09-12 09:47:14
BeforeInstallPromptEvent在Safari中不可用(截至2021年9月)
https://developer.mozilla.org/en-US/docs/Web/API/BeforeInstallPromptEvent
https://stackoverflow.com/questions/69149560
复制相似问题