working on background sync.

.gitignore

@@ -51,3 +51,7 @@ app
 manifest-checksum*
 
 settings.gradle
+
+**/public/workbox-*.js
+**/public/sw.js
+**/public/worker-*.js

next.config.js

@@ -2,6 +2,7 @@ const webpack = require("webpack");
 
 const withPWA = require("next-pwa")({
   dest: "public",
+  customWorkerDir: "src/workers",
 });
 
 /** @type {import('next').NextConfig} */

package.json

@@ -16,6 +16,7 @@
     "@mui/material": "^5.15.16",
     "@mui/material-nextjs": "^5.15.11",
     "@web5/api": "^0.9.2",
+    "babel-loader": "^9.1.3",
     "crypto-browserify": "^3.12.0",
     "formik": "^2.4.6",
     "next": "14.2.3",

src/components/timer/index.tsx

@@ -25,6 +25,20 @@ class Timer {
     this._timerId = crypto.randomUUID();
     this.tickHandler = tickHandler;
     this._intervalId = null;
+
+    // Start a background sync to update timer state
+  }
+
+  async sendTimerMessage() {
+    if ("serviceWorker" in navigator && "SyncManager" in window) {
+      const registration = await navigator.serviceWorker.ready;
+      try {
+        // @ts-ignore
+        await registration.sync.register("timer-sync");
+      } catch {
+        console.log("Background Sync could not be registered!");
+      }
+    }
   }
 
   get totalTime() {
@@ -51,27 +65,14 @@ class Timer {
     if (!this._isPlaying && this._remainingTime > 0) {
       this._isPlaying = true;
       this._intervalId = setInterval(() => {
+        this.sendTimerMessage();
         if (this._remainingTime > 0) {
           this._remainingTime -= 10; // Decrease by 10 milliseconds each tick
           this.update();
         } else {
           this.setFinished();
         }
       }, 10); // Tick every 10 milliseconds
-
-      // Start a background sync to update timer state
-      if ("serviceWorker" in navigator && "SyncManager" in window) {
-        navigator.serviceWorker.ready
-          .then((registration) => {
-            console.log("registering sync");
-            // TODO: Remove
-            // @ts-ignore
-            return registration.sync.register("timerSync");
-          })
-          .catch((err) => {
-            console.error("Background sync registration failed:", err);
-          });
-      }
     }
   }
 

src/workers/index.ts

@@ -0,0 +1,14 @@
+"use strict";
+
+self.addEventListener("sync", (event) => {
+  console.log("got sync message", event);
+  // @ts-ignore
+  if (event.tag === "timer-sync") {
+    console.log("got timer sync message");
+    const logMessage = (e: any) => {
+      console.log("got timer", e);
+    };
+    // @ts-ignore
+    event.waitUntil(logMessage);
+  }
+});