Link opened via instagram or facebook opens in their in-app browser but some of the feature of my website not work in-app browser. How i can open this in mobile system browser.

I tried doing below but doesn't work.

window.open("", "_system")

Link opened via instagram or facebook opens in their in-app browser but some of the feature of my website not work in-app browser. How i can open this in mobile system browser.

I tried doing below but doesn't work.

window.open("https://google.com", "_system")

Please help. I want something like below

• javascript
• hyperlink

• try changing default browser to browser you like in phone settings and try – Phil Commented Aug 12, 2023 at 10:13
• @Phil I tried but instagram still opens in in-app browser only. – Sanjay Gupta Commented Aug 12, 2023 at 10:16
• try this stackoverflow.com/questions/53217071/… – Phil Commented Aug 12, 2023 at 10:25
• stackoverflow.com/questions/53217071/… – Sanjay Gupta Commented Aug 16, 2023 at 4:23

3 Answers 3

In-app browsers also break a site of mine.

I'm still hoping for better more thoughtful work on Androids and iOS devices when it comes to in-app browsers detection and escaping. It's a huge issue.

Android

• Detect if android with something like Bowser https://github.com/bowser-js/bowser
• Detect if in-app with https://github.com/shalanah/inapp-spy
• Try auto-redirecting on detected android in-app browsers with intent link (don't do on all browsers or you'll get an infinite loop).
• PRO TIP: Add a query string on the intent link to avoid infinite loop if in-app detection has a false-positive

window.location = "intent://example.com#Intent;scheme=https;end";

• For the in-app browsers that don't allow for redirecting - which is a lot of them - serve up a button to open in their default browser

<a 
  href="intent://example.com#Intent;scheme=https;end" 
  target="_blank">
  Open Browser
</a>

iOS/iPadOS

• Detect if Apple product iPad or iPhone and version 17 and up with something like Bowser https://github.com/bowser-js/bowser
• Detect if in-app with https://github.com/shalanah/inapp-spy
• Show UI with Safari link (iOS 17+)

<a 
  href="x-safari-https://example.com" 
  target="_blank">
  Open Browser
</a>

• OR show UI with shortcuts error callback method (tested on 17-18.0 but no longer on iOS 18.1) This creates a shortcut that doesn't exist and falls back to a url in the user's default browser.

<a 
  href={`shortcuts://x-callback-url/run-shortcut?name=${crypto.randomUUID()}&x-error=${encodeURIComponent("https://example.com")}`}
  target="_blank">
  Open Browser
</a>

• I haven't tried auto-redirecting on iOS/iPadOS yet maybe that will work for you!
• For older OS versions serve up directions UI about opening default browser and navigating to your site.

NOTE: Something I wish we could detect is SFSafariViewController reliably, its downloading UX is absolutely terrible when compared to iOS Safari.

TESTING: You can use inappdebugger.com to test so you don't need to keep deploying your own site and can link in apps like FB, Instagram etc.

UPDATE: Updated Android intent link scheme, add iOS versions to shortcuts hack (no longer works in 18.1), edit text

UPDATE: I use inapp-spy now - a fork and refactor I made from detect-inapp - since detect-inapp is no longer maintained.

UPDATE: Add Shortcuts + Safari link (thanks for the suggestions!!!)

UPDATE: Add inappdebugger link

for ios:

x-safari-https://yourweb.com

window.location.href = 'x-safari-https://yourweb.com'

I get it from https://gist.github.com/felquis/a08ee196747f71689dcb

Thanks to @Shalanah,

I put them them all as code for you to copy, and also solved redirection loop in a case that if it can`t redirect

here is the code in gist https://gist.github.com/ParvinEyvazov/9fa4dfc5c0c08f1626faf7e0dcf8b2c3

or

/*
  This code is used to detect if the user is in an in-app browser (e.g., Instagram, LinkedIn, TikTok) and redirect to a mobile browser if they are.
  It uses the InAppSpy library to detect in-app browsers and the Bowser library to parse user agent strings.
  It then determines the phone type based on the OS and constructs the redirection URL based on the phone type.
  It also checks if the URL contains the 'redirected' parameter to prevent infinite redirect loop and removes the 'redirected' parameter from the URL.
  It then redirects to the mobile browser if the user is in an in-app browser.

  basicly:
    for android, go to:
        intent:${baseUrl}#Intent;scheme=https;package=com.android.chrome;end
    for ios, go to:
        x-safari-${baseUrl}
 */

// Import necessary dependencies
import { useState, useEffect, Suspense } from "react";
import InAppSpy from "inapp-spy"; // For detecting in-app browsers
import Bowser from "bowser"; // For parsing user agent strings

// ... (other imports)

export default function RootLayout() {
  // State variables for in-app browser detection and redirection
  const [userAgent, setUserAgent] = useState<string>("");
  const [parser, setParser] = useState<Bowser.Parser.Parser>();
  const [isInApp, setIsInApp] = useState<boolean>(false);
  const [phoneType, setPhoneType] = useState<"android" | "ios" | undefined>(
    undefined
  );
  const [hasRedirected, setHasRedirected] = useState<boolean>(false);
    
  // Detect if user is in an in-app browser (e.g., Instagram, LinkedIn, TikTok)
  useEffect(() => {
    // Use InAppSpy to detect in-app browser
    const { isInApp: isInAppFromSpy, appKey, appName, ua } = InAppSpy();
    setIsInApp(isInAppFromSpy);
    setUserAgent(ua);

    if (isInAppFromSpy) {
      // Parse user agent string using Bowser
      const parserFromBowser = Bowser.getParser(ua);
      setParser(parserFromBowser);

      // Determine phone type based on OS
      switch (parserFromBowser?.getOSName()) {
        case "Android":
          setPhoneType("android");
          break;
        case "iOS":
          setPhoneType("ios");
          break;
        default:
          setPhoneType(undefined);
      }
    }

    // Check if the URL contains the 'redirected' parameter to prevent infinite redirect loop
    const url = new URL(window.location.href);
    if (url.searchParams.get("redirected") === "true") {
      setHasRedirected(true);
      // Remove the 'redirected' parameter from the URL
      url.searchParams.delete("redirected");
      window.history.replaceState({}, "", url.toString());
    }
  }, []);

  // Redirect to mobile browser if user is in an in-app browser
  useEffect(() => {
    if (isInApp && phoneType && !hasRedirected) {
      const timer = setTimeout(() => {
        if (typeof window !== "undefined") {
          const baseUrl = window.location.origin;
          // Construct redirection URL based on phone type
          if (phoneType === "android") {
            window.location.href = `intent:${baseUrl}?redirected=true#Intent;scheme=https;package=com.android.chrome;end`; // open in chrome browser
           
            // open in default browser (most of the time it is not chrome, that is why open in chrome browser is preferred)
            // window.location.href = `intent:${baseUrl}?redirected=true#Intent;end`; // open in default browser
          } else if (phoneType === "ios") {
            window.location.href = `x-safari-${baseUrl}?redirected=true`; // open in safari browser

            // open in shortcuts app -> which will navigate to the default browser of the ios device (not recommended, because it is opening shortcuts app)
            // window.location.href =  `shortcuts://x-callback-url/run-shortcut?name=${crypto.randomUUID()}&x-error=${encodeURIComponent("https://example.com")}`
          }
        }
      }, 2000); // Delay redirection by 2 seconds

      // Clean up timer on component unmount
      return () => clearTimeout(timer);
    }
  }, [isInApp, phoneType, hasRedirected]);

  // ... (rest of the component code)

  return (
    // ... (JSX for component rendering)
  );
}