From 1f060ad0942579abb36c7c305e96c9c55dfec7ae Mon Sep 17 00:00:00 2001
From: Bhuvanesh S <YOUR_GITHUB_EMAIL>
Date: Sat, 20 Jun 2026 22:47:43 +0530
Subject: [PATCH] feat(pwa): implement offline fallback page and improve
 service worker navigation handling

---
 app/offline/page.tsx               | 15 ++++++++++
 app/sw.ts                          | 31 ++++++++++++++++++--
 components/pwa/OfflineFallback.tsx | 45 ++++++++++++++++++++++++++++++
 tests/pwa/offline-page.test.tsx    | 40 ++++++++++++++++++++++++++
 4 files changed, 129 insertions(+), 2 deletions(-)
 create mode 100644 app/offline/page.tsx
 create mode 100644 components/pwa/OfflineFallback.tsx
 create mode 100644 tests/pwa/offline-page.test.tsx

diff --git a/app/offline/page.tsx b/app/offline/page.tsx
new file mode 100644
index 000000000..8ddf9d934
--- /dev/null
+++ b/app/offline/page.tsx
@@ -0,0 +1,15 @@
+import type { Metadata } from 'next';
+import OfflineFallback from '@/components/pwa/OfflineFallback';
+
+export const metadata: Metadata = {
+  title: 'Offline | CommitPulse',
+  description: 'Connection lost. Please check your internet connection.',
+  robots: {
+    index: false,
+    follow: false,
+  },
+};
+
+export default function OfflinePage() {
+  return <OfflineFallback />;
+}
diff --git a/app/sw.ts b/app/sw.ts
index 34c5c77fd..ebf8a60fc 100644
--- a/app/sw.ts
+++ b/app/sw.ts
@@ -1,6 +1,6 @@
 import { defaultCache } from '@serwist/next/worker';
 import type { PrecacheEntry, SerwistGlobalConfig } from 'serwist';
-import { Serwist } from 'serwist';
+import { Serwist, NetworkFirst } from 'serwist';
 
 // Extend the ServiceWorkerGlobalScope with Serwist's injected manifest
 declare global {
@@ -22,7 +22,34 @@ const serwist = new Serwist({
   // Prefetch responses while the browser handles navigation
   navigationPreload: true,
 
-  runtimeCaching: defaultCache,
+  runtimeCaching: [
+    {
+      matcher({ request }) {
+        return request.mode === 'navigate';
+      },
+      handler: new NetworkFirst({
+        cacheName: 'pages',
+        plugins: [
+          {
+            async handlerDidError() {
+              return caches.match('/offline');
+            },
+          },
+        ],
+      }),
+    },
+    ...defaultCache,
+  ],
+  fallbacks: {
+    entries: [
+      {
+        url: '/offline',
+        matcher({ request }) {
+          return request.mode === 'navigate';
+        },
+      },
+    ],
+  },
 });
 
 serwist.addEventListeners();
diff --git a/components/pwa/OfflineFallback.tsx b/components/pwa/OfflineFallback.tsx
new file mode 100644
index 000000000..881d23dd5
--- /dev/null
+++ b/components/pwa/OfflineFallback.tsx
@@ -0,0 +1,45 @@
+'use client';
+
+import { useState } from 'react';
+import { WifiOff, RefreshCw } from 'lucide-react';
+import { useTranslation } from '@/context/TranslationContext';
+
+export default function OfflineFallback() {
+  const { t } = useTranslation();
+  const [isRefreshing, setIsRefreshing] = useState(false);
+
+  const handleRetry = () => {
+    setIsRefreshing(true);
+    // Attempt reload
+    window.location.reload();
+  };
+
+  return (
+    <div className="flex min-h-[80vh] flex-col items-center justify-center px-6 text-center">
+      <div className="relative mb-8 flex h-24 w-24 items-center justify-center rounded-3xl bg-zinc-100 dark:bg-zinc-900 border border-zinc-200/50 dark:border-zinc-800 shadow-md">
+        <div className="absolute -inset-1 rounded-3xl bg-gradient-to-r from-emerald-500/10 to-cyan-500/10 opacity-50 blur-lg" />
+        <WifiOff className="relative h-12 w-12 text-zinc-400 dark:text-zinc-500" />
+      </div>
+
+      <h1 className="mb-3 text-3xl font-black tracking-tight text-zinc-900 dark:text-white md:text-4xl">
+        {t('offline.title', { defaultValue: 'Connection Lost' })}
+      </h1>
+
+      <p className="mx-auto mb-8 max-w-sm text-sm text-zinc-500 dark:text-zinc-400">
+        {t('offline.description', {
+          defaultValue:
+            'You are currently offline. Check your internet connection and try refreshing the page.',
+        })}
+      </p>
+
+      <button
+        onClick={handleRetry}
+        disabled={isRefreshing}
+        className="flex items-center gap-2 rounded-2xl bg-gradient-to-r from-emerald-500 to-cyan-500 px-6 py-3.5 text-sm font-bold text-black transition-all duration-300 transform hover:scale-[1.02] hover:shadow-lg active:scale-[0.98] disabled:opacity-50 cursor-pointer"
+      >
+        <RefreshCw className={`h-4 w-4 ${isRefreshing ? 'animate-spin' : ''}`} />
+        {t('offline.retry_button', { defaultValue: 'Try Again' })}
+      </button>
+    </div>
+  );
+}
diff --git a/tests/pwa/offline-page.test.tsx b/tests/pwa/offline-page.test.tsx
new file mode 100644
index 000000000..1773a2560
--- /dev/null
+++ b/tests/pwa/offline-page.test.tsx
@@ -0,0 +1,40 @@
+import '@testing-library/jest-dom/vitest';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import React from 'react';
+import OfflineFallback from '@/components/pwa/OfflineFallback';
+
+// Mock location.reload
+const reloadMock = vi.fn();
+Object.defineProperty(window, 'location', {
+  value: { reload: reloadMock },
+  writable: true,
+});
+
+describe('OfflineFallback Component', () => {
+  beforeEach(() => {
+    reloadMock.mockClear();
+  });
+
+  it('renders connection lost header, description, and button', () => {
+    render(<OfflineFallback />);
+
+    expect(screen.getByText('Connection Lost')).toBeInTheDocument();
+    expect(
+      screen.getByText(
+        'You are currently offline. Check your internet connection and try refreshing the page.'
+      )
+    ).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /try again/i })).toBeInTheDocument();
+  });
+
+  it('triggers page reload when try again button is clicked', () => {
+    render(<OfflineFallback />);
+
+    const button = screen.getByRole('button', { name: /try again/i });
+    fireEvent.click(button);
+
+    expect(reloadMock).toHaveBeenCalledTimes(1);
+    expect(button).toBeDisabled();
+  });
+});