Tell iOS users they have to install through Safari because apple or something

app/routes/_index.tsx

@@ -19,27 +19,39 @@ export const meta: MetaFunction = () => {
 
 export const loader = async ({ request }: LoaderFunctionArgs) => {
   const userAgent = request.headers.get("user-agent")
-  const os = new UAParser(userAgent ?? "").getOS()
+  const parsedUserAgent = new UAParser(userAgent ?? "")
+  const os = parsedUserAgent.getOS()
+  const isNonSafari = parsedUserAgent.getBrowser().name !== "Mobile Safari"
+  const browser = parsedUserAgent.getBrowser().name
   const isSupported =
     os.name !== "iOS" ||
     versionAtLeast(coerceSemver(os.version) ?? "0.0.0", "16.4.0")
 
-  return json({ isSupported })
+  console.log("Wut", isNonSafari)
+
+  return json({ isSupported, isNonSafari, browser })
 }
 
 export default function Index() {
-  const { isSupported } = useLoaderData<typeof loader>()
+  const { isSupported, isNonSafari, browser } = useLoaderData<typeof loader>()
 
   return (
     <div style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.8" }}>
       <Suspense>
-        <LandingMessage isSupported={isSupported} />
+        <LandingMessage isSupported={isSupported} isNonSafari={isNonSafari} />
+        {browser}
       </Suspense>
     </div>
   )
 }
 
-function LandingMessage({ isSupported }: { isSupported: boolean }) {
+function LandingMessage({
+  isSupported,
+  isNonSafari,
+}: {
+  isSupported: boolean
+  isNonSafari: boolean
+}) {
   const isClient = typeof window !== "undefined"
   const notificationsEnabled =
     isClient &&
@@ -62,6 +74,8 @@ function LandingMessage({ isSupported }: { isSupported: boolean }) {
     <div>Loading</div>
   ) : isInstalled ? (
     <div>Your Notifications</div>
+  ) : isNonSafari ? (
+    <div>Safari</div>
   ) : isRunningPWA && !notificationsEnabled ? (
     <EnableButton onSubscribe={() => setIsInstalled(true)} />
   ) : isSupported ? (
@@ -75,7 +89,6 @@ function EnableButton({ onSubscribe }: { onSubscribe: () => void }) {
   const { subscribeToPush, requestPermission, canSendPush } = usePush()
 
   function subscribe() {
-    console.log("Hey the thing was clicked wow")
     requestPermission()
   }
 

e2e/install.spec.ts

@@ -18,6 +18,23 @@ describe("when user is on iOS", () => {
         "Mozilla/5.0 (iPhone; CPU iPhone OS 16_4 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.6 Mobile/15E148 Safari/604.1",
     })
 
+    describe("and the browser is not safari", () => {
+      use({
+        userAgent:
+          "Mozilla/5.0 (iPhone; U; CPU iPhone OS 5_1_1 like Mac OS X; en-gb) AppleWebKit/534.46.0 (KHTML, like Gecko) CriOS/19.0.1084.60 Mobile/9B206 Safari/7534.48.3",
+      })
+
+      test("the user is told they need to install through Safari, because reasons, I guess", async ({
+        page,
+      }) => {
+        await page.goto("/")
+
+        const installText = await page.getByText(/Safari/)
+
+        await expect(installText).toBeAttached()
+      })
+    })
+
     test("and tack up now is not running as a PWA, they are instructed to install tack up now", async ({
       page,
     }) => {