lewxdev · lewxdev · Aug 27, 2024 · Aug 27, 2024 · Aug 27, 2024 · Aug 27, 2024
diff --git a/.gitignore b/.gitignore
@@ -49,6 +49,10 @@ report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
 .next
 out
 
+# serwist
+public/sw*
+public/swe-worker*
+
 # typescript
 *.tsbuildinfo
 next-env.d.ts
diff --git a/app/components/header.tsx b/app/components/header.tsx
@@ -3,6 +3,7 @@
 import { Percent, UsersIcon } from "lucide-react";
 import { ThemeToggle } from "@/components/theme-toggle";
 import { useSocketEvent } from "@/hooks/use-socket-event";
+import { APP_NAME } from "@/utils/const";
 
 export function Header() {
   const [clientsCount] = useSocketEvent("clientsCount");
@@ -12,7 +13,7 @@ export function Header() {
     <header className="flex w-[min(var(--field-size),100%)] justify-between px-4 py-1">
       <div className="flex flex-row gap-6">
         <h1 className="pr-4 text-4xl font-extrabold uppercase italic">
-          mmmines!
+          {APP_NAME}
         </h1>
         <div className="flex items-center gap-2">
           <span>{clientsCount ?? "⋯"}</span>

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,33 +1,50 @@
-import type { Metadata } from "next";
+import type { Metadata, Viewport } from "next";
 import { GeistSans } from "geist/font/sans";
 import { ThemeProvider } from "next-themes";
 import { Header } from "@/components/header";
 import { SocketProvider } from "@/components/socket-provider";
+import {
+  APP_DESCRIPTION,
+  APP_NAME,
+  APP_THEME_COLOR_DARK,
+  APP_THEME_COLOR_LIGHT,
+} from "@/utils/const";
 import "@/globals.css";
 
-const title = "mmmines!";
-const description = "an endless, massive multiplayer minesweeper game";
+const APP_URL = new URL(process.env["BASE_URL"]!);
 
 export const metadata: Metadata = {
-  title,
-  description,
+  title: APP_NAME,
+  description: APP_DESCRIPTION,
   icons: {
     icon: [
       { url: "/icon-light.svg" },
       { url: "/icon-dark.svg", media: "(prefers-color-scheme: dark)" },
     ],
   },
-  metadataBase: new URL(process.env["BASE_URL"]!),
+  appleWebApp: {
+    capable: true,
+    title: APP_NAME,
+    statusBarStyle: "default",
+  },
+  metadataBase: APP_URL,
   openGraph: {
-    title,
-    description,
-    siteName: title,
-    url: "https://mmmines.fly.dev",
+    title: APP_NAME,
+    description: APP_DESCRIPTION,
+    siteName: APP_NAME,
+    url: APP_URL,
     locale: "en_US",
     type: "website",
   },
 };
 
+export const viewport: Viewport = {
+  themeColor: [
+    { color: APP_THEME_COLOR_LIGHT, media: "(prefers-color-scheme: light)" },
+    { color: APP_THEME_COLOR_DARK, media: "(prefers-color-scheme: dark)" },
+  ],
+};
+
 export default function RootLayout(props: Readonly<React.PropsWithChildren>) {
   return (
     <html lang="en" className={GeistSans.variable} suppressHydrationWarning>

diff --git a/app/manifest.ts b/app/manifest.ts
@@ -0,0 +1,30 @@
+import type { MetadataRoute } from "next";
+import { APP_NAME, APP_THEME_COLOR_DARK } from "./utils/const";
+
+export default function manifest(): MetadataRoute.Manifest {
+  return {
+    name: APP_NAME,
+    short_name: APP_NAME,
+    theme_color: APP_THEME_COLOR_DARK,
+    background_color: APP_THEME_COLOR_DARK,
+    display: "standalone",
+    orientation: "any",
+    scope: "/",
+    start_url: "/",
+    icons: [
+      {
+        src: "icon-maskable.svg",
+        sizes: "any",
+        type: "image/svg+xml",
+        // @ts-expect-error: `purpose` only supports individual values
+        purpose: "any maskable",
+      },
+      {
+        src: "icon-monochrome.svg",
+        sizes: "any",
+        type: "image/svg+xml",
+        purpose: "monochrome",
+      },
+    ],
+  };
+}
diff --git a/app/sw.ts b/app/sw.ts
@@ -0,0 +1,29 @@
+/// <reference lib="webworker" />
+/// <reference types="@serwist/next/typings" />
+
+// see: https://serwist.pages.dev/docs/next/getting-started#writing-a-sw
+
+import { defaultCache } from "@serwist/next/worker";
+import { Serwist, type PrecacheEntry, type SerwistGlobalConfig } from "serwist";
+
+// This declares the value of `injectionPoint` to TypeScript.
+// `injectionPoint` is the string that will be replaced by the
+// actual precache manifest. By default, this string is set to
+// `"self.__SW_MANIFEST"`.
+declare global {
+  interface WorkerGlobalScope extends SerwistGlobalConfig {
+    __SW_MANIFEST: (PrecacheEntry | string)[] | undefined;
+  }
+}
+
+declare const self: ServiceWorkerGlobalScope;
+
+const serwist = new Serwist({
+  precacheEntries: self.__SW_MANIFEST!,
+  skipWaiting: true,
+  clientsClaim: true,
+  navigationPreload: true,
+  runtimeCaching: defaultCache,
+});
+
+serwist.addEventListeners();
diff --git a/app/utils/const.ts b/app/utils/const.ts
@@ -0,0 +1,5 @@
+export const APP_NAME = "mmmines!";
+export const APP_DESCRIPTION =
+  "an endless, massive multiplayer minesweeper game";
+export const APP_THEME_COLOR_DARK = "#020617";
+export const APP_THEME_COLOR_LIGHT = "#ffffff";
diff --git a/next.config.mjs b/next.config.mjs
@@ -1,4 +1,8 @@
-/** @type {import('next').NextConfig} */
-const nextConfig = {};
+import withSerwistInit from "@serwist/next";
 
-export default nextConfig;
+const withSerwist = withSerwistInit({
+  swSrc: "app/sw.ts",
+  swDest: "public/sw.js",
+});
+
+export default withSerwist();