在桌面上下载PWA,但不在移动设备上下载

时间:2020-08-25 10:06:26

标签: progressive-web-apps

早晨的朋友。

当前正在为我的应用程序构建PWA。我已经设法通过单击一个按钮将其安装在桌面上,但是在移动设备上似乎无法正常工作。我在Google上搜寻了一下,发现有人提到您无法在Mobile上使用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>

在用于服务人员的单独文件中,我放置了一个事件侦听器(sw.js,code.below)

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

我可能正在完全犯错。任何想法或替代方案都将受到欢迎,以使其在移动设备以及台式机上都能正常工作

0 个答案:

没有答案