DEV Community

Cover image for Solving the In-App Escape Room
Shalanah Dawson
Shalanah Dawson

Posted on • Updated on

Solving the In-App Escape Room

Photo by Obi Onyeador


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

Finally, at long last, it dawned on me. Every complaint was coming from a user visiting my website from an in-app browser. They'd followed a link from Facebook, Instagram, or TikTok and didn't have the full set of features my website offered.

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

In-app Browsers / Web Views

Facebook, Instagram, TikTok, Gmail, Twitter, 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. However, 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 Packages

  • Eruda - a mobile console you can use while debugging especially helpful in in-app testing
  • InAppSpy - In-app detection package
  • 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 -->
  Open Browser
Enter fullscreen mode Exit fullscreen mode

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:;end";
Enter fullscreen mode Exit fullscreen mode

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 -->
<p>This browser isn't friendly.</p>
<h2>Steps to use</h2>
  <ol>Open your favorite browser like Safari</ol>
  <ol>Paste in or search for "Example"</ol>
<p>Contact for support</p>
Enter fullscreen mode Exit fullscreen mode

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://" // https
"googlechrome://" // http

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

// Firefox 

// And there are more for Opera and Yandex etc
// See:
Enter fullscreen mode Exit fullscreen mode

Resources + Links

Top comments (0)