Merge pull request #23 from bishshi/codex/pwa

ADD PWA

src/layouts/BaseLayout.astro

@@ -26,7 +26,17 @@ const buildTime = new Intl.DateTimeFormat("zh-CN", {
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="referrer" content="no-referrer" />
+    <meta name="description" content={site.subtitle} />
+    <meta name="theme-color" content="#376d5a" />
+    <meta name="application-name" content={site.className} />
+    <meta name="mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="default" />
+    <meta name="apple-mobile-web-app-title" content={site.className} />
     <title>{title}</title>
+    <link rel="manifest" href="/manifest.webmanifest" />
+    <link rel="icon" type="image/png" sizes="192x192" href="/icons/pwa-192.png" />
+    <link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon.png" />
     <link
       rel="stylesheet"
       href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.css"
@@ -127,5 +137,14 @@ const buildTime = new Intl.DateTimeFormat("zh-CN", {
         dragToClose: true
       });
     </script>
+    <script is:inline>
+      if ("serviceWorker" in navigator && window.isSecureContext) {
+        window.addEventListener("load", () => {
+          navigator.serviceWorker.register("/sw.js", { scope: "/" }).catch((error) => {
+            console.warn("Service Worker 注册失败", error);
+          });
+        });
+      }
+    </script>
   </body>
 </html>

src/pages/offline.astro

@@ -0,0 +1,102 @@
+---
+import BaseLayout from "../layouts/BaseLayout.astro";
+import { site } from "../data/site";
+---
+
+<BaseLayout title={`暂时离线 · ${site.className}`}>
+  <main class="offline-page">
+    <section class="offline-card" aria-labelledby="offline-title">
+      <p class="offline-mark" aria-hidden="true">612</p>
+      <p class="eyebrow">当前处于离线状态</p>
+      <h1 id="offline-title">记忆还在，只是网络暂时走远了。</h1>
+      <p>
+        已经访问过的页面和照片仍可继续浏览；重新联网后刷新页面，就能看到最新内容。
+      </p>
+      <div class="offline-actions">
+        <button type="button" onclick="window.location.reload()">重新连接</button>
+        <a href="/">返回首页</a>
+      </div>
+    </section>
+  </main>
+</BaseLayout>
+
+<style>
+  .offline-page {
+    min-height: 100vh;
+    display: grid;
+    place-items: center;
+    padding: 96px 20px 48px;
+    background:
+      radial-gradient(circle at 15% 18%, rgba(232, 168, 76, 0.2), transparent 24%),
+      linear-gradient(145deg, #eef4e9, #fffdf7 55%, #f6f0df);
+  }
+
+  .offline-card {
+    width: min(680px, 100%);
+    padding: clamp(30px, 7vw, 64px);
+    border: 1px solid rgba(31, 43, 42, 0.14);
+    border-radius: 24px;
+    background: rgba(255, 253, 247, 0.92);
+    box-shadow: 0 24px 70px rgba(39, 55, 52, 0.14);
+  }
+
+  .offline-mark {
+    width: 76px;
+    height: 76px;
+    display: grid;
+    place-items: center;
+    margin: 0 0 28px;
+    border-radius: 20px;
+    background: #376d5a;
+    color: #fffdf7;
+    font-size: 26px;
+    font-weight: 900;
+  }
+
+  .offline-card .eyebrow {
+    color: #c96452;
+  }
+
+  .offline-card h1 {
+    max-width: 580px;
+    color: #1f2b2a;
+    font-size: clamp(34px, 7vw, 58px);
+  }
+
+  .offline-card > p:not(.offline-mark, .eyebrow) {
+    margin: 24px 0 0;
+    color: #62706f;
+    font-size: 17px;
+  }
+
+  .offline-actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 12px;
+    margin-top: 32px;
+  }
+
+  .offline-actions button,
+  .offline-actions a {
+    min-height: 44px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 10px 18px;
+    border: 1px solid #376d5a;
+    border-radius: 8px;
+    font: inherit;
+    font-weight: 800;
+    cursor: pointer;
+  }
+
+  .offline-actions button {
+    background: #376d5a;
+    color: #fffdf7;
+  }
+
+  .offline-actions a {
+    background: transparent;
+    color: #376d5a;
+  }
+</style>