Solving the In-App Escape Room
Tags: inapp, webview, webdev, javascript
Published: 2022-01-09 06:50:15

---
title: Solving the In-App Escape Room
published: true
description: 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.
tags: inapp, webview, webdev, javascript
cover_image: https://images.unsplash.com/photo-1606344728451-926a98d7252b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q=80
---

[Photo by Obi Onyeador](https://unsplash.com/photos/0HOGSrEwLrg)

# Background

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](https://github.com/liriliri/eruda) - a mobile console you can use while debugging especially helpful in in-app testing
- [InAppSpy](https://github.com/shalanah/inapp-spy) - In-app detection package
- [Bowser](https://github.com/lancedikson/bowser) - Platform detection 

# Exiting In-app Apps

## Android 😊

You can exit web views on Android devices 🎉.

### Default browser link

```html
<!-- 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.

```js
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

```html
<!-- 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.

```js
// 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](https://github.com/shalanah/inapp-debugger)
- [Github Url Schemes (iOS)](https://gist.github.com/felquis/a08ee196747f71689dcb)
- [Reddit: Figured out Safari url scheme](https://www.reddit.com/r/iOSProgramming/comments/tpuowz/figured_out_safari_url_scheme/)
- [SO: How to open mobile chrome browser with javascript or html](https://stackoverflow.com/questions/39602334/how-to-open-mobile-chrome-browser-with-javascript-or-html/70066226#70066226)
- [SO: How to open to an existing tab in safari with an html 'a' link](https://stackoverflow.com/questions/56508457/how-to-open-to-an-existing-tab-in-safari-with-an-html-a-link/58562894#58562894)
- [SO: How can I check if an app is installed from a web-page on an iPhone](https://stackoverflow.com/a/13196998/2824643)
- [SO: Open Mobile Safari from a Link in a WebView](https://stackoverflow.com/questions/10390479/open-mobile-safari-from-a-link-in-a-webview)