72 lines
1.9 KiB
TypeScript
72 lines
1.9 KiB
TypeScript
import { json, LoaderFunctionArgs } from "@remix-run/node"
|
|
import {
|
|
Links,
|
|
Meta,
|
|
Outlet,
|
|
Scripts,
|
|
ScrollRestoration,
|
|
useLoaderData,
|
|
} from "@remix-run/react"
|
|
import React, { useEffect } from "react"
|
|
import UAParser from "ua-parser-js"
|
|
import versionAtLeast from "semver/functions/gte"
|
|
import coerceSemver from "semver/functions/coerce"
|
|
// import { LandingMessage } from "./root.client"
|
|
|
|
|
|
export function Layout({ children }: { children: React.ReactNode }) {
|
|
return (
|
|
<html lang="en">
|
|
<head>
|
|
<meta charSet="utf-8" />
|
|
<meta
|
|
name="viewport"
|
|
content="width=device-width, initial-scale=1"
|
|
/>
|
|
<Meta />
|
|
<Links />
|
|
</head>
|
|
<body>
|
|
{children}
|
|
<ScrollRestoration />
|
|
<Scripts />
|
|
</body>
|
|
</html>
|
|
)
|
|
}
|
|
|
|
export const loader = async ({ request }: LoaderFunctionArgs) => {
|
|
const userAgent = request.headers.get("user-agent")
|
|
const os = new UAParser(userAgent ?? "").getOS()
|
|
const isSupported =
|
|
os.name !== "iOS" ||
|
|
versionAtLeast(coerceSemver(os.version) ?? "0.0.0", "16.4.0")
|
|
|
|
return json({ isSupported })
|
|
}
|
|
|
|
export default function App() {
|
|
const { isSupported } = useLoaderData<typeof loader>()
|
|
|
|
return <><Outlet/><LandingMessage isSupported={isSupported}/></>
|
|
|
|
}
|
|
|
|
function LandingMessage({ isSupported }: { isSupported: boolean }) {
|
|
|
|
useEffect(() => {
|
|
console.log("WTF")
|
|
}, [])
|
|
|
|
if (typeof window === "undefined") return <div>WHY</div>
|
|
|
|
const isRunningPWA = "standalone" in navigator && navigator.standalone || matchMedia("(dislay-mode: standalone)").matches
|
|
const message = isRunningPWA
|
|
? "Enable notifications"
|
|
: isSupported
|
|
? "Install Tack Up Now!"
|
|
: "Sorry, your device doesn't support Tack Up Now! :("
|
|
|
|
return <div>{message}</div>
|
|
}
|