Fix env injection

.dockerignore

@@ -1 +1,2 @@
 data/
+data-test/

.env.ci

@@ -0,0 +1,6 @@
+DATABASE="postgres"
+POSTGRES_PASSWORD="testpassword"
+POSTGRES_HOST="database"
+POSTGRES_PORT=5432
+VAPID_PRIVATE_KEY="privatekey"
+BASE_URL="http://localhost:5173"

.env.test

@@ -1,4 +1,6 @@
 DATABASE="postgres"
 POSTGRES_PASSWORD="testpassword"
+POSTGRES_HOST="localhost"
+POSTGRES_PORT=5434
 VAPID_PRIVATE_KEY="privatekey"
 BASE_URL="http://localhost:5173"

.gitea/workflows/test.yaml

@@ -5,6 +5,27 @@ on: [push]
 jobs:
   test:
     runs-on: ubuntu-latest
+    container: mcr.microsoft.com/playwright:v1.48.1-jammy
+    services:
+      database:
+        image: postgres:16
+        env:
+          POSTGRES_PASSWORD: testpassword
+          POSTGRES_USER: postgres
+          POSTGRES_DB: test
+        options: >-
+          --health-cmd pg_isready
+          --health-interval 10s
+          --health-timeout 5s
+          --health-retries 5
+        ports:
+          - 5434:5432
     steps:
       - uses: actions/checkout@v4
-      - run: npm install && npm run test && npx playwright install && npx playwright test
+      - name: Run Tests
+        env: NODE_OPTIONS=--max-old-space-size=8192
+        run: |
+          npm install
+          npm run ci
+          npm ci
+          npx playwright test

.gitignore

@@ -8,3 +8,4 @@ build/
 /playwright-report/
 /blob-report/
 /playwright/.cache/
+send-it.js

api/app.ts

@@ -8,7 +8,7 @@ app.use(express.json())
 
 app.get("/api", (req, res) => res.send("HI"))
 
-app.post("/api/subscription/", postSubscription)
+app.post("/api/subscription", postSubscription)
 app.put("/api/subscription/:id/", putSubscription)
 
 export default app

api/data/database.ts

@@ -16,6 +16,13 @@ const dialect = new PostgresDialect({
   }),
 })
 
