Opening of your website in the viewer’s external browser automatically instead of Instagram’s in-app browser (on Android devices).
In Instagram’s in-app browser, users can’t bookmark websites and olso they can’t use the “Add to Home Screen” feature which it is very popular these days for PWA. If you’ve been searching for this problem, you’ve probably realized that it’s not possible.
But That’s POSSIBLE! Just with a little hack!
In fact, you must cheat the Instagram’s in-app browser. But how?
The weakness point of Instagram’s in-app browser is file downloading. When you ask it to download a file, it invokes an external browser and this is our golden key. We get help from an API in this scenario that we call it DummyBytes
mywebsite.com
Check in this website (mywebsite.com) which browser has your customer come to your website with. For checking it, read the “user agent” of the browser.
When mywebsite.com is opened with Instagram’s in-app browser, the value of “navigator.userAgent” will be something like this:
Mozilla/5.0 (Linux; Android 6.0.1; SM-J700F Build/MMB29K; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/74.0.3729.112 Mobile Safari/537.36 Instagram 110.0.0.16.119 Android (23/6.0.1; 320dpi; 720x1280; samsung; SM-J700F; j7elte; samsungexynos7580; en_US; 171727780)
As you can see, there is word of “Instagram” in above string and it’s means the browser of viewer is Instagram’s in-app browser. if browser of viewer is the Instagram’s in-app browser, redirect the viewer to the DummyBytes API, otherwise, do nothing. Your viewer has come with external browsers like Chrome, Firefox and …
In other words:
<script>
if(navigator.userAgent.includes("Instagram")){
window.location.href = "https://mywebsite.com/DummyBytes";
}
</script>With the include() method of string object of JavaScript, you can check for the existing of the word of “Instagram” in that string. Put the JavaScript snippet after the <body> tag immediately.
How to implement the DummyBytes API?
This API returns a different response based on the viewer’s browser. If the viewer’s browser is Instagram’s in-app browser, it will return some dummy bytes as a file, otherwise it will return a response that redirects the viewer’s browser to your main website (mywebsite.com)
You can clone complete source in Github
PHP:
ASP.NET Web API:
If you use another backend language, you can do it easily like the previous sample codes.
According to the scenario (picture), In normal operation, for the first time, it is the Instagram’s in-app browser that requests to DummyBytes that in turn, returns file.
In fact, Arrows #1,#2 and #3 is the first request by Instagram’s in-app browser which it leads to a file response eventually.
The Instagram’s in-app browser can’t download the file. Therefore invokes the external browser for doing that, and pass the “https://mywebsite.com/DummyBytes” URL (DummyBytes API) to the external browser.
This was our main goal. Opening external browser! and we succeeded!
But, there is one final step. the external browser requests DummyBytes API. because the requester is not the Instagram’s in-app browser, the DummyBytes API returns a response with a redirection and your request redirects to mywebsite.com
Common Questions
1: It works in Android but doesn’t in IOS.
Unfortunately it doesn’t work on the IOS. it works only on android devices. I tried to find a way but due to the IOS’s limitations, the browser does not recognize the “file” concept and shows the bytes of the file in the browser.
All you can do is detect the client’s OS and if it was IOS, ask your client to use an external browser.
Connect with me on linkedin:
https://www.linkedin.com/in/sasan-salem/
😊