PWA HTML 按钮在 Android 中显示，但在 iOS 中不显示

Question

我的代码中有一个按钮标签作为渐进式网络应用程序 (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 上

Answer 1

BeforeInstallPromptEvent 在 Safari 中不可用（截至 2021 年 9 月）

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