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.
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.
- Eruda - a mobile console you can use while debugging especially helpful in in-app testing
- Detect Inapp - In-app detection
- Bowser - Platform detection
You can exit web views on Android devices 🎉.
<!-- 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>
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";
iOS does not have a good solution for exiting in-app browsers.
<!-- 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 email@example.com for support</p>
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://";