Блог

У меня в коде есть тег кнопки в качестве кнопки загрузки для прогрессивного веб-приложения(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

BeforeInstallPromptEvent недоступно в Safari (по состоянию на сентябрь 2021 года)

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