Add even more logging

app/install/EnableNotifications.tsx

@@ -26,6 +26,7 @@ function EnableButton({ onSubscribe }: { onSubscribe: () => void }) {
   const { subscribeToPush, requestPermission, canSendPush } = usePush()
 
   const [error, setError] = useState<Error>()
+  const [log, setLog] = useState<string[]>([])
 
   function subscribe() {
     requestPermission()
@@ -34,15 +35,25 @@ function EnableButton({ onSubscribe }: { onSubscribe: () => void }) {
   useEffect(() => {
     if (!canSendPush) return
 
+    setLog((prev) => [...prev, "Subscribing to push notifications"])
+
     subscribeToPush(
       urlB64ToUint8Array(pushPublicKey) as any,
       (subscription) => {
+        setLog((prev) => [
+          ...prev,
+          `controller is undefined? ${navigator.serviceWorker.controller === undefined}`,
+        ])
+        setLog((prev) => [
+          ...prev,
+          `subscriptions: ${JSON.stringify(subscription.toJSON())}`,
+        ])
         try {
           navigator.serviceWorker.controller?.postMessage({
             type: "subscribed",
             subscription: subscription.toJSON(),
           })
-          onSubscribe()
+          // onSubscribe()
         } catch (error) {
           setError(error as Error)
         }
@@ -57,6 +68,9 @@ function EnableButton({ onSubscribe }: { onSubscribe: () => void }) {
     <>
       <button onClick={subscribe}>Enable Notifications</button>
       <div>{error?.toString()}</div>
+      {log.map((log, index) => (
+        <div key={index}>{log}</div>
+      ))}
     </>
   )
 }

app/routes/_index.tsx

@@ -97,7 +97,7 @@ function TackUpNow({
 
   useEffect(() => {
     window.addEventListener("message", (event) =>
-      setMessages((prev) => [...prev, event.data])
+      setMessages((prev) => [...prev, JSON.stringify(event.data)])
     )
   }, [])