Add PWA Support for Web App

apps/web/.gitignore

@@ -1,3 +1,14 @@
 
 # Sentry Config File
 .env.sentry-build-plugin
+
+# next-pwa
+/public/sw.js
+/public/workbox-*.js
+/public/worker-*.js
+/public/fallback-*.js
+/public/precache.*.*.js.map
+/public/sw.js.map
+/public/workbox-*.js.map
+/public/worker-*.js.map
+/public/fallback-*.js

apps/web/app/layout.tsx

@@ -59,6 +59,7 @@ export const metadata: Metadata = {
 			},
 		],
 	},
+	manifest: "/manifest.webmanifest",
 };
 
 export default function RootLayout({

apps/web/next.config.mjs

@@ -1,6 +1,6 @@
 import MillionLint from "@million/lint";
 import { setupDevPlatform } from "@cloudflare/next-on-pages/next-dev";
-
+import pwa from "next-pwa";
 /** @type {import('next').NextConfig} */
 const baseNextConfig = {
 	transpilePackages: ["@repo/ui"],
@@ -13,15 +13,22 @@ const baseNextConfig = {
 	},
 };
 
-let selectedCofig = baseNextConfig;
+const withPWA = pwa({
+	dest: "public",
+	disable: process.env.NODE_ENV === "development",
+	register: true,
+	skipWaiting: true,
+});
+
+let selectedConfig = baseNextConfig;
 
 if (process.env.NODE_ENV === "development") {
-	selectedCofig = MillionLint.next({
+	selectedConfig = MillionLint.next({
 		rsc: true,
 	})(baseNextConfig);
 }
 
-export default selectedCofig;
+export default withPWA(selectedConfig);
 
 // we only need to use the utility during development so we can check NODE_ENV
 // (note: this check is recommended but completely optional)

apps/web/package.json

@@ -28,6 +28,7 @@
 		"lowlight": "^3.1.0",
 		"million": "^3.1.6",
 		"next": "^14.1.1",
+		"next-pwa": "^5.6.0",
 		"novel": "^0.4.2",
 		"nuqs": "^1.17.4",
 		"posthog-js": "^1.154.5",

apps/web/public/manifest.webmanifest

@@ -0,0 +1,21 @@
+{
+	"name": "Supermemory - your second brain.",
+	"short_name": "Supermemory",
+	"icons": [
+		{
+			"src": "/icons/android-chrome-192x192.png",
+			"sizes": "192x192",
+			"type": "image/png"
+		},
+		{
+			"src": "/icons/android-chrome-512x512.png",
+			"sizes": "512x512",
+			"type": "image/png"
+		}
+	],
+	"theme_color": "#ffffff",
+	"background_color": "#ffffff",
+	"scope": "/",
+	"start_url": "/",
+	"display": "standalone"
+}