"Add to Homescreen" for Chrome iOS

Question

Add to Homescreen works just fine on Safari for iOS and Chrome for Android.

Saw this answer while searching before posting the question. I was wondering if anyone knows if there's been any update to this?

If it's not as simple as adding another meta tag, can someone point me in the direction of forcing this or completely removing the Url and Nav bars on Chrome?

I'd prefer to be able to save the Web App to the homescreen, of course, but am open to suggestion.

Thanks in advance!

Answer 1

Guess what? You can do this now!

Here's what I use to give different instructions based on the browser:

    const is_iOS = (/iPad|iPhone|iPod/.test(navigator.platform)) ? true :
        (navigator.maxTouchPoints &&
            navigator.maxTouchPoints > 2 &&
            /MacIntel/.test(navigator.platform)) ? true : // this is an new iPad Pro
            false

    // from the web; best thing I could find; will probably fail sometimes, but
    // as of 11/22/21 it is true for Safari and false for Chrome/Firefox/Opera
    //
    const is_Safari = /Version.+Safari/.test(navigator.userAgent)

    const is_Chrome_on_iOS = (/CriOS/i.test(navigator.userAgent) && is_iOS)

    if (is_iOS) {  // display instructions on how to add to home screen for iOS users

        const iOS_install_info = (is_Safari) ?

`Tap the square with an arrow pointing upward (the Share icon) at the bottom of the screen. Swipe up till you see 'Add to Home Screen' near the bottom of the list. You'll need to close this alert box first.

[If you don't see the 'Add to Home Screen', scroll to the bottom and tap Edit Actions, then tap Add next to the 'Add to Home Screen' action. Now you'll be able to select it as described.]

Apple is making you do this manually to protect their App Store profits!`

: is_Chrome_on_iOS ?

`Tap the square with an arrow pointing upward (the Share icon) at the top right of the screen. Swipe up till you see 'Add to Home Screen' about five items from the bottom of the list.
You'll need to close this alert box first, so you got it?

Apple is making you do this manually to protect their App Store profits!`

: // other browsers...

Congratulations on being in the 0.5%! ...of iOS folks who use a browser other than Safari or Chrome. I think many of you will be able to find an 'Add to Home Screen' button if you poke around a bit. It's usually under the browser's Share menu, which often has an icon of a box with an arrow pointing up out of it. Good luck.

            setTimeout(() => {
                alert(iOS_install_info)
        }, 500)
    }

Does anyone know if other browsers can do this now, too?

EDIT: I just tested Firefox, and it works, too. Takes one more tap.

Does anyone know if it's possible for me to put multi-line string literals in my code sample without the backticks breaking us back to the main post body?