sorosave-protocol · yuliuyi717-ux · Feb 27, 2026
diff --git a/next.config.js b/next.config.js
@@ -1,6 +1,32 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
+  async headers() {
+    return [
+      {
+        source: "/sw.js",
+        headers: [
+          {
+            key: "Cache-Control",
+            value: "no-cache, no-store, must-revalidate",
+          },
+          {
+            key: "Service-Worker-Allowed",
+            value: "/",
+          },
+        ],
+      },
+      {
+        source: "/manifest.json",
+        headers: [
+          {
+            key: "Content-Type",
+            value: "application/manifest+json",
+          },
+        ],
+      },
+    ];
+  },
   webpack: (config) => {
     config.resolve.fallback = {
       ...config.resolve.fallback,

diff --git a/public/icons/icon-192.svg b/public/icons/icon-192.svg
diff --git a/public/icons/icon-512.svg b/public/icons/icon-512.svg
diff --git a/public/manifest.json b/public/manifest.json
@@ -0,0 +1,24 @@
+{
+  "name": "SoroSave",
+  "short_name": "SoroSave",
+  "description": "Decentralized rotating savings protocol on Soroban.",
+  "start_url": "/",
+  "scope": "/",
+  "display": "standalone",
+  "background_color": "#f9fafb",
+  "theme_color": "#16a34a",
+  "icons": [
+    {
+      "src": "/icons/icon-192.svg",
+      "sizes": "192x192",
+      "type": "image/svg+xml",
+      "purpose": "any"
+    },
+    {
+      "src": "/icons/icon-512.svg",
+      "sizes": "512x512",
+      "type": "image/svg+xml",
+      "purpose": "any"
+    }
+  ]
+}
diff --git a/public/sw.js b/public/sw.js
@@ -0,0 +1,67 @@
+const STATIC_CACHE = "sorosave-static-v1";
+const RUNTIME_CACHE = "sorosave-runtime-v1";
+const STATIC_ASSETS = ["/", "/manifest.json"];
+
+self.addEventListener("install", (event) => {
+  event.waitUntil(
+    caches.open(STATIC_CACHE).then((cache) => cache.addAll(STATIC_ASSETS))
+  );
+  self.skipWaiting();
+});
+
+self.addEventListener("activate", (event) => {
+  event.waitUntil(
+    caches.keys().then((keys) =>
+      Promise.all(
+        keys
+          .filter((key) => key !== STATIC_CACHE && key !== RUNTIME_CACHE)
+          .map((key) => caches.delete(key))
+      )
+    )
+  );
+  self.clients.claim();
+});
+
+self.addEventListener("fetch", (event) => {
+  const { request } = event;
+
+  if (request.method !== "GET") {
+    return;
+  }
+
+  if (request.mode === "navigate") {
+    event.respondWith(
+      fetch(request)
+        .then((response) => {
+          const copy = response.clone();
+          caches.open(RUNTIME_CACHE).then((cache) => cache.put(request, copy));
+          return response;
+        })
+        .catch(async () => {
+          const cached = await caches.match(request);
+          return cached || caches.match("/");
+        })
+    );
+    return;
+  }
+
+  if (["style", "script", "image", "font"].includes(request.destination)) {
+    event.respondWith(
+      caches.match(request).then((cached) => {
+        if (cached) {
+          return cached;
+        }
+
+        return fetch(request).then((response) => {
+          if (!response || response.status !== 200 || response.type === "opaque") {
+            return response;
+          }
+
+          const copy = response.clone();
+          caches.open(RUNTIME_CACHE).then((cache) => cache.put(request, copy));
+          return response;
+        });
+      })
+    );
+  }
+});
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,11 +1,19 @@
 import type { Metadata } from "next";
 import { Providers } from "./providers";
+import { InstallPrompt } from "@/components/InstallPrompt";
 import "./globals.css";
 
 export const metadata: Metadata = {
   title: "SoroSave — Decentralized Group Savings",
   description:
     "A decentralized rotating savings protocol built on Soroban. Create or join savings groups, contribute each cycle, and receive the pot when it's your turn.",
+  manifest: "/manifest.json",
+  themeColor: "#16a34a",
+  appleWebApp: {
+    capable: true,
+    statusBarStyle: "default",
+    title: "SoroSave",
+  },
 };
 
 export default function RootLayout({
@@ -17,6 +25,7 @@ export default function RootLayout({
     <html lang="en">
       <body className="min-h-screen bg-gray-50">
         <Providers>{children}</Providers>
+        <InstallPrompt />
       </body>
     </html>
   );

diff --git a/src/components/InstallPrompt.tsx b/src/components/InstallPrompt.tsx
@@ -0,0 +1,83 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+interface BeforeInstallPromptEvent extends Event {
+  prompt: () => Promise<void>;
+  userChoice: Promise<{ outcome: "accepted" | "dismissed"; platform: string }>;
+}
+
+export function InstallPrompt() {
+  const [deferredPrompt, setDeferredPrompt] =
+    useState<BeforeInstallPromptEvent | null>(null);
+  const [hidden, setHidden] = useState(false);
+
+  useEffect(() => {
+    if ("serviceWorker" in navigator) {
+      window.addEventListener("load", () => {
+        navigator.serviceWorker.register("/sw.js").catch((error) => {
+          console.error("Service worker registration failed", error);
+        });
+      });
+    }
+
+    const onBeforeInstallPrompt = (event: Event) => {
+      event.preventDefault();
+      setDeferredPrompt(event as BeforeInstallPromptEvent);
+      setHidden(false);
+    };
+
+    const onAppInstalled = () => {
+      setDeferredPrompt(null);
+      setHidden(true);
+    };
+
+    window.addEventListener("beforeinstallprompt", onBeforeInstallPrompt);
+    window.addEventListener("appinstalled", onAppInstalled);
+
+    return () => {
+      window.removeEventListener("beforeinstallprompt", onBeforeInstallPrompt);
+      window.removeEventListener("appinstalled", onAppInstalled);
+    };
+  }, []);
+
+  if (!deferredPrompt || hidden) {
+    return null;
+  }
+
+  const handleInstall = async () => {
+    await deferredPrompt.prompt();
+    const choice = await deferredPrompt.userChoice;
+    if (choice.outcome === "accepted") {
+      setDeferredPrompt(null);
+      setHidden(true);
+    }
+  };
+
+  return (
+    <div className="fixed inset-x-4 bottom-4 z-50 rounded-xl border border-primary-300 bg-white/95 p-4 shadow-xl backdrop-blur">
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+        <div>
+          <p className="font-semibold text-gray-900">Install SoroSave</p>
+          <p className="text-sm text-gray-600">
+            Add SoroSave to your home screen for a faster app-like experience.
+          </p>
+        </div>
+        <div className="flex gap-2">
+          <button
+            onClick={() => setHidden(true)}
+            className="rounded-lg border border-gray-300 px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100"
+          >
+            Not now
+          </button>
+          <button
+            onClick={handleInstall}
+            className="rounded-lg bg-primary-600 px-3 py-2 text-sm font-medium text-white hover:bg-primary-700"
+          >
+            Install
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}