fix: Correctly handle transition from offline back to online

Previously we were relying on a fetch() succeeding to tell us whether we were back online, but there's no guarantee of a fetch() being attempted (so we stayed "offline" longer than we needed to)

Author: grega

public/service-worker.js

@@ -77,25 +77,49 @@ function addSecurityHeaders(response) {
   });
 }
 
-function broadcastOffline() {
+// Tracks whether any network-first request has fallen back to cache, so that we can broadcast ONLINE when the network becomes reachable again
+let servingFromCache = false;
+
+self.addEventListener("online", () => {
+  servingFromCache = false;
+  broadcast("ONLINE");
+});
+
+// Send CHECK_ONLINE when offline. We probe the network directly here because SW-initiated fetches bypass the SW's own fetch handler, hitting the network without being served from cache
+self.addEventListener("message", (event) => {
+  if (event.data?.type !== "CHECK_ONLINE") return;
+  fetch("./manifest.json", { cache: "no-store" })
+    .then(() => {
+      servingFromCache = false;
+      broadcast("ONLINE");
+    })
+    .catch(() => {});
+});
+
+function broadcast(type) {
   self.clients
     .matchAll()
-    .then((clients) => clients.forEach((c) => c.postMessage({ type: "OFFLINE" })));
+    .then((clients) => clients.forEach((c) => c.postMessage({ type })));
 }
 
-// Network-first: try the network, update the cache, fall back to cache
+// Network-first try the network, update the cache, fall back to cache
 async function networkFirst(request, cacheName) {
   const cache = await caches.open(cacheName);
   try {
     const networkResponse = await fetch(request);
     if (networkResponse.ok) {
       cache.put(request, addSecurityHeaders(networkResponse.clone()));
+      if (servingFromCache) {
+        servingFromCache = false;
+        broadcast("ONLINE");
+      }
     }
     return addSecurityHeaders(networkResponse);
   } catch {
     const cached = await cache.match(request);
     if (cached) {
-      broadcastOffline();
+      servingFromCache = true;
+      broadcast("OFFLINE");
       return addSecurityHeaders(cached);
     }
     return Response.error();
@@ -139,7 +163,10 @@ self.addEventListener("fetch", (event) => {
   }
 
   // Translation files get their own cache so they can be evicted independently of the app shell
-  if (url.origin === self.location.origin && url.pathname.includes("/translations/")) {
+  if (
+    url.origin === self.location.origin &&
+    url.pathname.includes("/translations/")
+  ) {
     event.respondWith(networkFirst(event.request, TRANSLATIONS_CACHE));
     return;
   }

src/hooks/useIsOnline.js

@@ -9,10 +9,10 @@ const useIsOnline = () => {
     window.addEventListener("online", handleOnline);
     window.addEventListener("offline", handleOffline);
 
-    // The service worker broadcasts OFFLINE whenever a network-first fetch falls back to cache, which reliably catches the case where navigator.onLine hasn't settled yet after a page reload when offline
-    // This ensures that we can show "offline" state / UI immediately on page load when offline
+    // The service worker broadcasts OFFLINE when a network-first fetch falls back to cache (catching cases where navigator.onLine hasn't settled on page reload), and ONLINE when the network becomes reachable again after a cache fallback period
     const handleSWMessage = ({ data }) => {
       if (data?.type === "OFFLINE") setIsOnline(false);
+      if (data?.type === "ONLINE") setIsOnline(true);
     };
     if ("serviceWorker" in navigator) {
       navigator.serviceWorker.addEventListener("message", handleSWMessage);
@@ -27,6 +27,16 @@ const useIsOnline = () => {
     };
   }, []);
 
+  // While offline, poll the SW every 3s to check if the network has returned, broadcast ONLINE if successful
+  useEffect(() => {
+    if (isOnline || !("serviceWorker" in navigator)) return;
+    const interval = setInterval(async () => {
+      const reg = await navigator.serviceWorker.ready;
+      reg.active?.postMessage({ type: "CHECK_ONLINE" });
+    }, 3000);
+    return () => clearInterval(interval);
+  }, [isOnline]);
+
   return isOnline;
 };
 

src/hooks/useIsOnline.test.js

@@ -9,15 +9,21 @@ const dispatchWindowEvent = (type) => {
 
 describe("useIsOnline", () => {
   let swEventTarget;
+  let mockPostMessage;
 
   beforeEach(() => {
     Object.defineProperty(navigator, "onLine", {
       configurable: true,
       get: () => true,
     });
 
-    // jsdom doesn't implement navigator.serviceWorker so provide a minimal stub
+    mockPostMessage = jest.fn();
     swEventTarget = new EventTarget();
+    swEventTarget.ready = Promise.resolve({
+      active: { postMessage: mockPostMessage },
+    });
+
+    // jsdom doesn't implement navigator.serviceWorker so provide a minimal stub
     Object.defineProperty(navigator, "serviceWorker", {
       configurable: true,
       value: swEventTarget,
@@ -46,32 +52,93 @@ describe("useIsOnline", () => {
 
   test("updates to false when the offline window event fires", () => {
     const { result } = renderHook(() => useIsOnline());
-    expect(result.current).toBe(true);
     dispatchWindowEvent("offline");
     expect(result.current).toBe(false);
   });
 
   test("updates to true when the online window event fires", () => {
-    Object.defineProperty(navigator, "onLine", {
-      configurable: true,
-      get: () => false,
-    });
     const { result } = renderHook(() => useIsOnline());
-    expect(result.current).toBe(false);
+    dispatchWindowEvent("offline");
     dispatchWindowEvent("online");
     expect(result.current).toBe(true);
   });
 
   test("updates to false when the service worker broadcasts OFFLINE", () => {
     const { result } = renderHook(() => useIsOnline());
-    expect(result.current).toBe(true);
     dispatchSWMessage({ type: "OFFLINE" });
     expect(result.current).toBe(false);
   });
 
+  test("updates to true when the service worker broadcasts ONLINE", () => {
+    const { result } = renderHook(() => useIsOnline());
+    dispatchSWMessage({ type: "OFFLINE" });
+    dispatchSWMessage({ type: "ONLINE" });
+    expect(result.current).toBe(true);
+  });
+
   test("ignores service worker messages with a different type", () => {
     const { result } = renderHook(() => useIsOnline());
     dispatchSWMessage({ type: "OTHER" });
     expect(result.current).toBe(true);
   });
+
+  describe("connectivity polling", () => {
+    beforeEach(() => {
+      jest.useFakeTimers();
+    });
+
+    afterEach(() => {
+      jest.useRealTimers();
+    });
+
+    test("does not poll while online", async () => {
+      renderHook(() => useIsOnline());
+      await act(async () => {
+        jest.advanceTimersByTime(6000);
+      });
+      expect(mockPostMessage).not.toHaveBeenCalled();
+    });
+
+    test("sends CHECK_ONLINE to the service worker every 3 seconds while offline", async () => {
+      const { result } = renderHook(() => useIsOnline());
+      dispatchSWMessage({ type: "OFFLINE" });
+      expect(result.current).toBe(false);
+
+      await act(async () => {
+        jest.advanceTimersByTime(3000);
+      });
+      expect(mockPostMessage).toHaveBeenCalledTimes(1);
+      expect(mockPostMessage).toHaveBeenCalledWith({ type: "CHECK_ONLINE" });
+
+      await act(async () => {
+        jest.advanceTimersByTime(3000);
+      });
+      expect(mockPostMessage).toHaveBeenCalledTimes(2);
+    });
+
+    test("stops polling when the service worker broadcasts ONLINE", async () => {
+      const { result } = renderHook(() => useIsOnline());
+      dispatchSWMessage({ type: "OFFLINE" });
+      dispatchSWMessage({ type: "ONLINE" });
+      expect(result.current).toBe(true);
+
+      await act(async () => {
+        jest.advanceTimersByTime(6000);
+      });
+      expect(mockPostMessage).not.toHaveBeenCalled();
+    });
+
+    test("stops polling on unmount", async () => {
+      const { result, unmount } = renderHook(() => useIsOnline());
+      dispatchSWMessage({ type: "OFFLINE" });
+      expect(result.current).toBe(false);
+
+      unmount();
+
+      await act(async () => {
+        jest.advanceTimersByTime(6000);
+      });
+      expect(mockPostMessage).not.toHaveBeenCalled();
+    });
+  });
 });