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";