Merge pull request #97 from malikpiara/v2

malikpiara · web-flow · commit 6ed5ff4621b9 · 2024-11-01T23:47:47.000Z
Logicola is now a PWA and works offline
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -7,6 +7,7 @@ import { Footer } from '@/components/footer';
 import { CSPostHogProvider } from '@/components/providers';
 import thumbnail from '../public/thumbnail.jpg';
 import ExerciseNavbar from '@/components/mobile/exerciseNavbar';
+import RegisterSW from '@/components/providers/service-worker';
 
 const robotoFlex = Roboto_Flex({
   subsets: ['latin'],
@@ -16,6 +17,7 @@ const robotoFlex = Roboto_Flex({
 
 export const metadata: Metadata = {
   metadataBase: new URL('https://logicola.org'),
+  themeColor: '#ffffff',
   title: 'Logicola',
   description:
     'LogiCola is a program to help students learn logic. This is a web version of the original software built by the late Professor Harry Gensler.',
@@ -58,6 +60,10 @@ export default function RootLayout({
 }>) {
   return (
     <html lang='en'>
+      <head>
+        <meta name='theme-color' content='#FFFFFF' />
+        <link rel='manifest' href='/manifest.json' />
+      </head>
       <CSPostHogProvider>
         <body
           className={`antialiased min-h-screen bg-white text-primaryColor ${robotoFlex.className}`}
@@ -67,6 +73,7 @@ export default function RootLayout({
 
           <Navbar />
           <main className={`flex`}>{children}</main>
+          <RegisterSW />
           <Footer />
         </body>
       </CSPostHogProvider>
diff --git a/components/providers/service-worker.tsx b/components/providers/service-worker.tsx
@@ -0,0 +1,16 @@
+// You could create a new component like RegisterSW.tsx
+'use client';
+import { useEffect } from 'react';
+
+export default function RegisterSW() {
+  useEffect(() => {
+    if ('serviceWorker' in navigator) {
+      navigator.serviceWorker
+        .register('/sw.js')
+        .then((registration) => console.log('SW registered:', registration))
+        .catch((error) => console.log('SW registration failed:', error));
+    }
+  }, []);
+
+  return null;
+}
diff --git a/public/icon-192.png b/public/icon-192.png
diff --git a/public/icon-512.png b/public/icon-512.png
diff --git a/public/manifest.json b/public/manifest.json
@@ -0,0 +1,23 @@
+{
+    "name": "LogiCola",
+    "short_name": "LogiCola",
+    "description": "LogiCola helps you learn logic.",
+    "start_url": "/",
+    "display": "standalone",
+    "background_color": "#ffffff",
+    "theme_color": "#ffffff",
+    "orientation": "portrait",
+    "icons": [
+        {
+            "src": "/icon-192.png",
+            "sizes": "192x192",
+            "type": "image/png",
+            "purpose": "any maskable"
+        },
+        {
+            "src": "/icon-512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ]
+}
diff --git a/public/sw.js b/public/sw.js
@@ -0,0 +1,28 @@
+const CACHE_NAME = 'logicola-cache-v1';
+const urlsToCache = [
+  '/',
+  '/manifest.json',
+  '/icon.svg',
+  // Add other static assets like
+  '/globals.css',
+  // Add any other pages/routes you want to cache
+];
+
+self.addEventListener('install', (event) => {
+  event.waitUntil(
+    caches.open(CACHE_NAME)
+      .then((cache) => {
+        return cache.addAll(urlsToCache);
+      })
+  );
+});
+
+self.addEventListener('fetch', (event) => {
+  event.respondWith(
+    caches.match(event.request)
+      .then((response) => {
+        // Return cached version or fetch from network
+        return response || fetch(event.request);
+      })
+  );
+});
