Add service worker, add minimal instructions for enabling notifications

app/entry.worker.ts

@@ -0,0 +1,17 @@
+/// <reference lib="WebWorker" />
+
+export {};
+
+declare let self: ServiceWorkerGlobalScope;
+
+self.addEventListener('install', event => {
+  console.log('Service worker installed');
+
+  event.waitUntil(self.skipWaiting());
+});
+
+self.addEventListener('activate', event => {
+  console.log('Service worker activated');
+
+  event.waitUntil(self.clients.claim());
+});

app/root.tsx

@@ -1,18 +1,11 @@
-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"
-
+import React from "react"
 
 export function Layout({ children }: { children: React.ReactNode }) {
     return (
@@ -35,37 +28,6 @@ export function Layout({ children }: { children: React.ReactNode }) {
     )
 }
 
-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>
+    return <Outlet/>
 }

app/routes/_index.tsx

@@ -1,5 +1,9 @@
-import type { MetaFunction } from "@remix-run/node";
-import React from "react";
+import { json, type LoaderFunctionArgs, type MetaFunction } from "@remix-run/node";
+import { useLoaderData } from "@remix-run/react";
+import React, { Suspense, useEffect } from "react";
+import UAParser from "ua-parser-js"
+import versionAtLeast from "semver/functions/gte"
+import coerceSemver from "semver/functions/coerce"
 
 export const meta: MetaFunction = () => {
   return [
@@ -8,11 +12,41 @@ export const meta: MetaFunction = () => {
   ];
 };
 
+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 Index() {
+  
+  const { isSupported } = useLoaderData<typeof loader>()
+
   return (
     <div style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.8" }}>
-      <h1>WHOAH!  A WEBSITE</h1>
-      <div>Hey check it out!</div>
+      <Suspense>
+      <LandingMessage isSupported={isSupported}/>
+      </Suspense>
     </div>
   );
 }
+
+
+function LandingMessage({ isSupported }: { isSupported: boolean }) {
+
+  if (typeof window === "undefined") return <div>Loading</div>
+
+  const isRunningPWA = ("standalone" in navigator && navigator.standalone as boolean) || matchMedia("(dislay-mode: standalone)").matches
+  const notificationsEnabled = "Notification" in window && window.Notification.permission === "granted"
+  const message = isRunningPWA && !notificationsEnabled
+      ? "Enable notifications"
+      : isSupported
+      ? "Install Tack Up Now!"
+      : "Sorry, your device doesn't support Tack Up Now! :("
+
+  return <div><div>{message}</div></div>
+}

e2e/install.spec.ts

@@ -31,6 +31,7 @@ describe("when user is on iOS", () => {
             })
 
             test("and notifications aren't enabled, they are asked to enable notifications", async ({ page, browser }) => {
+                await page.addInitScript(() => (Object.defineProperty(window.Notification, "permission", {value: "default", writable: true })))
                 await page.goto("/")
                 
                 const notificationText = await page.getByText(/Enable notifications/)
@@ -38,26 +39,24 @@ describe("when user is on iOS", () => {
                 await expect(notificationText).toBeAttached()
             })
 
-            // describe("and notifications are enabled", () => {
+            describe("and notifications are enabled", () => {
                 
-            //     beforeEach(async ({ page }) => {
-            //         await page.addInitScript(() => (window.persmis))
-            //     })
+                beforeEach(async ({ page }) => {
+                    await page.addInitScript(() => {
+                        window.Notification = window.Notification ?? {}
+                        Object.defineProperty(window.Notification, "permission", {value: "granted", writable: true })
+                    })
+                })
 
-            //     test("they aren't asked to enable notifications", async ({ browser }) => {
+                test("they aren't asked to enable notifications", async ({ page }) => {
+                    await page.goto("/")
+                    await page.evaluate(async () => await navigator.serviceWorker.ready)
 
-            //         const context = await browser.newContext({
-            //             permissions: ['notification'],
-            //           });
-
-            //         const page = await context.newPage()
-            //         await page.goto("/")
-                
-            //         const notificationText = await page.getByText(/Enable notifications/)
+                    const notificationText = await page.getByText(/Enable notifications/)
     
-            //         await expect(notificationText).not.toBeAttached()
-            //     })
-            // })
+                    await expect(notificationText).not.toBeAttached()
+                })
+            })
         })
     })
 
@@ -69,7 +68,7 @@ describe("when user is on iOS", () => {
         test("version 16.3 and under they are informed that their iOS version isn't supported", async ({ page }) => {
             await page.goto("/")
 
-            const sorryText = await page.getByText("Sorry, your device doesn't support Tack Up Now! :(")
+            const sorryText = await page.getByText(/Sorry/)
 
             await expect(sorryText).toBeVisible()
         })

package.json

@@ -13,6 +13,7 @@
     "test": "jest --config=jest.config.ts"
   },
   "dependencies": {
+    "@remix-pwa/worker-runtime": "^2.1.4",
     "@remix-run/express": "^2.9.1",
     "@remix-run/node": "^2.9.0",
     "@remix-run/react": "^2.9.0",
@@ -34,6 +35,7 @@
     "@babel/preset-react": "^7.24.1",
     "@babel/preset-typescript": "^7.24.1",
     "@playwright/test": "^1.44.1",
+    "@remix-pwa/dev": "^3.1.0",
     "@remix-run/dev": "^2.9.0",
     "@remix-run/testing": "^2.9.1",
     "@swc/core": "^1.5.7",

server.ts

@@ -11,6 +11,9 @@ app.get("/api", (req, res) => res.send("HI"))
 // and your app is "just a request handler"
 app.all("*", createRequestHandler({ build }))
 
+import { register } from "register-service-worker";
+
+register(`/service-worker.js`)
 
 app.listen(3000, () => {
   console.log("App listening on http://localhost:3000")

vite.config.ts

@@ -1,10 +1,15 @@
-import { vitePlugin as remix } from "@remix-run/dev";
-import { installGlobals } from "@remix-run/node";
-import { defineConfig } from "vite";
-import tsconfigPaths from "vite-tsconfig-paths";
+import { vitePlugin as remix } from "@remix-run/dev"
+import { installGlobals } from "@remix-run/node"
+import { defineConfig } from "vite"
+import tsconfigPaths from "vite-tsconfig-paths"
+import { remixPWA } from '@remix-pwa/dev'
 
-installGlobals();
+installGlobals()
 
 export default defineConfig({
-  plugins: [remix(), tsconfigPaths()],
-});
+    plugins: [
+        remix(),
+        tsconfigPaths(),
+        remixPWA()
+    ],
+})