Chrome 仅在桌面设备上显示PWA的“添加到主屏幕”

baubqpgj  于 2023-05-20  发布在  Go
关注(0)|答案(1)|浏览(165)

我们有一个渐进式的Web应用程序,我们已经通过workbox-webpack-plugin和一个简单的manifest.json在我们的网站的根是通过navigator.serviceWorker.register('/service-worker.js')注册的页面加载。
我们只希望在桌面设备上启用PWA的安装,而在移动的(Android/iOS)上启用,因为我们更希望用户安装我们的本地移动应用程序。在Android上的Chrome中,这看起来像是页面底部的一条横幅,上面写着“添加到主屏幕”。我们仍然希望service worker在移动的设备上运行,因为它执行资产缓存。
有没有一种方法可以在移动的浏览器中注册service worker,但不能安装PWA?

vwoqyblh

vwoqyblh1#

我想我们搞清楚了我们已经有了一个beforeinstallprompt监听器,用来在桌面上显示我们自己的安装横幅。在这种情况下,我们调用e.preventDefault()来防止显示本机通知。但是我们跳过了在移动的上安装这个事件监听器,因为我们不想显示我们的安装横幅。
所以,解决办法是这样的...

const beforeInstallPromptListener = (e: BeforeInstallPromptEvent) => {
  e.preventDefault();

  if (!isMobileDevice) {
    // save event for tirggering later
  }
};

window.addEventListener('beforeinstallprompt', beforeInstallPromptListener);

需要注意的是,用户仍然可以从Chrome的溢出菜单中安装PWA。不过,这对我们来说是可以接受的,因为它更有目的性,对我们的用户来说不会那么困惑。

相关问题