如何从 Instagram 应用内浏览器页面链接打开默认浏览器？

Question

Some pages in my site have a PWA install feature (that are not supported by instagram in-app browser). So when my visitor click in theses pages links I wanna open it in native browser, instead keeping navigation within Instagram in-app browser.

I tried the following:

$('.my-link').on('click', function(evt){
    if(navigator.userAgent.includes("Instagram")){
      evt.preventDefault();
      window.open($(this).attr('href'), '_blank');
      return false;
    }

    return true;
});  

The if condition matchs true, but the target pages remains opening in Instagram in-app browser. I have tried window.open($(this).attr('href'), '_system'); also, with no success.

Any clue?

Update 1

Tried to use URIs schemes to force browser opening, but unfortunately it doest seem to be a good solution. Safari doesnt have an URI scheme. Google Chrome does, but we cant garantee user has Chrome Browser in Android and we cant detect what browser user has.

$('a.new-window-if-instagram').on('click', function(evt){
    if(navigator.userAgent.includes("Instagram")){
      
      if (/android/i.test(navigator.userAgent)) {
        evt.preventDefault();

        var url = $(this).attr('href').replace("https://", "googlechromes://");
        url = url.replace("http://", "googlechrome://");
        window.open(url, '_blank');

        return false;
      }

      if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
        // Safari doest have URI scheme...
      }
    }

    return true;
}); 

Answer 1

I'm currently having the same issue, but at least I found a working solution for Android. I don't know if you are using PHP as your back-end language, but if other people find this, this might be useful:

<?php

$ua = strtolower($_SERVER['HTTP_USER_AGENT']);
if ((strpos($ua, 'mobile/') !== false) && (strpos($ua, 'safari/') == false)) // Validation code for iOS mobile
{
    // Show a message that ask user to open with default browser
}
else if (isset($_SERVER['HTTP_X_REQUESTED_WITH'])) // Validation code for Android mobile
{
    header('Content-type: application/pdf');
    header('Content-Transfer-Encoding: binary');
    header('Accept-Ranges: bytes');
}

This is a validation for iOS in-app browsers and Android in-app browsers.

For Android : We change the content type of the page to PDF. Since the in-app browser can't handle PDF files, it will open the page in a real browser (the default one defined in the user's settings). When the page will load again, the validation will fail since it's not an in-app browser again.

For iOS : Since we can validate the in-app browser in iOS but can't redirect the user automaticly, what I'm doing for the moment is showing a message that ask the user to open this page with his default browser (you can change the message with a switch case on the User-Agent since it's not the same step for every in-app browser)

If I ever find a working solution for iOS, I will update my answer.