-export const db = new Kysely<Database>({
+export let db = new Kysely<Database>({
   dialect,
 })
+
+export async function resetDbInstance() {
+  await db.destroy()
+  db = new Kysely<Database>({
+    dialect,
+  })
+}

api/data/settings.ts

@@ -1,7 +1,7 @@
 export default {
   database: process.env.DATABASE ?? "postgres",
-  host: "database",
+  host: process.env.POSTGRES_HOST ?? "database",
   user: "postgres",
   password: process.env.POSTGRES_PASSWORD,
-  port: 5432,
+  port: process.env.POSTGRES_PORT ?? 5432,
 }

api/data/subscription.test.ts

@@ -1,4 +1,4 @@
-import { db } from "./database"
+import { db, resetDbInstance } from "./database"
 import migrateToLatest, { resetAll } from "./migrate"
 import {
   createSubscription,
@@ -26,17 +26,29 @@ const pushSubscription2 = {
 }
 
 jest.mock("./settings", () => ({
-  port: 5434,
+  port: process.env.POSTGRES_PORT,
   user: "postgres",
   password: process.env.POSTGRES_PASSWORD,
   database: "test",
-  host: "localhost",
+  host: process.env.POSTGRES_HOST,
 }))
 
 describe("subscriptions", () => {
-  beforeEach(migrateToLatest)
+  beforeAll(async () => {
+    await resetDbInstance()
+  })
 
-  afterEach(resetAll)
+  beforeEach(async () => {
+    await migrateToLatest()
+  })
+
+  afterEach(async () => {
+    await resetAll()
+  })
+
+  afterAll(async () => {
+    await db.destroy()
+  })
 
   test("createSubscription", async () => {
     const { id } = await createSubscription(pushSubscription1)

api/subscriptionEndpoints.test.ts

@@ -21,6 +21,10 @@ describe("/api/subscription", () => {
     mockedCreateSubscription.mockImplementation((subscription) =>
       Promise.resolve({ id: 40, subscription })
     )
+
+    mockedUpdateSubscription.mockImplementation((subscription, id) =>
+      Promise.resolve({ id, subscription })
+    )
   })
 
   test("POST", async () => {

api/subscriptionEndpoints/postSubscription.ts

@@ -5,8 +5,6 @@ import { createSubscription } from "../data/subscription"
 export async function postSubscription(req: Request, res: Response) {
   const subscriptionBody = req.body
 
-  console.log("Posted subscription", subscriptionBody)
-
   const { id: subscriptionId } = await createSubscription(subscriptionBody)
 
   res.status(200).send({ subscriptionId })

app/install/EnableNotifications.tsx

@@ -1,9 +1,8 @@
-import React, { useState } from "react"
+import React from "react"
 import { useEffect } from "react"
 import { usePush } from "../usePush"
-import { request } from "http"
-import urlB64ToUint8Array from "../../b64ToUInt8"
 import pushPublicKey from "../../pushPublicKey"
+import urlB64ToUint8Array from "../../b64ToUInt8"
 
 export default function EnableNotifications({
   onSubscribe,
@@ -25,9 +24,6 @@ export default function EnableNotifications({
 function EnableButton({ onSubscribe }: { onSubscribe: () => void }) {
   const { subscribeToPush, requestPermission, canSendPush } = usePush()
 
-  const [error, setError] = useState<Error>()
-  const [log, setLog] = useState<string[]>([])
-
   function subscribe() {
     requestPermission()
   }
@@ -35,45 +31,19 @@ function EnableButton({ onSubscribe }: { onSubscribe: () => void }) {
   useEffect(() => {
     if (!canSendPush) return
 
-    setLog((prev) => [...prev, "Subscribing to push notifications"])
-
     subscribeToPush(
       urlB64ToUint8Array(pushPublicKey) as any,
-      (subscription) => {
+      async (subscription) => {
-        setLog((prev) => [
+        await navigator.serviceWorker.ready.then((registration) => {
-          ...prev,
+          registration.active?.postMessage({
-          `controller is undefined? ${navigator.serviceWorker.controller === undefined}`,
+            type: "subscribed",
-        ])
+            subscription: subscription.toJSON(),
-        setLog((prev) => [
-          ...prev,
-          `subscriptions: ${JSON.stringify(subscription.toJSON())}`,
-        ])
-        try {
-          navigator.serviceWorker.ready.then((registration) => {
-            registration.active?.postMessage({
-              type: "subscribed",
-              subscription: subscription.toJSON(),
-            })
-            setLog((prev) => [...prev, "After post message"])
           })
-          // onSubscribe()
+        })
-        } catch (error) {
+        onSubscribe()
-          setError(error as Error)
-        }
-      },
-      (error) => {
-        setError(error)
       }
     )
   }, [canSendPush])
 
-  return (
+  return <button onClick={subscribe}>Enable Notifications</button>
-    <>
-      <button onClick={subscribe}>Enable Notifications</button>
-      <div>{error?.toString()}</div>
-      {log.map((log, index) => (
-        <div key={index}>{log}</div>
-      ))}
-    </>
-  )
 }

app/routes/_index.tsx

@@ -93,33 +93,21 @@ function TackUpNow({
 
   const [isInstalled, setIsInstalled] = useState(installed)
 
-  const [messages, setMessages] = useState<any[]>([])
-
-  useEffect(() => {
-    navigator.serviceWorker.onmessage = (event) =>
-      setMessages((prev) => [...prev, JSON.stringify(event.data)])
-  }, [])
-
   return (
     <ClientOnly fallback={<div>Loading</div>}>
-      {() => (
+      {() =>
-        <>
+        isInstalled ? (
-          {messages.map((message, index) => (
+          <div>Your Notifications</div>
-            <div key={index}>{JSON.stringify(message)}</div>
+        ) : (
-          ))}
+          <InstallPrompts
-          {isInstalled ? (
+            isMobileSafari={isMobileSafari}
-            <div>Your Notifications</div>
+            isSupported={isSupported}
-          ) : (
+            isIOS={isIOS}
-            <InstallPrompts
+            notificationsEnabled={false}
-              isMobileSafari={isMobileSafari}
+            onInstallComplete={() => setIsInstalled(true)}
-              isSupported={isSupported}
+          />
-              isIOS={isIOS}
+        )
-              notificationsEnabled={false}
+      }
-              onInstallComplete={() => setIsInstalled(true)}
-            />
-          )}
-        </>
-      )}
     </ClientOnly>
   )
 }

app/worker.test.ts

@@ -3,64 +3,167 @@ import "core-js/stable/structured-clone"
 import initWorker from "./worker"
 import Dexie, { EntityTable } from "dexie"
 
+function createSubscription(testToken = "HI") {
+  return {
+    toJSON: () => ({
+      subscription: testToken,
+    }),
+  }
+}
+
 const createSelf = () =>
   ({
     addEventListener: jest.fn(),
     skipWaiting: jest.fn(() => Promise.resolve()),
     registration: {
       pushManager: {
-        subscribe: jest.fn(() => Promise.resolve({ subscription: "HI" })),
+        subscribe: jest.fn(() => Promise.resolve(createSubscription())),
-        getSubscription: jest.fn(() => Promise.resolve({ subscription: "HI" })),
+        getSubscription: jest.fn(() => Promise.resolve(createSubscription())),
       },
+      showNotification: jest.fn(),
     },
     clients: {
       claim: jest.fn(() => Promise.resolve()),
+      openWindow: jest.fn(() => Promise.resolve()),
+      matchAll: jest.fn(() => Promise.resolve([])),
     },
   }) as unknown as ServiceWorkerGlobalScope
 
+let originalWindow: Window & typeof globalThis
+
 describe("service worker", () => {
   let self: ServiceWorkerGlobalScope
+  let controlledClients: Client[]
+  let uncontrolledClients: Client[]
 
   beforeEach(() => {
+    originalWindow = global.window
+    global.window = undefined as any
     indexedDB = new IDBFactory()
     self = createSelf()
-
+    controlledClients = []
-    // fetchMock.mockIf(/http:\/\/localhost\/api\/subscribe\/?/, (req) => {
+    uncontrolledClients = []
-    //   return Promise.resolve(
-    //     req.method === "POST"
-    //       ? {
-    //           body: JSON.stringify({ subscriptionId: 123 }),
-    //         }
-    //       : req.method === "PUT"
-    //         ? { init: { status: 200 } }
-    //         : { init: { status: 405 } }
-    //   )
-    // })
 
     fetchMock.mockResponse((req) => {
-      return Promise.resolve(
+      if (
+        req.url.replace(/https?:\/\/[a-zA-Z0-9\.]*/, "") ===
+          "/api/subscription/" &&
         req.method === "POST"
-          ? {
+      ) {
-              body: JSON.stringify({ subscriptionId: 123 }),
+        return Promise.resolve({
-            }
+          body: JSON.stringify({ subscriptionId: 123 }),
-          : req.method === "PUT"
+        })
-            ? { init: { status: 200 } }
+      } else if (
-            : { init: { status: 405 } }
+        req.url
-      )
+          .replace(/https?:\/\/[a-zA-Z0-9\.]*/, "")
+          .startsWith("/api/subscription/") &&
+        req.method === "PUT"
+      ) {
+        return Promise.resolve({ init: { status: 200 } })
+      }
+
+      return Promise.resolve({ init: { status: 500 } })
     })
   })
 
   afterEach(() => {
     jest.clearAllMocks()
+    global.window = originalWindow
   })
 
-  xtest("displays push notifications", () => {
+  test("displays push notifications", async () => {
     initWorker(self)
 
     const pushHandler = getHandler("push")
 
-    const pushEvent = createEvent({ data: "HI" })
+    const pushEvent = createPushEvent(
+      JSON.stringify({
+        title: "Test title",
+        body: "Test text",
+        icon: "Test icon",
+        badge: "Test badge",
+        destination: "tackupnow.com/hi",
+      })
+    )
     pushHandler(pushEvent)
+    await waitUntilCalls(pushEvent)
+
+    expect(self.registration.showNotification).toHaveBeenCalledWith(
+      "Test title",
+      {
+        body: "Test text",
+        icon: "Test icon",
+        badge: "Test badge",
+        data: { destination: "tackupnow.com/hi" },
+      }
+    )
+  })
+
+  describe("on notification click", () => {
+    test("the notification is closed", async () => {
+      initWorker(self)
+
+      const notificationHandler = getHandler("notificationclick")
+
+      const event = createNotificationEvent("tackupnow.com")
+      notificationHandler(event)
+      await waitUntilCalls(event)
+
+      expect(event.notification.close).toHaveBeenCalled()
+    })
+
+    test("opens tack up now if no clients match the destination", async () => {
+      initWorker(self)
+
+      const notificationHandler = getHandler("notificationclick")
+
+      const event = createNotificationEvent("tackupnow.com")
+      notificationHandler(event)
+      await waitUntilCalls(event)
+
+      expect(self.clients.openWindow).toHaveBeenCalledWith("tackupnow.com")
+    })
+
+    test("focuses first matching client", async () => {
+      addClient("https://tackupnow.com/place", "window", true)
+      const matchingClient = addClient(
+        "https://tackupnow.com/otherplace",
+        "window",
+        true
+      )
+      addClient("https://tackupnow.com/yetanotherotherplace", "window", true)
+
+      initWorker(self)
+
+      const notificationHandler = getHandler("notificationclick")
+
+      const event = createNotificationEvent("https://tackupnow.com/otherplace")
+      notificationHandler(event)
+      await waitUntilCalls(event)
+
+      expect(matchingClient.focus).toHaveBeenCalled()
+    })
+
+    test("focuses uncontrolled matching clients", async () => {
+      addClient("https://derpatious.world", "window", false)
+      addClient("https://tackupnow.com/1", "window", false)
+      const matchingClient = addClient(
+        "https://tackupnow.com/2",
+        "window",
+        false
+      )
+      addClient("https://tackupnow.com/controlled", "window", true)
+
+      initWorker(self)
+
+      const notificationHandler = getHandler("notificationclick")
+
+      const event = createNotificationEvent("https://tackupnow.com/2")
+      notificationHandler(event)
+      await waitUntilCalls(event)
+
+      expect(matchingClient.focus).toHaveBeenCalled()
+    })
   })
 
   test("claims on activate", async () => {
@@ -87,64 +190,175 @@ describe("service worker", () => {
     expect(self.skipWaiting).toHaveBeenCalled()
   })
 
-  test("puts push subscription if the subscription id is set", async () => {
+  describe("on subscription message", () => {
-    initWorker(self)
+    test("puts push subscription if the subscription id is set", async () => {
-    await setSavedSubscription(5000)
+      initWorker(self)
+      await setSavedSubscription(5000)
 
-    const changeHandler = getHandler("pushsubscriptionchange")
+      const messageHandler = getHandler("message")
 
-    const changeEvent = createEvent()
+      const messageEvent = createEvent({
-    changeHandler(changeEvent)
+        data: {
-    await waitUntilCalls(changeEvent)
+          subscription: { subscription: "YO" },
+          type: "subscribed",
+        },
+      })
+      messageHandler(messageEvent)
+      await waitUntilCalls(messageEvent)
 
-    expect(self.registration.pushManager.subscribe).toHaveBeenCalledWith({
+      expect(fetch).toHaveBeenCalledWith(
-      userVisibleOnly: true,
+        `${process.env.BASE_URL}/api/subscription/5000`,
-      applicationServerKey: expect.any(Uint8Array),
+        {
+          method: "PUT",
+          body: JSON.stringify({ subscription: "YO" }),
+          headers: {
+            "Content-Type": "application/json",
+          },
+        }
+      )
     })
 
-    expect(fetch).toHaveBeenCalledWith(
+    test("posts to subscriptions when there is no user set", async () => {
-      `${process.env.BASE_URL}/api/subscription/5000`,
+      initWorker(self)
-      {
-        method: "PUT",
-        body: JSON.stringify({ subscription: "HI" }),
-      }
-    )
-  })
 
-  test("posts to subscriptions when there is no user set", async () => {
+      const messageHandler = getHandler("message")
-    initWorker(self)
 
-    const changeHandler = getHandler("pushsubscriptionchange")
+      const messageEvent = createEvent({
+        data: {
+          subscription: { subscription: "YO" },
+          type: "subscribed",
+        },
+      })
+      messageHandler(messageEvent)
+      await waitUntilCalls(messageEvent)
 
-    const changeEvent = createEvent()
+      expect(fetch).toHaveBeenCalledWith(
-    changeHandler(changeEvent)
+        `${process.env.BASE_URL}/api/subscription/`,
-    await waitUntilCalls(changeEvent)
+        {
-
+          method: "POST",
-    expect(self.registration.pushManager.subscribe).toHaveBeenCalledWith({
+          body: JSON.stringify({ subscription: "YO" }),
-      userVisibleOnly: true,
+          headers: {
-      applicationServerKey: expect.any(Uint8Array),
+            "Content-Type": "application/json",
+          },
+        }
+      )
     })
 
-    expect(fetch).toHaveBeenCalledWith(
+    test("subscription id is saved on first subscription change", async () => {
-      `${process.env.BASE_URL}/api/subscription/`,
+      initWorker(self)
-      {
+
-        method: "POST",
+      const messageHandler = getHandler("message")
-        body: JSON.stringify({ subscription: "HI" }),
+
+      const messageEvent = createEvent({
+        data: {
+          subscription: { subscription: "YO" },
+          type: "subscribed",
+        },
+      })
+      messageHandler(messageEvent)
+      await waitUntilCalls(messageEvent)
+
+      expect(await getSavedSubscription()).toEqual({
+        id: 1,
+        subscriptionId: 123,
+      })
+    })
+  })
+
+  describe("on subscription change", () => {
+    test("puts push subscription if the subscription id is set", async () => {
+      initWorker(self)
+      await setSavedSubscription(5000)
+
+      const changeHandler = getHandler("pushsubscriptionchange")
+
+      const changeEvent = createEvent()
+      changeHandler(changeEvent)
+      await waitUntilCalls(changeEvent)
+
+      expect(self.registration.pushManager.subscribe).toHaveBeenCalledWith({
+        userVisibleOnly: true,
+        applicationServerKey: expect.any(Uint8Array),
+      })
+
+      expect(fetch).toHaveBeenCalledWith(
+        `${process.env.BASE_URL}/api/subscription/5000`,
+        {
+          method: "PUT",
+          body: JSON.stringify({ subscription: "HI" }),
+          headers: {
+            "Content-Type": "application/json",
+          },
+        }
+      )
+    })
+
+    test("posts to subscriptions when there is no user set", async () => {
+      initWorker(self)
+
+      const changeHandler = getHandler("pushsubscriptionchange")
+
+      const changeEvent = createEvent()
+      changeHandler(changeEvent)
+      await waitUntilCalls(changeEvent)
+
+      expect(self.registration.pushManager.subscribe).toHaveBeenCalledWith({
+        userVisibleOnly: true,
+        applicationServerKey: expect.any(Uint8Array),
+      })
+
+      expect(fetch).toHaveBeenCalledWith(
+        `${process.env.BASE_URL}/api/subscription/`,
+        {
+          method: "POST",
+          body: JSON.stringify({ subscription: "HI" }),
+          headers: {
+            "Content-Type": "application/json",
+          },
+        }
+      )
+    })
+
+    test("subscription id is saved on first subscription change", async () => {
+      initWorker(self)
+
+      const changeHandler = getHandler("pushsubscriptionchange")
+
+      const changeEvent = createEvent()
+      changeHandler(changeEvent)
+      await waitUntilCalls(changeEvent)
+
+      expect(await getSavedSubscription()).toEqual({
+        id: 1,
+        subscriptionId: 123,
+      })
+    })
+  })
+
+  function addClient(url: string, type: ClientTypes, controlled: boolean) {
+    const matchAllMock = self.clients.matchAll as jest.Mock
+
+    matchAllMock.mockImplementation(
+      (args: { type: string; includeUncontrolled?: boolean }) => {
+        const clientList = args.includeUncontrolled
+          ? [...uncontrolledClients, ...controlledClients]
+          : controlledClients
+        return clientList.filter((client) => client.type === args.type)
       }
     )
-  })
 
-  test("subscription id is saved on first subscription change", async () => {
+    const clientList = controlled ? controlledClients : uncontrolledClients
-    initWorker(self)
 
-    const changeHandler = getHandler("pushsubscriptionchange")
+    const client: WindowClient = {
+      url,
+      type,
+      focus: jest.fn(() => Promise.resolve(client)) as WindowClient["focus"],
+    } as WindowClient
 
-    const changeEvent = createEvent()
+    clientList.push(client)
-    changeHandler(changeEvent)
-    await waitUntilCalls(changeEvent)
 
-    expect(await getSavedSubscription()).toEqual({ id: 1, subscriptionId: 123 })
+    return client
-  })
+  }
 
   function getHandler(eventName: string) {
     expect(self.addEventListener).toHaveBeenCalledWith(
@@ -193,8 +407,19 @@ function createPushEvent(data: string) {
   return createEvent(pushFields)
 }
 
-function createMessageEvent(message: any) {
+function createNotificationEvent(destination: string): NotificationEvent & {
-  return createEvent({ data: message })
+  waitUntil: jest.Mock<void, Parameters<ExtendableEvent["waitUntil"]>>
+} {
+  return createEvent({
+    notification: {
+      close: jest.fn(),
+      data: {
+        destination,
+      },
+    },
+  }) as any as NotificationEvent & {
+    waitUntil: jest.Mock<void, Parameters<ExtendableEvent["waitUntil"]>>
+  }
 }
 
 function createEvent(properties?: object) {

app/worker.ts

@@ -16,72 +16,49 @@ export default function start(self: ServiceWorkerGlobalScope) {
     event.waitUntil(self.clients.claim())
   })
 
-  // self.addEventListener("push", function (event: PushEvent) {
+  self.addEventListener("push", function (event: PushEvent) {
-  //   console.log("[Service Worker] Push Received.")
+    const { title, body, badge, icon, destination } = event.data?.json()
-  //   console.log(`[Service Worker] Push had this data: "${event.data?.text()}"`)
 
-  //   const title = "Push Codelab"
+    event.waitUntil(
-  //   const options = {
+      self.registration.showNotification(title, {
-  //     body: "Yay it works.",
+        body,
-  //     icon: "images/icon.png",
+        badge,
-  //     badge: "images/badge.png",
+        icon,
-  //   }
+        data: { destination },
-
+      })
-  //   event.waitUntil(self.registration.showNotification(title, options))
-  // })
-
-  // self.addEventListener("notificationclick", function (event) {
-  //   console.log("[Service Worker] Notification click Received.")
-
-  //   event.notification.close()
-
-  //   event.waitUntil(
-  //     self.clients.openWindow("https://developers.google.com/web/")
-  //   )
-  // })
-
-  async function sendMessage(message: any) {
-    const clients = await self.clients.matchAll()
-
-    await Promise.all(
-      clients.map(async (client) => client.postMessage(message))
     )
-  }
+  })
+
+  self.addEventListener("notificationclick", function (event) {
+    event.notification.close()
+    const destination = event.notification.data.destination
+
+    event.waitUntil(
+      (async () => {
+        const clients = await self.clients.matchAll({
+          type: "window",
+          includeUncontrolled: true,
+        })
+
+        const existingClient = clients.find(
+          (client) => client.url === event.notification.data.destination
+        )
+
+        if (existingClient === undefined) {
+          await self.clients.openWindow(destination)
+        } else {
+          await existingClient.focus()
+        }
+      })()
+    )
+  })
 
   self.addEventListener("message", function (event) {
     const waitEvent = event as ExtendableEvent
-    waitEvent.waitUntil(
-      (async () => {
-        await sendMessage({
-          message: "Got message",
-          data: event.data,
-        })
 
-        if (
+    if ("type" in event.data && event.data.type === "subscribed") {
-          "type" in event.data &&
+      waitEvent.waitUntil(submitSubscription(event.data.subscription))
-          event.data.type === "subscribed" &&
+    }
-          "subscription" in event.data
-        ) {
-          try {
-            await event.waitUntil(
-              submitSubscription(
-                self.registration,
-                event.data.subscription as PushSubscription
-              )
-            )
-          } catch (e) {
-            await sendMessage({
-              message: "Got error processing subscription",
-              error: (e as Error).toString(),
-            })
-          }
-        }
-
-        await sendMessage({
-          message: "Processed subscription",
-        })
-      })()
-    )
   })
 
   self.addEventListener("pushsubscriptionchange", function (event) {
@@ -89,128 +66,54 @@ export default function start(self: ServiceWorkerGlobalScope) {
 
     waitEvent.waitUntil(
       (async () => {
-        const existingSubscription =
+        const applicationServerKey = urlB64ToUint8Array(pushPublicKey)
-          await self.registration.pushManager.getSubscription()
+        const newSubscription = await self.registration.pushManager.subscribe({
-        const newSubscription = await submitSubscription(
+          userVisibleOnly: true,
-          self.registration,
+          applicationServerKey: applicationServerKey,
-          existingSubscription
+        })
-        )
 
-        await sendMessage({ type: "sent subscription", newSubscription })
+        await submitSubscription(newSubscription.toJSON())
       })()
     )
   })
+}
 
-  async function submitSubscription(
+async function submitSubscription(subscription: PushSubscriptionJSON) {
-    registration: ServiceWorkerRegistration,
+  const db = database()
-    subscription: PushSubscription | null
-  ) {
-    const db = database()
 
-    await sendMessage({
+  const existingSubscriptionId = await db.subscriptions.get(1)
-      message: `Is subscription null? ${subscription === null}`,
-    })
 
-    if (subscription === null) return
+  await (existingSubscriptionId === undefined
+    ? postSubscription(subscription, db)
+    : putSubscription(subscription, existingSubscriptionId.subscriptionId))
+}
 
-    const existingSubscriptionId = await db.subscriptions.get(1)
+async function postSubscription(
+  subscription: PushSubscriptionJSON,
+  db: ReturnType<typeof database>
+) {
+  const response = await fetch(`${process.env.BASE_URL}/api/subscription/`, {
+    method: "POST",
+    body: JSON.stringify(subscription),
+    headers: {
+      "Content-Type": "application/json",
+    },
+  })
 
-    await sendMessage({
+  db.subscriptions.put({
-      message: `Existing subscription ID ${existingSubscriptionId}`,
+    id: 1,
-    })
+    subscriptionId: (await response.json()).subscriptionId,
+  })
+}
 
-    await sendMessage({
+function putSubscription(subscription: PushSubscriptionJSON, id: number) {
-      message: `pushPublicKey ${pushPublicKey}`,
+  return fetch(`${process.env.BASE_URL}/api/subscription/${id}`, {
-    })
+    method: "PUT",
-
+    body: JSON.stringify(subscription),
-    let applicationServerKey
+    headers: {
-    try {
+      "Content-Type": "application/json",
-      applicationServerKey = urlB64ToUint8Array(pushPublicKey)
+    },
-    } catch (error) {
+  })
-      await sendMessage({
-        message: `B64 error ${(error as Error).toString()}`,
-      })
-    }
-
-    await sendMessage({
-      message: `Converted public key`,
-    })
-    const newSubscription = await registration.pushManager.subscribe({
-      userVisibleOnly: true,
-      applicationServerKey: applicationServerKey,
-    })
-
-    await sendMessage({
-      message: `subscribed via pushManager`,
-    })
-
-    const stupid =
-      existingSubscriptionId === undefined
-        ? postSubscription(newSubscription.toJSON(), db)
-        : putSubscription(
-            newSubscription.toJSON(),
-            existingSubscriptionId.subscriptionId
-          )
-    await stupid
-
-    return newSubscription
-  }
-
-  async function postSubscription(
-    subscription: PushSubscriptionJSON,
-    db: ReturnType<typeof database>
-  ) {
-    await sendMessage({
-      message: "Log something you piece of garbage",
-    })
-
-    try {
-      await sendMessage({
-        message: `URL ${process.env.BASE_URL}/api/subscription/`,
-      })
-
-      await sendMessage({
-        message: `Submitting subscription ${subscription}`,
-      })
-
-      await sendMessage({
-        message: `JSON formatted: ${JSON.stringify(subscription)}`,
-      })
-
-      const response = await fetch(
-        `${process.env.BASE_URL}/api/subscription/`,
-        {
-          method: "POST",
-          body: JSON.stringify(subscription),
-          headers: {
-            "Content-Type": "application/json",
-          },
-        }
-      )
-
-      await sendMessage({
-        message: `Response status ${response.status}`,
-      })
-      db.subscriptions.put({
-        id: 1,
-        subscriptionId: (await response.json()).subscriptionId,
-      })
-    } catch (error) {
-      await sendMessage({
-        message: `ERRRROR ${(error as Error).toString()}}`,
-      })
-    }
-  }
-
-  function putSubscription(subscription: PushSubscriptionJSON, id: number) {
-    return fetch(`${process.env.BASE_URL}/api/subscription/${id}`, {
-      method: "PUT",
-      body: JSON.stringify(subscription),
-      headers: {
-        "Content-Type": "application/json",
-      },
-    })
-  }
 }
 
 function database() {

docker-compose-test.yaml

@@ -1,6 +1,6 @@
 services:
   database:
-    image: postgres
+    image: postgres:16
     ports:
       - "5434:5432"
     environment:

docker-compose.yaml

@@ -3,10 +3,9 @@ services:
     build: .
     ports:
       - "9000:3000"
+    env_file: ".env"
   database:
-    image: postgres
+    image: postgres:16
-    ports:
-      - "5432:5432"
     environment:
       POSTGRES_USER: postgres
       POSTGRES_DB: postgres

e2e/install.spec.ts

@@ -1,5 +1,6 @@
 import { test, expect, Page } from "@playwright/test"
 import matchPath from "./urlMatcher"
+import { messageSW } from "@remix-pwa/sw"
 
 const { describe, beforeEach, skip, use } = test
 
@@ -89,6 +90,23 @@ describe("when user is on iOS", () => {
 
             await expect(yourNotificationsHeading).toBeVisible()
           })
+
+          test("the subscription is submitted", async ({ page }) => {
+            await page.goto("/")
+
+            await page.getByText(/Enable Notifications/).click()
+
+            const postedMessages = await page.evaluate(() => {
+              return (window as any).postedMessages
+            })
+
+            expect(postedMessages).toContainEqual({
+              type: "subscribed",
+              subscription: {
+                subscription: "HI",
+              },
+            })
+          })
         })
       })
 
@@ -212,20 +230,37 @@ function stubNotifications(
 
 function stubServiceWorker(page: Page) {
   return page.addInitScript(() => {
-    const serviceWorker = {}
+    function createSubscription(testToken = "HI") {
+      return {
+        toJSON: () => ({
+          subscription: testToken,
+        }),
+      }
+    }
+
+    let postedMessages: any[] = []
+
+    const serviceWorker = {
+      postMessage: (message: any) => postedMessages.push(message),
+    }
 
     const registration = {
       pushManager: {
         getSubscription() {
-          return Promise.resolve({ hi: "subscription" })
+          return Promise.resolve(createSubscription())
         },
         subscribe(args: Parameters<PushManager["subscribe"]>[0]) {
-          return Promise.resolve({ hi: "subscription" })
+          return Promise.resolve(createSubscription())
         },
       },
       active: serviceWorker,
     }
 
+    Object.defineProperty(window, "postedMessages", {
+      value: postedMessages,
+      writable: true,
+    })
+
     Object.defineProperty(navigator, "serviceWorker", {
       value: {
         ready: Promise.resolve(registration),

package-lock.json

@@ -31,7 +31,7 @@
         "@babel/preset-env": "^7.24.5",
         "@babel/preset-react": "^7.24.1",
         "@babel/preset-typescript": "^7.24.1",
-        "@playwright/test": "^1.44.1",
+        "@playwright/test": "^1.48.1",
         "@remix-pwa/dev": "^3.1.0",
         "@remix-run/dev": "^2.9.0",
         "@remix-run/testing": "^2.9.1",
@@ -3324,18 +3324,18 @@
       }
     },
     "node_modules/@playwright/test": {
-      "version": "1.44.1",
+      "version": "1.48.1",
-      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.44.1.tgz",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.48.1.tgz",
-      "integrity": "sha512-1hZ4TNvD5z9VuhNJ/walIjvMVvYkZKf71axoF/uiAqpntQJXpG64dlXhoDXE3OczPuTuvjf/M5KWFg5VAVUS3Q==",
+      "integrity": "sha512-s9RtWoxkOLmRJdw3oFvhFbs9OJS0BzrLUc8Hf6l2UdCNd1rqeEyD4BhCJkvzeEoD1FsK4mirsWwGerhVmYKtZg==",
       "dev": true,
       "dependencies": {
-        "playwright": "1.44.1"
+        "playwright": "1.48.1"
       },
       "bin": {
         "playwright": "cli.js"
       },
       "engines": {
-        "node": ">=16"
+        "node": ">=18"
       }
     },
     "node_modules/@remix-pwa/dev": {
@@ -13843,33 +13843,33 @@
       }
     },
     "node_modules/playwright": {
-      "version": "1.44.1",
+      "version": "1.48.1",
-      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.44.1.tgz",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.48.1.tgz",
-      "integrity": "sha512-qr/0UJ5CFAtloI3avF95Y0L1xQo6r3LQArLIg/z/PoGJ6xa+EwzrwO5lpNr/09STxdHuUoP2mvuELJS+hLdtgg==",
+      "integrity": "sha512-j8CiHW/V6HxmbntOfyB4+T/uk08tBy6ph0MpBXwuoofkSnLmlfdYNNkFTYD6ofzzlSqLA1fwH4vwvVFvJgLN0w==",
       "dev": true,
       "dependencies": {
-        "playwright-core": "1.44.1"
+        "playwright-core": "1.48.1"
       },
       "bin": {
         "playwright": "cli.js"
       },
       "engines": {
-        "node": ">=16"
+        "node": ">=18"
       },
       "optionalDependencies": {
         "fsevents": "2.3.2"
       }
     },
     "node_modules/playwright-core": {
-      "version": "1.44.1",
+      "version": "1.48.1",
-      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.44.1.tgz",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.48.1.tgz",
-      "integrity": "sha512-wh0JWtYTrhv1+OSsLPgFzGzt67Y7BE/ZS3jEqgGBlp2ppp1ZDj8c+9IARNW4dwf1poq5MgHreEM2KV/GuR4cFA==",
+      "integrity": "sha512-Yw/t4VAFX/bBr1OzwCuOMZkY1Cnb4z/doAFSwf4huqAGWmf9eMNjmK7NiOljCdLmxeRYcGPPmcDgU0zOlzP0YA==",
       "dev": true,
       "bin": {
         "playwright-core": "cli.js"
       },
       "engines": {
-        "node": ">=16"
+        "node": ">=18"
       }
     },
     "node_modules/playwright/node_modules/fsevents": {

package.json

@@ -9,8 +9,9 @@
     "lint": "eslint --ignore-path .gitignore --cache --cache-location ./node_modules/.cache/eslint .",
     "start": "remix-serve ./build/server/index.js",
     "typecheck": "tsc",
-    "watch": "export $(cat .env.test | xargs) && docker compose -f docker-compose-test.yaml up database -d && jest --watch --config=jest.config.ts",
+    "watch": "export $(cat .env.test | xargs) && docker compose -f docker-compose-test.yaml up database -d --remove-orphans && jest --watch --config=jest.config.ts",
-    "test": "export $(cat .env.test | xargs) && docker compose -f docker-compose-test.yaml up database -d && jest --config=jest.config.ts"
+    "test": "export $(cat .env.test | xargs) && docker compose -f docker-compose-test.yaml up database -d --remove-orphans && sleep 5 && jest --config=jest.config.ts",
+    "ci": "export $(cat .env.ci | xargs) && jest --config=jest.config.ts"
   },
   "dependencies": {
     "@remix-pwa/sw": "^3.0.9",
@@ -38,7 +39,7 @@
     "@babel/preset-env": "^7.24.5",
     "@babel/preset-react": "^7.24.1",
     "@babel/preset-typescript": "^7.24.1",
-    "@playwright/test": "^1.44.1",
+    "@playwright/test": "^1.48.1",
     "@remix-pwa/dev": "^3.1.0",
     "@remix-run/dev": "^2.9.0",
     "@remix-run/testing": "^2.9.1",

pushPublicKey.ts

@@ -1 +1 @@
-export default "BKc02U2-z7PkTbYgYLlxELWqzTVE631fs4IPuMLbxY_rxdo9VaduthqwkPOiblwjETl99uXes2Nc9EtPbS5x4uA"
+export default "BNwr5jYXxBwSRGooQWx6nzsrG5XejgAskVqowkc_O0rutL9PgRIkQAnDh4nz1yoPQEw40juMuqL2NEHSaD3XcxA"

send-it.js

@@ -1,22 +0,0 @@
-import webPush from "web-push"
-
-const subscription = {
-  endpoint:
-    "https://updates.push.services.mozilla.com/wpush/v2/gAAAAABm9FlbY5vMro60hF2iJF3UUBzweuFcg5NRSHXPSpHfUpjo5jKGVRnUxR4ekg0-FsvdQCP89cu__IFd06Tu2TJZ649YyqivRUBnAav0DgOLHGx5-t943QLS-wLvBqyJRCuuLlM1bLz6S9ph9AWJ8CG7rQuTabsHvw--s_w2KDQo3GcQXIM",
-  expirationTime: null,
-  keys: {
-    auth: "dDUqtFo26ekGEAmNzvmJAw",
-    p256dh:
-      "BHIT3J6xSRiHfz0m-QRHagDThiOZGVIANtPzOasrOBYG0s_yUnshTVharX5dZcq8GA5OkyMm3mqmA7_o_lFR4WE",
-  },
-}
-webPush.setVapidDetails(
-  "https://tackupnow.com",
-  "BKc02U2-z7PkTbYgYLlxELWqzTVE631fs4IPuMLbxY_rxdo9VaduthqwkPOiblwjETl99uXes2Nc9EtPbS5x4uA",
-  "Xmv5Pc4mqr138V3sCxXq7UmsbL5UgSOY43UuJ50nxPw"
-)
-
-webPush
-  .sendNotification(subscription, "Hi what's up?", {})
-  .then((x) => console.log("It sent", x))
-  .catch((error) => console.log("It did not send", error))

start.sh

@@ -1,7 +1,4 @@
 #!/bin/bash
 
-set -a
-source ./.env
-set +a
 npx tsx api/data/upgrade.ts
 npx tsx server.ts

vite.config.ts

@@ -12,7 +12,7 @@ export default defineConfig({
     tsconfigPaths(),
     remixPWA({
       buildVariables: {
-        "process.env.BASE_URL": process.env.BASE_URL!,
+        "process.env.BASE_URL": process.env.BASE_URL ?? "http://localhost:5173",
       },
     }),
   ],