ADD PWA

public/manifest.webmanifest

@@ -0,0 +1,44 @@
+{
+  "id": "/",
+  "name": "2024届612班纪念网站",
+  "short_name": "612班",
+  "description": "保存2024届612班共同走过的校园时光，也记录毕业后的我们。",
+  "lang": "zh-CN",
+  "start_url": "/",
+  "scope": "/",
+  "display": "standalone",
+  "background_color": "#fffdf7",
+  "theme_color": "#376d5a",
+  "categories": ["education", "social"],
+  "icons": [
+    {
+      "src": "/icons/pwa-192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "/icons/pwa-512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "any maskable"
+    }
+  ],
+  "shortcuts": [
+    {
+      "name": "三年时间线",
+      "short_name": "时间线",
+      "url": "/timeline/"
+    },
+    {
+      "name": "照片墙",
+      "short_name": "照片",
+      "url": "/gallery/"
+    },
+    {
+      "name": "如今的我们",
+      "short_name": "同学",
+      "url": "/people/"
+    }
+  ]
+}

public/sw.js

@@ -0,0 +1,103 @@
+const CACHE_PREFIX = "class-612-pwa";
+const CACHE_VERSION = "dev"; // __CACHE_VERSION__
+const PRECACHE_CACHE = `${CACHE_PREFIX}-precache-${CACHE_VERSION}`;
+const RUNTIME_CACHE = `${CACHE_PREFIX}-runtime-${CACHE_VERSION}`;
+
+const PRECACHE_URLS = [
+  /* __PRECACHE_URLS_START__ */
+  "/",
+  "/offline/",
+  "/manifest.webmanifest",
+  "/icons/pwa-192.png",
+  "/icons/pwa-512.png",
+  "/icons/apple-touch-icon.png"
+  /* __PRECACHE_URLS_END__ */
+];
+
+self.addEventListener("install", (event) => {
+  event.waitUntil(
+    caches
+      .open(PRECACHE_CACHE)
+      .then((cache) => cache.addAll(PRECACHE_URLS))
+      .then(() => self.skipWaiting())
+  );
+});
+
+self.addEventListener("activate", (event) => {
+  event.waitUntil(
+    caches
+      .keys()
+      .then((cacheNames) =>
+        Promise.all(
+          cacheNames
+            .filter(
+              (cacheName) =>
+                cacheName.startsWith(`${CACHE_PREFIX}-`) &&
+                cacheName !== PRECACHE_CACHE &&
+                cacheName !== RUNTIME_CACHE
+            )
+            .map((cacheName) => caches.delete(cacheName))
+        )
+      )
+      .then(() => self.clients.claim())
+  );
+});
+
+const cacheSuccessfulResponse = async (cacheName, request, response) => {
+  if (response.ok && response.type === "basic") {
+    const cache = await caches.open(cacheName);
+    await cache.put(request, response.clone());
+  }
+
+  return response;
+};
+
+const networkFirstNavigation = async (request) => {
+  try {
+    const response = await fetch(request);
+    return cacheSuccessfulResponse(RUNTIME_CACHE, request, response);
+  } catch {
+    return (
+      (await caches.match(request, { ignoreSearch: true })) ??
+      (await caches.match("/offline/")) ??
+      (await caches.match("/"))
+    );
+  }
+};
+
+const cacheFirst = async (request) => {
+  const cachedResponse = await caches.match(request, { ignoreSearch: true });
+
+  if (cachedResponse) {
+    return cachedResponse;
+  }
+
+  const response = await fetch(request);
+  return cacheSuccessfulResponse(RUNTIME_CACHE, request, response);
+};
+
+self.addEventListener("fetch", (event) => {
+  const { request } = event;
+
+  if (request.method !== "GET" || request.headers.has("range")) {
+    return;
+  }
+
+  const url = new URL(request.url);
+
+  if (url.origin !== self.location.origin) {
+    return;
+  }
+
+  if (request.mode === "navigate") {
+    event.respondWith(networkFirstNavigation(request));
+    return;
+  }
+
+  if (
+    ["style", "script", "font", "image"].includes(request.destination) ||
+    url.pathname === "/manifest.webmanifest"
+  ) {
+    event.respondWith(cacheFirst(request));
+  }
+});