I have a button tag in my code as download button for progressive web app(PWA). This button displays on desktop chrome, my android chrome browser but not on my iphone(Safari). Here is the code

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>

The add to home screen script in 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>

the button has no additional CSS. NOTE: the application is hosted on heroku