Photo by Obi Onyeador

Background

For awhile, a common complaint from the users of a website of mine was, "I cannot download an image from your site." This was concerning, since the whole point of the site is to download custom images. I would test, and test, and test, and was unable to recreate the issue on mobile browsers.

At long last, it dawned on me. Every complaint was coming from an in-app browser. Users followed a link from Facebook, Instagram, or TikTok and didn't have the full set of features my website offered - notably failing on download, breaking website functionality silently.

In that moment, I had two strong feelings: relief for finally replicating the issue and sadness for all the frustrated people were stuck unknowingly in in-app browsers.

In-app Browsers / Web Views

Facebook, Instagram, TikTok, and other mobile apps use in-app browsers to serve up website content inside of their apps. These companies use in-app browsers to keep users under their control and to provide the user with a smoother experience. These in-app browsers often do not have the same capabilities as standalone browsers. Additionally, most users aren't aware they are not in a normal browser.

For developers it can be a frustrating complication to overcome. Certain features that may work perfectly in Chrome or Safari or another mobile browser will not work at all in in-app web views.

If you find yourself in the unenviable position of your site not working in web views... I have a couple of tips. Hopefully they make a difference for you when building or debugging.

Helpful Tools

• InAppSpy - In-app detection package
• InAppDebugger - Uses inapp-spy, a handy website for debugging downloads and escape links. Post this link instead of having to redeploy yours on Facebook, Instagram, etc so you can debug common in-app issues.
• Eruda - a mobile console you can use while debugging especially helpful in in-app testing
• Bowser - Platform detection

Exiting In-app Apps

Android 😊

You can exit web views on Android devices 🎉.

Default browser link

<!-- Android only href -->
<!-- - Opens link in default browser -->
<!-- - Gives user choice of browser if no default defined -->
<!-- - 🎉 Successfully exits from web view / in-app browser -->
<a 
  href="intent:https://example.com#Intent;end" 
  target="_blank">
  Open Browser
</a>

Automatically redirect with JS

For the smoothest result, redirect automatically to a user's default browser. Warning: Doesn't work across all in-app browsers and the user can deny the request -- but a great option in conjunction with serving up UI with the intent link.

window.location = "intent:https://example.com#Intent;end";

iOS 🤷‍♀️

iOS does not have a good solution for exiting in-app browsers. And every time there has been a way to open up a link in Safari directly, Apple has found a way to close it.

So, what are our options?

Serve up HTML How-To: Generic

<!-- Describe in plain HTML how to open browser and find site -->
<h1>Oooops!</h1>
<p>This browser isn't example.com friendly.</p>
<h2>Steps to use example.com</h2>
<ul>
  <ol>Open your favorite browser like Safari</ol>
  <ol>Paste in example.com or search for "Example"</ol>
</ul>
<p>Contact me@example.com for support</p>

Serve up HTML How-To: Targeted Apps

Some social media browsers have overflow UI that allow the user to open a website in the browser. You could target as many social media in-app browsers as you'd like and show a tooltip pointing towards the overflow menu and add how-to text.

With testing, this isn't a sustainable solution but is pretty good UX for the most popular social media apps.

Links to other browsers

You can try auto-redirecting or linking to other iOS browsers – a prompt will show up whether or not the app is installed or not. Warning: Some in-app browsers like TikTok will not respond in any way to redirection or links.

// Browser links
// Test your in-app ie: TikTok none of these links work but in Facebook the do

// Chrome
"googlechromes://example.com" // https
"googlechrome://example.com" // http

// Safari ❌
// Only known browser iPhones do have... doesn't have a link 🚩
"Safari://example.com" // ❌ doesn't work

// Firefox 
"firefox://open-url?url=https://example.com"

// And there are more for Opera and Yandex etc
// See: https://www.reddit.com/r/iOSProgramming/comments/tpuowz/comment/i2duh9u/?utm_source=share&utm_medium=web2x&context=3

Resources + Links

• Github Inapp Debugger
• Github Url Schemes (iOS)
• Reddit: Figured out Safari url scheme
• SO: How to open mobile chrome browser with javascript or html
• SO: How to open to an existing tab in safari with an html 'a' link
• SO: How can I check if an app is installed from a web-page on an iPhone
• SO: Open Mobile Safari from a Link in a WebView