首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >PWA HTML按钮在安卓系统中显示,但不在iOS上显示

PWA HTML按钮在安卓系统中显示,但不在iOS上显示
EN

Stack Overflow用户
提问于 2021-09-12 08:02:31
回答 1查看 47关注 0票数 0

我在我的代码中有一个按钮标签,作为渐进式web应用程序(PWA)的下载按钮。此按钮显示在桌面chrome上,我的android chrome浏览器上,但不显示在我的iphone(Safari)上。以下是代码

代码语言:javascript
复制
index.html
代码语言:javascript
复制
<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中的添加到主屏幕脚本

代码语言: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上

EN

回答 1

Stack Overflow用户

发布于 2021-09-12 09:47:14

BeforeInstallPromptEvent在Safari中不可用(截至2021年9月)

https://developer.mozilla.org/en-US/docs/Web/API/BeforeInstallPromptEvent

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/69149560

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档