Only show "Add to home screen" for PWA on desktop devices

Question

We have a progressive web app that we've enabled via the workbox-webpack-plugin and a simple manifest.json at the root of our site that is registered via navigator.serviceWorker.register('/service-worker.js') on page load.

We only want installation of the PWA to be enabled on desktop devices and not on mobile (Android/iOS) since we prefer users install our native mobile application. In Chrome on Android, this looks like a banner at the bottom of the page that says "Add to home screen". We still want the service worker to run on mobile devices since it performs caching of assets.

Is there a way to register the service worker in mobile browsers but not have the PWA be installable?

Answer 1

I think we figured this out; we already had a beforeinstallprompt listener that we were using to show our own install banner on desktop. In that, we call e.preventDefault() to prevent the native notification from showing up. But we skipped installing this event listener altogether on mobile since we didn't want to show our install banner.

So, the solution is something like this...

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

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


window.addEventListener('beforeinstallprompt', beforeInstallPromptListener);

It's important to note that the user can still install the PWA from the overflow menu on Chrome. This is acceptable for us, though, since it's more intentional and will be less confusing to our users.