fix: incorrectly fall back to web worker after service worker has initialized

Author: Neet-Nestor

app/components/home.tsx

@@ -6,7 +6,7 @@ import styles from "./home.module.scss";
 
 import log from "loglevel";
 import dynamic from "next/dynamic";
-import { useState, useEffect } from "react";
+import { useState, useEffect, useRef } from "react";
 import {
   HashRouter as Router,
   Routes,
@@ -164,6 +164,19 @@ const useWebLLM = () => {
   const [webllm, setWebLLM] = useState<WebLLMApi | undefined>(undefined);
   const [isWebllmActive, setWebllmAlive] = useState(false);
 
+  const isWebllmInitialized = useRef(false);
+
+  // If service worker registration timeout, fall back to web worker
+  const timeout = setTimeout(() => {
+    if (!isWebllmInitialized.current && !isWebllmActive && !webllm) {
+      log.info(
+        "Service Worker activation is timed out. Falling back to use web worker.",
+      );
+      setWebLLM(new WebLLMApi("webWorker", config.logLevel));
+      setWebllmAlive(true);
+    }
+  }, 2_000);
+
   // Initialize WebLLM engine
   useEffect(() => {
     if ("serviceWorker" in navigator) {
@@ -198,6 +211,8 @@ const useWebLLM = () => {
                 ),
               );
               setWebllmAlive(true);
+              isWebllmInitialized.current = true;
+              clearTimeout(timeout);
             }
             navigator.serviceWorker.removeEventListener(
               "message",
@@ -217,18 +232,9 @@ const useWebLLM = () => {
       );
       setWebLLM(new WebLLMApi("webWorker", config.logLevel));
       setWebllmAlive(true);
+      isWebllmInitialized.current = true;
+      clearTimeout(timeout);
     }
-
-    // If service worker registration timeout
-    setTimeout(() => {
-      if (!isWebllmActive && !webllm) {
-        log.info(
-          "Service Worker activation is timed out. Falling back to use web worker.",
-        );
-        setWebLLM(new WebLLMApi("webWorker", config.logLevel));
-        setWebllmAlive(true);
-      }
-    }, 3_000);
   }, []);
 
   if (webllm?.webllm.type === "serviceWorker") {

package.json

@@ -17,7 +17,7 @@
   "dependencies": {
     "@fortaine/fetch-event-source": "^3.0.6",
     "@hello-pangea/dnd": "^16.5.0",
-    "@neet-nestor/web-llm": "^0.2.55",
+    "@neet-nestor/web-llm": "^0.2.56",
     "@serwist/next": "^9.0.2",
     "@svgr/webpack": "^6.5.1",
     "emoji-picker-react": "^4.9.2",

yarn.lock

@@ -2089,10 +2089,10 @@
     "@jridgewell/resolve-uri" "^3.1.0"
     "@jridgewell/sourcemap-codec" "^1.4.14"
 
-"@neet-nestor/web-llm@^0.2.55":
-  version "0.2.55"
-  resolved "https://registry.yarnpkg.com/@neet-nestor/web-llm/-/web-llm-0.2.55.tgz#56a23faaaa43d1b5a4f63e6b0a54d85e66ebb5a3"
-  integrity sha512-J/qKFT8fpVs+Q1z3YJwTZLbWNjZtMZs7A9pUL9ogioI6bYQA/roxKyYkjTtio6x6n63leE+4E+LYOC6bb6OUWw==
+"@neet-nestor/web-llm@^0.2.56":
+  version "0.2.56"
+  resolved "https://registry.yarnpkg.com/@neet-nestor/web-llm/-/web-llm-0.2.56.tgz#db85a1599dc03a3507825eb1457a4f3a9cec9a46"
+  integrity sha512-eCjNyrIVP1YbEqEKi2QkIdenQUOmV3n8bQ/aInv1qr840ppjNoBcCV/K+z2FbXm6ltymeWEhAbNIWI2rxx0j1w==
   dependencies:
     loglevel "^1.9.1"