PWA

src/components/PwaPrompt.astro

@@ -0,0 +1,11 @@
+<aside class="pwa-toast" data-pwa-toast hidden role="status" aria-live="polite">
+  <div class="pwa-toast-icon" aria-hidden="true"><i class="fa-solid fa-download"></i></div>
+  <div class="pwa-toast-copy">
+    <strong data-pwa-title>PWA 提示</strong>
+    <p data-pwa-message></p>
+  </div>
+  <div class="pwa-toast-actions">
+    <button class="pwa-toast-primary" type="button" data-pwa-primary>确定</button>
+    <button class="pwa-toast-close" type="button" data-pwa-close aria-label="关闭提示">稍后</button>
+  </div>
+</aside>

src/layouts/BaseLayout.astro

@@ -2,6 +2,7 @@
 import '../styles/site.css';
 import CustomContextMenu from '@/components/CustomContextMenu.astro';
 import HitokotoCard from '@/components/HitokotoCard.astro';
+import PwaPrompt from '@/components/PwaPrompt.astro';
 import { publicSiteConfig, siteConfig } from '../../site.config.mjs';
 
 interface Props {
@@ -90,6 +91,10 @@ const consoleSites = [
     {keywords.map((keyword) => <meta property="article:tag" content={keyword} />)}
     {jsonLd && <script type="application/ld+json" is:inline set:html={jsonLdHtml}></script>}
     <link rel="icon" href={siteConfig.assets.icon} />
+    <link rel="manifest" href="/manifest.webmanifest" />
+    <link rel="apple-touch-icon" href="/images/apple-touch-icon.png" />
+    <meta name="theme-color" content="#f7f5ef" media="(prefers-color-scheme: light)" />
+    <meta name="theme-color" content="#0b1014" media="(prefers-color-scheme: dark)" />
     <script defer src={siteConfig.analytics.umami.script} data-website-id={siteConfig.analytics.umami.websiteId}></script>
     <script is:inline set:html={`window.SITE_CONFIG = ${publicConfigJson};`}></script>
     <script is:inline>
@@ -243,12 +248,14 @@ const consoleSites = [
     </footer>
     <HitokotoCard />
     <CustomContextMenu />
+    <PwaPrompt />
     <script is:inline src={siteConfig.cdn.instantsearchJs}></script>
     <script is:inline src={siteConfig.cdn.typesenseAdapterJs}></script>
     <script is:inline src={siteConfig.cdn.fancyboxJs}></script>
     <script is:inline src="/js/random.js"></script>
     <script is:inline src="/js/search/typesense-search.js"></script>
     <script is:inline src="/js/external-links.js"></script>
+    <script is:inline src="/js/pwa.js"></script>
     <script is:inline>
       (() => {
         const nav = document.querySelector('.nav');

src/styles/site.css

@@ -13,3 +13,4 @@
 @import "./site/13-responsive.css";
 @import "./site/14-animations.css";
 @import "./site/15-reading-series.css";
+@import "./site/16-pwa.css";

src/styles/site/16-pwa.css

@@ -0,0 +1,47 @@
+.pwa-toast {
+  position: fixed;
+  right: max(18px, var(--page-gutter));
+  bottom: 24px;
+  z-index: 34;
+  display: grid;
+  grid-template-columns: 44px minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 14px;
+  width: min(560px, calc(100vw - 32px));
+  border: 1px solid rgba(255, 255, 255, 0.68);
+  border-radius: 14px;
+  padding: 14px;
+  color: #27313a;
+  background: rgba(255, 253, 248, 0.94);
+  box-shadow: 0 22px 60px rgba(44, 55, 63, 0.24);
+  backdrop-filter: blur(20px) saturate(165%);
+  -webkit-backdrop-filter: blur(20px) saturate(165%);
+  animation: pwa-toast-in 0.3s ease both;
+}
+
+.pwa-toast[hidden] { display: none; }
+.pwa-toast-icon { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 12px; color: #fff; background: #3eb8be; }
+.pwa-toast-copy { min-width: 0; }
+.pwa-toast-copy strong, .pwa-toast-copy p { margin: 0; }
+.pwa-toast-copy p { color: var(--muted); font-size: 0.88rem; line-height: 1.5; }
+.pwa-toast-actions { display: flex; gap: 7px; }
+.pwa-toast button { border: 1px solid rgba(15, 118, 110, 0.18); border-radius: 999px; padding: 7px 12px; color: var(--accent); font: inherit; font-size: 0.84rem; font-weight: 800; background: rgba(236, 253, 245, 0.72); cursor: pointer; }
+.pwa-toast .pwa-toast-primary { color: #fff; background: #3eb8be; }
+
+:root[data-theme='dark'] .pwa-toast { border-color: rgba(139, 224, 213, 0.22); color: #edf7f5; background: rgba(13, 23, 29, 0.94); }
+
+@keyframes pwa-toast-in {
+  from { opacity: 0; transform: translateY(16px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@media (max-width: 720px) {
+  .pwa-toast { right: 16px; bottom: 16px; grid-template-columns: 40px minmax(0, 1fr); }
+  .pwa-toast-icon { width: 40px; height: 40px; }
+  .pwa-toast-actions { grid-column: 1 / -1; }
+  .pwa-toast button { flex: 1; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .pwa-toast { animation: none; }
+}