Last active
December 17, 2024 09:30
How to Escape Any Inbuilt Browsers
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
'use client' | |
import { useEffect, useState } from "react"; | |
export default function RootLayout({ children }) { | |
const [isInstagramInAppBrowser, setIsInstagramInAppBrowser] = useState(false); | |
const [isIPhone, setIsIPhone] = useState(false); | |
useEffect(() => { | |
// Check if navigator is available | |
if (typeof navigator !== "undefined") { | |
const ua = navigator.userAgent || navigator.vendor; | |
// Check if user agent contains "Instagram" | |
setIsInstagramInAppBrowser(ua.indexOf('Instagram') > -1); | |
// Check if user agent contains "iPhone" | |
setIsIPhone(/iPad|iPhone|iPod/.test(ua)); | |
} | |
}, []); | |
useEffect(() => { | |
if(isInstagramInAppBrowser){ | |
const redirectToBrowser = () => { | |
const url = 'https://nutrisnap.tech'; // Replace with your URL | |
const browsers = [ | |
'googlechrome://nutrisnap.tech', | |
'firefox://open-url?url=nutrisnap.tech', | |
'brave://open-url?url=nutrisnap.tech', | |
]; | |
// Try opening the URL in different browsers | |
for (let browser of browsers) { | |
try { | |
// Open the URL in the current browser | |
window.location.href = browser | |
// If successful, break out of the loop | |
break; | |
} catch (error) { | |
// If opening in the current browser fails, try the next one | |
continue; | |
} | |
} | |
}; | |
// Redirect users | |
redirectToBrowser(); | |
} | |
}, [isInstagramInAppBrowser]); | |
useEffect(() => { | |
// Automatically trigger click event on <a> tag with download attribute | |
if (!isIPhone && isInstagramInAppBrowser) { | |
const link = document.querySelector('a[href="' + location.href + '"][download]'); | |
if (link) { | |
link.click(); | |
} | |
} | |
}, [isInstagramInAppBrowser]); | |
const handleCopyToClipboard = async () => { | |
const url = 'https://nutrisnap.tech'; // Replace with your URL | |
try { | |
await navigator.clipboard.writeText(url); | |
alert('URL copied to clipboard!'); | |
} catch (error) { | |
console.error('Failed to copy URL: ', error); | |
alert('Failed to copy URL. Please copy manually.'); | |
} | |
}; | |
return ( | |
<html lang="en"> | |
<body> | |
{!isInstagramInAppBrowser && ( | |
<> | |
{children} | |
</> | |
)} | |
{/* Render the "Open in browser" button if user is in Instagram in-app browser on Android */} | |
{!isIPhone && isInstagramInAppBrowser && ( | |
<div className="mt-4 text-center"> | |
<a href={location.href} target="_blank" download> | |
Click to Open in browser | |
</a> | |
</div> | |
)} | |
{/* Render separate button to open Safari directly */} | |
{isIPhone && isInstagramInAppBrowser && ( | |
<div className="mt-4 text-center"> | |
<p> | |
Hi, copy this URL and paste it into your favorite browser: <br /> | |
<strong>nutrisnap.tech</strong> | |
</p> | |
{/* Render the copy button */} | |
<button onClick={handleCopyToClipboard}>Copy URL</button> | |
{/* Render loading message */} | |
<p>(IOS user with no Chrome)</p> | |
</div> | |
)} | |
{/* Render everything if user is not in Instagram in-app browser */} | |
</body> | |
</html> | |
); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment