Detect standalone mode in Safari iOS

Question

My goal is to add a A2HS (Add To Home Screen) banner to our site but not present it if a user is actively in the PWA. I've seen lots of people around the Internet talk about window.navigator.standalone but it simply does not work for me. I've added it to my if statement as such:

if( isIos() && window.navigator.standalone ){
  //don't show Add To Home Screen banner
} else {
  //show Add To Home Screen banner
}

And it makes sense that this doesn't work because when I type window.navigator.standalone in the console of Chrome, it says it's undefined because it simply doesn't exist. That said, does anyone have a solution on how to detect if a user is IN standalone mode on mobile Safari? Thanks in advance!

Answer 1

After testing on an iPhone XS running iOS 13.3.1, it appears that standalone is available in two places:

window.navigator.standalone
window.clientInformation.standalone

I just checked now on a PWA called 'airhorner' on an iPhone, and both standalones are set to true.

Here's what the WebInspector shows for the 'airhorner' PWA in standalone mode:

Here's what webInspector shows for iOS Safari displaying google.com: