diff --git a/app/routes/_index.tsx b/app/routes/_index.tsx index feee22e..ce9112b 100644 --- a/app/routes/_index.tsx +++ b/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() + const { isSupported, isNonSafari, browser } = useLoaderData() return (
- + + {browser}
) } -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 }) {
Loading
) : isInstalled ? (
Your Notifications
+ ) : isNonSafari ? ( +
Safari
) : isRunningPWA && !notificationsEnabled ? ( 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() } diff --git a/e2e/install.spec.ts b/e2e/install.spec.ts index 05379cb..42ef9db 100644 --- a/e2e/install.spec.ts +++ b/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, }) => {