DEV Community 👩‍💻👨‍💻

Cover image for Stuck in Web View
Shalanah Dawson
Shalanah Dawson

Posted on • Updated on

Stuck in Web View

Photo by Obi Onyeador

Background

For awhile, a common complaint from the users of a popular 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 who were using social media phone apps to visit the website.

In-app Browsers / Web Views

Facebook, Instagram, TikTok, Gmail, Twitter, Google Search App 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 app 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
  • Detect Inapp - In-app detection
  • 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>
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. When I tested this worked in Facebook's in-app but not Tiktok's. Good to have the backup html from above as well.

window.location = "intent:https://example.com#Intent;end";
Enter fullscreen mode Exit fullscreen mode

iOS 🤷‍♀️

iOS does not have a good solution for exiting in-app browsers.

Serve up HTML How-To

<!-- 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>
Enter fullscreen mode Exit fullscreen mode

Auto-redirecting with Chrome

If the user has Chrome installed, you can try automatically redirecting.

// Chrome ✅
// - Asks for permission to open outside of app in Chrome
// - Also works in `href` but unsure if user has installed Chrome
window.location = "GoogleChrome://example.com";

// Safari ❌
// - I wish this worked, but it doesn't
window.location = "Safari://example.com";

// Firefox ❌
// - Redirects to Firefox (which is great)
// - Does not allow to add specific URL
window.location = "Firefox://";
Enter fullscreen mode Exit fullscreen mode

Resources + Links

StackOverflow

Top comments (0)

19 Valuable Github Repositories for Beginners

19 Valuable GitHub Repositories for beginner devs looking to take the first step into the web development career.