How to detect if browser supports "Add to Homescreen" on iOS

Question

In iOS, Safari is the only browser with the "Add to Homescreen" feature. I want to show instructions to the user how to use this feature, but only if this feature exists. Is there a way to detect this feature?

Answer 1

You can use ClientJS to detect what browser and operating system the website is run on, and from there show instructions to install the PWA.

If you try it, you can also detect if the website is already running as a PWA or in the browser using the following code :

function isPWA() {
    if (
      this.client.isMobileIOS() &&
      'standalone' in window.navigator &&
      // @ts-ignore
      window.navigator.standalone
    )
      return true;

    if (
      this.client.isMobileAndroid() &&
      window.matchMedia('(display-mode: standalone)').matches
    )
      return true;

return false;
}