init project

static/favicon.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 640 640">
+    <!-- Font Awesome Free v7.1.0 by @fontawesome - https://fontawesome.com License -
+    https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc. -->
+    <path fill="#4FC3F7"
+        d="M32 400C32 479.5 96.5 544 176 544L480 544C550.7 544 608 486.7 608 416C608 364.4 577.5 319.9 533.5 299.7C540.2 286.6 544 271.7 544 256C544 203 501 160 448 160C430.3 160 413.8 164.8 399.6 173.1C375.5 127.3 327.4 96 272 96C192.5 96 128 160.5 128 240C128 248 128.7 255.9 129.9 263.5C73 282.7 32 336.6 32 400z" />
+</svg>

static/sw.js

@@ -0,0 +1,37 @@
+const CACHE_NAME = 'thumbnail-cache-v1';
+const THUMB_URL_PATTERN = /^\/thumb\//;
+
+self.addEventListener('install', (event) => {
+  self.skipWaiting();
+});
+
+self.addEventListener('activate', (event) => {
+  event.waitUntil(clients.claim());
+});
+
+self.addEventListener('fetch', (event) => {
+  const { request } = event;
+  const url = new URL(request.url);
+  
+  // 只缓存缩略图请求
+  if (THUMB_URL_PATTERN.test(url.pathname)) {
+    event.respondWith(
+      caches.open(CACHE_NAME).then((cache) => {
+        return cache.match(request).then((response) => {
+          // 如果缓存中有响应，直接返回
+          if (response) {
+            return response;
+          }
+          
+          // 否则发起网络请求，并将响应添加到缓存中
+          return fetch(request).then((networkResponse) => {
+            // 复制响应，因为流只能读取一次
+            const responseToCache = networkResponse.clone();
+            cache.put(request, responseToCache);
+            return networkResponse;
+          });
+        });
+      })
+    );
+  }
+});

static/thumb_placeholder.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="320" height="180" viewBox="0 0 320 180">
+    <rect width="320" height="180" fill="#e9ecef" />
+    <g fill="#adb5bd" font-family="Arial, Helvetica, sans-serif" font-size="14">
+        <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle">No preview</text>
+    </g>
+</svg>