From 73c31ffb2afe87289a2dc7df1169feedaf81b179 Mon Sep 17 00:00:00 2001
From: wait4xx <X@alumni.nudt.edu.cn>
Date: Sun, 25 Oct 2026 22:45:18 +0800
Subject: [PATCH] =?UTF-8?q?feat(pwa):=20=E7=9E=AC=E9=97=B4=E9=A1=B5?=
 =?UTF-8?q?=E5=AE=89=E8=A3=85=E5=BC=95=E5=AF=BC=E4=B8=8E=E5=90=AF=E5=8A=A8?=
 =?UTF-8?q?=E5=BF=AB=E6=8D=B7=E6=96=B9=E5=BC=8F=EF=BC=88=E8=BD=A6=E9=81=93?=
 =?UTF-8?q?=20H=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- manifest shortcuts：瞬间直达（/moments/ + 复用 192 图标；lang
  zh 单份中文）
- 安装 CTA：时间线后灰阶虚线小条+ghost 按钮；beforeinstallprompt
  模块级立即绑定（跨软导航存活），三态=可装显示/已装
  （display-mode:standalone 或 iOS standalone）永不显/不支持默认
  hidden；prompt 后 accepted/appinstalled 清引用；文案组件内
  locale 双份
- SW 复核零改动：PRECACHE 已含双轨瞬间、IMMUTABLE 覆盖
  /_astro/ 瞬间图片管线、NEVER_CACHE 拦 pv 走 '–' 降级——三处
  现成正确；离线实证：断网瞬间页 200+时间线完整+pv 降级；图片
  0/0 为数据现状（3 条瞬间均无图），同管线文章页图片离线 1/1
  等价实证成立

车道：op-artalk（自验 11/11）；收编验收：CTA hidden 态+离线 200+
标题+manifest shortcuts 解析实测（首轮探针 context API 误用致假
FAIL，selector 复核全过）

验证: pnpm astro build exit 0；E2E 33/33；断网瞬间页 playwright
      实测 200

Spec: none (PWA 增强：shortcuts+CTA+离线实证，车道级交付)

Co-authored-by: GLM-5.3
---
 public/manifest.webmanifest            |  9 ++++
 src/components/pages/MomentsPage.astro | 69 ++++++++++++++++++++++++++
 2 files changed, 78 insertions(+)

diff --git a/public/manifest.webmanifest b/public/manifest.webmanifest
index ff8dda8..1c2ad7e 100644
--- a/public/manifest.webmanifest
+++ b/public/manifest.webmanifest
@@ -12,5 +12,14 @@
     { "src": "/icons/icon-192.png", "sizes": "192x192", "type": "image/png" },
     { "src": "/icons/icon-512.png", "sizes": "512x512", "type": "image/png" },
     { "src": "/icons/icon-maskable-512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
+  ],
+  "shortcuts": [
+    {
+      "name": "瞬间",
+      "short_name": "瞬间",
+      "description": "离线也能刷的瞬间时间线",
+      "url": "/moments/",
+      "icons": [{ "src": "/icons/icon-192.png", "sizes": "192x192" }]
+    }
   ]
 }
diff --git a/src/components/pages/MomentsPage.astro b/src/components/pages/MomentsPage.astro
index a536e05..44fadd8 100644
--- a/src/components/pages/MomentsPage.astro
+++ b/src/components/pages/MomentsPage.astro
@@ -56,6 +56,14 @@ const iso = (d: Date) => d.toISOString();
       </li>
     ))}
   </ol>
+
+  <!-- 安装引导（disclosure 小条）：仅浏览器明确可装且未安装时现形，克制不打扰 -->
+  <div class="install-cta" id="install-cta" hidden>
+    <span>{locale === 'en' ? 'Add to Home Screen — moments work offline' : '装到主屏，离线也能刷瞬间'}</span>
+    <button type="button" id="install-btn" class="install-btn">
+      {locale === 'en' ? 'Install' : '安装'}
+    </button>
+  </div>
 </BaseLayout>
 
 <script>
@@ -103,9 +111,46 @@ const iso = (d: Date) => d.toISOString();
   document.addEventListener('astro:page-load', () => {
     void bumpPv();
     armAnim();
+    refreshInstallCta();
   });
   void bumpPv();
   armAnim();
+
+  // —— PWA 安装引导：beforeinstallprompt 早在页面加载初期触发，
+  //     故模块级立即绑定存事件，page-load 只负责刷新 UI 显隐 ——
+  let deferredPrompt: Event & { prompt?: () => Promise<void>; userChoice?: Promise<{ outcome: string }> } | null = null;
+  document.addEventListener('beforeinstallprompt', (e) => {
+    e.preventDefault();
+    deferredPrompt = e as typeof deferredPrompt;
+    refreshInstallCta();
+  });
+  document.addEventListener('appinstalled', () => {
+    deferredPrompt = null;
+    refreshInstallCta();
+  });
+  const isInstalled = () =>
+    matchMedia('(display-mode: standalone)').matches ||
+    (navigator as Navigator & { standalone?: boolean }).standalone === true;
+  function refreshInstallCta() {
+    const cta = document.getElementById('install-cta');
+    if (!cta) return;
+    cta.hidden = !(deferredPrompt && !isInstalled());
+  }
+  document.addEventListener('click', (e) => {
+    if ((e.target as HTMLElement)?.id !== 'install-btn') return;
+    if (!deferredPrompt) return;
+    void (async () => {
+      try {
+        await deferredPrompt?.prompt?.();
+        const choice = await deferredPrompt?.userChoice;
+        if (choice?.outcome === 'accepted') {
+          deferredPrompt = null;
+          refreshInstallCta();
+        }
+      } catch { /* 用户关闭安装框：保留事件，小条仍在 */ }
+    })();
+  });
+  refreshInstallCta();
 </script>
 
 <style>
@@ -201,6 +246,30 @@ const iso = (d: Date) => d.toISOString();
     .mom-card { padding: var(--space-2) var(--space-3); }
     .mom-fig { max-width: 100%; }
   }
+  .install-cta {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--space-2);
+    margin-top: var(--space-5);
+    padding: var(--space-3);
+    border: 1px dashed var(--line);
+    border-radius: 8px;
+    font-size: 13px;
+    color: var(--ink-3);
+  }
+  .install-btn {
+    font-family: var(--font-mono);
+    font-size: 12px;
+    color: var(--ink-2);
+    background: var(--bg-soft);
+    border: 1px solid var(--line);
+    border-radius: 6px;
+    padding: 4px 12px;
+    cursor: pointer;
+    transition: border-color var(--dur) var(--ease);
+  }
+  .install-btn:hover { border-color: var(--accent); }
   .pv-line {
     font-family: var(--font-mono);
     font-size: 12px;