Merge pull request #215 from Chigybillionz/offline-support

Offline support

Author: jobbykings

frontend/next.config.js

@@ -4,6 +4,195 @@ const withBundleAnalyzer = require('@next/bundle-analyzer')({
   enabled: process.env.ANALYZE === 'true',
 });
 
+const withPWA = require('@ducanh2912/next-pwa').default({
+  dest: 'public',
+  cacheOnFrontEndNav: true,
+  aggressiveFrontEndNavCaching: true,
+  reloadOnOnline: true,
+  swcMinify: true,
+  disable: process.env.NODE_ENV === 'development',
+  workboxOptions: {
+    disableDevLogs: true,
+    runtimeCaching: [
+      {
+        urlPattern: /^https:\/\/fonts\.(?:gstatic)\.com\/.*/i,
+        handler: 'CacheFirst',
+        options: {
+          cacheName: 'google-fonts-webfonts',
+          expiration: {
+            maxEntries: 4,
+            maxAgeSeconds: 365 * 24 * 60 * 60, // 365 days
+          },
+        },
+      },
+      {
+        urlPattern: /^https:\/\/fonts\.(?:googleapis)\.com\/.*/i,
+        handler: 'StaleWhileRevalidate',
+        options: {
+          cacheName: 'google-fonts-stylesheets',
+          expiration: {
+            maxEntries: 4,
+            maxAgeSeconds: 7 * 24 * 60 * 60, // 7 days
+          },
+        },
+      },
+      {
+        urlPattern: /\.(?:eot|otf|ttc|ttf|woff|woff2|font.css)$/i,
+        handler: 'StaleWhileRevalidate',
+        options: {
+          cacheName: 'static-font-assets',
+          expiration: {
+            maxEntries: 4,
+            maxAgeSeconds: 7 * 24 * 60 * 60, // 7 days
+          },
+        },
+      },
+      {
+        urlPattern: /\.(?:jpg|jpeg|gif|png|svg|ico|webp)$/i,
+        handler: 'StaleWhileRevalidate',
+        options: {
+          cacheName: 'static-image-assets',
+          expiration: {
+            maxEntries: 64,
+            maxAgeSeconds: 24 * 60 * 60, // 24 hours
+          },
+        },
+      },
+      {
+        urlPattern: /\/_next\/image\?url=.+$/i,
+        handler: 'StaleWhileRevalidate',
+        options: {
+          cacheName: 'next-image',
+          expiration: {
+            maxEntries: 64,
+            maxAgeSeconds: 24 * 60 * 60, // 24 hours
+          },
+        },
+      },
+      {
+        urlPattern: /\.(?:mp3|wav|ogg)$/i,
+        handler: 'CacheFirst',
+        options: {
+          rangeRequests: true,
+          cacheName: 'static-audio-assets',
+          expiration: {
+            maxEntries: 32,
+            maxAgeSeconds: 24 * 60 * 60, // 24 hours
+          },
+        },
+      },
+      {
+        urlPattern: /\.(?:mp4)$/i,
+        handler: 'CacheFirst',
+        options: {
+          rangeRequests: true,
+          cacheName: 'static-video-assets',
+          expiration: {
+            maxEntries: 32,
+            maxAgeSeconds: 24 * 60 * 60, // 24 hours
+          },
+        },
+      },
+      {
+        urlPattern: /\.(?:js)$/i,
+        handler: 'StaleWhileRevalidate',
+        options: {
+          cacheName: 'static-js-assets',
+          expiration: {
+            maxEntries: 32,
+            maxAgeSeconds: 24 * 60 * 60, // 24 hours
+          },
+        },
+      },
+      {
+        urlPattern: /\.(?:css|less)$/i,
+        handler: 'StaleWhileRevalidate',
+        options: {
+          cacheName: 'static-style-assets',
+          expiration: {
+            maxEntries: 32,
+            maxAgeSeconds: 24 * 60 * 60, // 24 hours
+          },
+        },
+      },
+      {
+        urlPattern: /\/_next\/data\/.+\/.+\.json$/i,
+        handler: 'StaleWhileRevalidate',
+        options: {
+          cacheName: 'next-data',
+          expiration: {
+            maxEntries: 32,
+            maxAgeSeconds: 24 * 60 * 60, // 24 hours
+          },
+        },
+      },
+      {
+        urlPattern: /\.(?:json|xml|csv)$/i,
+        handler: 'NetworkFirst',
+        options: {
+          cacheName: 'static-data-assets',
+          expiration: {
+            maxEntries: 32,
+            maxAgeSeconds: 24 * 60 * 60, // 24 hours
+          },
+        },
+      },
+      {
+        urlPattern: ({ url }) => {
+          const isSameOrigin = self.origin === url.origin;
+          if (!isSameOrigin) return false;
+          const pathname = url.pathname;
+          // Exclude /api/auth/callback/* to fix OAuth login issue
+          if (pathname.startsWith('/api/auth/')) return false;
+          if (pathname.startsWith('/api/')) return true;
+          return false;
+        },
+        handler: 'NetworkFirst',
+        method: 'GET',
+        options: {
+          cacheName: 'apis',
+          expiration: {
+            maxEntries: 16,
+            maxAgeSeconds: 24 * 60 * 60, // 24 hours
+          },
+          networkTimeoutSeconds: 10, // fall back to cache if api does not response within 10 seconds
+        },
+      },
+      {
+        urlPattern: ({ url }) => {
+          const isSameOrigin = self.origin === url.origin;
+          if (!isSameOrigin) return false;
+          const pathname = url.pathname;
+          if (pathname.startsWith('/api/')) return false;
+          return true;
+        },
+        handler: 'NetworkFirst',
+        options: {
+          cacheName: 'others',
+          expiration: {
+            maxEntries: 32,
+            maxAgeSeconds: 24 * 60 * 60, // 24 hours
+          },
+          networkTimeoutSeconds: 10,
+        },
+      },
+      {
+        urlPattern: ({ url }) => url.origin === self.origin && url.pathname.startsWith('/api/'),
+        handler: 'NetworkOnly',
+        method: 'POST',
+        options: {
+          backgroundSync: {
+            name: 'api-sync-queue',
+            options: {
+              maxRetentionTime: 24 * 60, // Retry for max of 24 Hours
+            },
+          },
+        },
+      },
+    ],
+  },
+});
+
 const nextConfig = {
   typescript: {
     ignoreBuildErrors: true,
@@ -70,4 +259,4 @@ const nextConfig = {
   },
 };
 
-module.exports = withBundleAnalyzer(nextConfig);
+module.exports = withBundleAnalyzer(withPWA(nextConfig));

frontend/src/components/PWAInstallPrompt.tsx

@@ -0,0 +1,58 @@
+import React, { useEffect, useState } from 'react';
+
+export default function PWAInstallPrompt() {
+  const [deferredPrompt, setDeferredPrompt] = useState<any>(null);
+  const [showPrompt, setShowPrompt] = useState(false);
+
+  useEffect(() => {
+    const handleBeforeInstallPrompt = (e: Event) => {
+      e.preventDefault();
+      setDeferredPrompt(e);
+      setShowPrompt(true);
+    };
+
+    window.addEventListener('beforeinstallprompt', handleBeforeInstallPrompt);
+
+    return () => {
+      window.removeEventListener('beforeinstallprompt', handleBeforeInstallPrompt);
+    };
+  }, []);
+
+  const handleInstallClick = async () => {
+    if (!deferredPrompt) return;
+    deferredPrompt.prompt();
+    const { outcome } = await deferredPrompt.userChoice;
+    if (outcome === 'accepted') {
+      setShowPrompt(false);
+    }
+    setDeferredPrompt(null);
+  };
+
+  if (!showPrompt) return null;
+
+  return (
+    <div className="fixed bottom-4 left-4 right-4 md:left-auto md:right-4 md:w-80 bg-white dark:bg-gray-800 p-4 rounded-lg shadow-xl border border-gray-200 dark:border-gray-700 z-50 flex flex-col gap-3">
+      <div className="flex justify-between items-start">
+        <div>
+          <h3 className="font-semibold text-gray-900 dark:text-white">Install StarkEd</h3>
+          <p className="text-sm text-gray-500 dark:text-gray-400">Install our app for a better, faster, offline-capable experience.</p>
+        </div>
+        <button 
+          onClick={() => setShowPrompt(false)} 
+          className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
+          aria-label="Close prompt"
+        >
+          <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+          </svg>
+        </button>
+      </div>
+      <button 
+        onClick={handleInstallClick}
+        className="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-md transition-colors"
+      >
+        Install App
+      </button>
+    </div>
+  );
+}

frontend/src/pages/_app.tsx

@@ -1,12 +1,14 @@
 import type { AppProps } from 'next/app';
 import { useEffect, useRef } from 'react';
 import { useRouter } from 'next/router';
+import Head from 'next/head';
 import { appWithTranslation } from 'next-i18next';
 import { ThemeProvider } from 'next-themes';
 import nextI18NextConfig from '../../next-i18next.config';
 import { WalletProvider } from '../context/WalletContext';
 import { ErrorBoundary } from '../components/ErrorBoundary';
 import { GlobalShell } from '../components/PWA/GlobalShell';
+import PWAInstallPrompt from '../components/PWAInstallPrompt';
 import { Toaster } from 'react-hot-toast';
 import '../styles/globals.css';
 
@@ -35,31 +37,40 @@ function MyApp({ Component, pageProps }: AppProps) {
   }, [router.asPath]);
 
   return (
-    <ThemeProvider attribute="class" defaultTheme="system" enableSystem storageKey="starked-theme">
-      <ErrorBoundary key={router.asPath}>
-        <WalletProvider>
-          <a className="skip-link" href="#main-content">
-            Skip to main content
-          </a>
-          <div
-            className="sr-only"
-            role="status"
-            aria-live="polite"
-            aria-atomic="true"
-          >
-            {`Navigated to ${router.asPath}`}
-          </div>
-          <GlobalShell />
-          <Component {...pageProps} />
-          <Toaster
-            position="bottom-right"
-            toastOptions={{
-              ariaProps: { role: 'status', 'aria-live': 'polite' },
-            }}
-          />
-        </WalletProvider>
-      </ErrorBoundary>
-    </ThemeProvider>
+    <>
+      <Head>
+        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
+        <link rel="manifest" href="/manifest.json" />
+        <meta name="theme-color" content="#3b82f6" />
+        <link rel="apple-touch-icon" href="/icons/icon-192x192.png" />
+      </Head>
+      <ThemeProvider attribute="class" defaultTheme="system" enableSystem storageKey="starked-theme">
+        <ErrorBoundary key={router.asPath}>
+          <WalletProvider>
+            <a className="skip-link" href="#main-content">
+              Skip to main content
+            </a>
+            <div
+              className="sr-only"
+              role="status"
+              aria-live="polite"
+              aria-atomic="true"
+            >
+              {`Navigated to ${router.asPath}`}
+            </div>
+            <GlobalShell />
+            <Component {...pageProps} />
+            <PWAInstallPrompt />
+            <Toaster
+              position="bottom-right"
+              toastOptions={{
+                ariaProps: { role: 'status', 'aria-live': 'polite' },
+              }}
+            />
+          </WalletProvider>
+        </ErrorBoundary>
+      </ThemeProvider>
+    </>
   );
 }
 

frontend/src/pages/_offline.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import Head from 'next/head';
+
+export default function Offline() {
+  return (
+    <>
+      <Head>
+        <title>Offline | StarkEd</title>
+      </Head>
+      <div className="flex flex-col items-center justify-center min-h-screen bg-gray-50 text-gray-900 dark:bg-gray-900 dark:text-gray-100 px-4 text-center">
+        <h1 className="text-4xl font-bold mb-4">You are offline</h1>
+        <p className="text-lg text-gray-600 dark:text-gray-400 mb-8 max-w-md">
+          It looks like you've lost your internet connection. Some features of StarkEd may be unavailable until you reconnect.
+        </p>
+        <button 
+          onClick={() => window.location.reload()}
+          className="px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white rounded-lg font-medium transition-colors"
+        >
+          Try Again
+        </button>
+      </div>
+    </>
+  );
+}