serviceworker: use serwist

Also introduce placeholder temp offline page.

TODO: impl bg sync etc

.gitignore

@@ -36,4 +36,8 @@ next-env.d.ts
 
 .env*
 
-/postgres
+/postgres
+
+# Serwist
+public/sw*
+public/swe-worker*

app/sw.ts

@@ -0,0 +1,76 @@
+import { defaultCache } from "@serwist/next/worker";
+import type { PrecacheEntry, SerwistGlobalConfig } from "serwist";
+import { Serwist } from "serwist";
+
+declare global {
+  interface WorkerGlobalScope extends SerwistGlobalConfig {
+    // Change this attribute's name to your `injectionPoint`.
+    // `injectionPoint` is an InjectManifest option.
+    // See https://serwist.pages.dev/docs/build/configuring
+    __SW_MANIFEST: (PrecacheEntry | string)[] | undefined;
+  }
+}
+
+// @ts-expect-error
+declare const self: ServiceWorkerGlobalScope;
+
+const serwist = new Serwist({
+  precacheEntries: self.__SW_MANIFEST,
+  skipWaiting: true,
+  clientsClaim: true,
+  navigationPreload: true,
+  runtimeCaching: defaultCache,
+  fallbacks: {
+    entries: [
+      {
+        url: "/~offline",
+        matcher({ request }) {
+          return request.destination === "document";
+        },
+      },
+    ],
+  },
+});
+
+serwist.addEventListeners();
+
+/* Push Notifs */
+self.addEventListener("push", function (event: any) {
+  if (event.data) {
+    let body;
+    let icon;
+    let title;
+    try {
+      const data = event.data.json();
+      body = data.body;
+      icon = data.icon || "/icon.png";
+      title = data.title;
+    } catch (e) {
+      console.log("clearly not a JSON notif");
+      body = "";
+      icon = "/icon.png";
+      title = event.data;
+    }
+
+    const options = {
+      body: body,
+      icon: icon,
+      badge: "/icon.png",
+      vibrate: [100, 50, 100],
+      data: {
+        dateOfArrival: Date.now(),
+        primaryKey: "2",
+      },
+    };
+    event.waitUntil(self.registration.showNotification(title, options));
+  }
+});
+
+self.addEventListener("notificationclick", function (event: any) {
+  console.log("Notification click received.");
+  event.notification.close();
+  event.waitUntil(
+    //@ts-ignore
+    clients.openWindow("https://schedulerv2.sccs.swarthmore.edu/")
+  );
+});

app/~offline/page.tsx

@@ -0,0 +1,14 @@
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Offline",
+};
+
+export default function Page() {
+  return (
+    <>
+      <h1>This is offline fallback page</h1>
+      <h2>When offline, any page route will fallback to this page</h2>
+    </>
+  );
+}

next.config.mjs

@@ -0,0 +1,23 @@
+// @ts-check
+import withSerwistInit from "@serwist/next";
+
+// You may want to use a more robust revision to cache
+// files more efficiently.
+// A viable option is `git rev-parse HEAD`.
+const revision = crypto.randomUUID();
+
+const withSerwist = withSerwistInit({
+  cacheOnNavigation: true,
+  swSrc: "app/sw.ts",
+  swDest: "public/sw.js",
+  additionalPrecacheEntries: [{ url: "/~offline", revision }],
+});
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  images: {
+    domains: ["www.swarthmore.edu", "cdn.vectorstock.com"],
+  },
+};
+
+export default withSerwist(nextConfig);