Блог

Доброе утро, друзья.

В настоящее время создается PWA для моего приложения. Мне удалось установить его на рабочий стол одним нажатием кнопки, но на мобильном устройстве это, похоже, не работает. Я погуглил и увидел, что упоминалось, что вы не можете использовать beforeinstallprompt на мобильном устройстве?

Мы подключились к событию «beforeinstallprompt», которое запускается на рабочем столе, поэтому в опубликованном нами коде можно использовать «e» -> «deferredprompt.prompt()». НО на мобильном устройстве — beforeinstallprompt не запускается, поэтому нам нужен другой способ выполнить то же самое defferedprompt.prompt() без помощи события, переданного в функцию «beforeinstallprompt».

Это мой текущий код

 <script type="text/javascript">
   
    if ('serviceWorker' in navigator) {
      window.addEventListener('load', function() {
        navigator.serviceWorker.register('/sw.js').then(function(registration) {
          // Registration was successful
          console.log('ServiceWorker registration successful with scope: ', registration.scope);
        }, function(err) {
          // registration failed :(
          console.log('ServiceWorker registration failed: ', err);
        });
      });
    }

    let deferredPrompt;
    var div = document.querySelector('.add-to');
    var button = document.querySelector('.add-to-btn');
    div.style.display = 'block';

    window.addEventListener('beforeinstallprompt', (e) => 
    {
      

        e.preventDefault();
    
        deferredPrompt = e;
        div.style.display = 'block';
  
        button.addEventListener('click', (e) => 
        { 
         
       
            div.style.display = 'none';
       
            deferredPrompt.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>
  

В отдельном файле для service worker у меня размещен прослушиватель событий (sw.js , код.ниже)

 self.addEventListener('fetch', function(event) {});
  

Возможно, я подхожу к этому совершенно неправильно. Приветствуются любые идеи или альтернативы, чтобы заставить это работать как на мобильном, так и на рабочем столе