添加pwa支持

course/.vitepress/config.mts

@@ -1,14 +1,72 @@
 import { defineConfig } from "vitepress";
+import { withPwa } from "@vite-pwa/vitepress";
 import themeConfig from "./themeConfig";
 
-export default defineConfig({
-  lang: "zh-CN",
-  title: "Zig 语言圣经",
-  description: "简单、快速地学习 Zig，ziglang中文教程，zig中文教程，",
-  sitemap: {
-    hostname: "https://zigcc.github.io/zig-course/",
-  },
-  base: "/zig-course/",
-  lastUpdated: true,
-  themeConfig: themeConfig,
-});
+export default withPwa(
+	defineConfig({
+		pwa: {
+			includeAssets: [
+				"favicon.ico",
+				"apple-touch-icon.png",
+				"safari-pinned-tab.svg",
+			],
+			manifest: {
+				name: "Zig 语言圣经",
+				short_name: "Zig 语言圣经",
+				description:
+					"简单、快速地学习 Zig，ziglang中文教程，zig中文教程",
+				icons: [
+					{
+						src: "android-chrome-192x192.png",
+						sizes: "192x192",
+						type: "image/png",
+					},
+					{
+						src: "android-chrome-512x512.png",
+						sizes: "512x512",
+						type: "image/png",
+					},
+				],
+				theme_color: "#ffffff",
+				background_color: "#ffffff",
+				display: "standalone",
+			},
+			strategies: "generateSW", // <== if omitted, defaults to `generateSW`
+			workbox: {
+				/* your workbox configuration if any */
+			},
+			experimental: {
+				includeAllowlist: true,
+			},
+		},
+		lang: "zh-CN",
+		title: "Zig 语言圣经",
+		description: "简单、快速地学习 Zig，ziglang中文教程，zig中文教程",
+		sitemap: {
+			hostname: "https://zigcc.github.io/zig-course/",
+		},
+		base: "/zig-course/",
+		lastUpdated: true,
+		themeConfig: themeConfig,
+		head: [
+		  ["link", { rel: "icon", href: "./favicon.ico" }],
+		  [
+		    "link",
+		    {
+		      rel: "apple-touch-icon",
+		      href: "./apple-touch-icon.png",
+		      sizes: "180x180",
+		    },
+		  ],
+		  [
+		    "link",
+		    {
+		      rel: "mask-icon",
+		      href: "./logo-square.svg",
+		      color: "#FFFFFF",
+		    },
+		  ],
+		  ["meta", { name: "theme-color", content: "#ffffff" }],
+		],
+	})
+);

course/.vitepress/theme/components/RegisterSW.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import { onBeforeMount, ref } from "vue";
+
+const offlineReady = ref(false);
+function onOfflineReady() {
+  offlineReady.value = true;
+}
+async function close() {
+  offlineReady.value = false;
+}
+
+onBeforeMount(async () => {
+  const { registerSW } = await import("virtual:pwa-register");
+  registerSW({
+    immediate: true,
+    onOfflineReady,
+    onRegistered() {
+      console.info("Service Worker registered");
+    },
+    onRegisterError(e) {
+      console.error("Service Worker registration error!", e);
+    },
+  });
+});
+</script>
+
+<template>
+  <template v-if="offlineReady">
+    <div class="pwa-toast" role="alertdialog" aria-labelledby="pwa-message">
+      <div id="pwa-message" class="mb-3">App ready to work offline</div>
+      <button type="button" class="pwa-cancel" @click="close">Close</button>
+    </div>
+  </template>
+</template>
+
+<style>
+.pwa-toast {
+  position: fixed;
+  right: 0;
+  bottom: 0;
+  margin: 16px;
+  padding: 12px;
+  border: 1px solid #8885;
+  border-radius: 4px;
+  z-index: 100;
+  text-align: left;
+  box-shadow: 3px 4px 5px 0 #8885;
+  background-color: white;
+}
+.pwa-toast #pwa-message {
+  margin-bottom: 8px;
+}
+.pwa-toast button {
+  border: 1px solid #8885;
+  outline: none;
+  margin-right: 5px;
+  border-radius: 2px;
+  padding: 3px 10px;
+}
+</style>

course/.vitepress/theme/index.ts

@@ -9,6 +9,8 @@ import giscus from "./giscus";
 import { useRoute } from "vitepress";
 import { h } from "vue";
 
+import RegisterSW from "./components/RegisterSW.vue";
+
 export default {
   ...DefaultTheme,
   enhanceApp(ctx: any) {
@@ -17,6 +19,7 @@ export default {
   Layout() {
     return h(DefaultTheme.Layout, null, {
       "doc-after": () => h(giscus),
+      "layout-bottom": () => h(RegisterSW),
     });
   },
   setup() {

course/public/browserconfig.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/mstile-150x150.png"/>
+            <TileColor>#da532c</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>

course/public/robots.txt

@@ -0,0 +1,2 @@
+User-agent: *
+Allow: /

package.json

@@ -7,6 +7,7 @@
   },
   "devDependencies": {
     "@types/node": "^20.11.0",
+    "@vite-pwa/vitepress": "^0.3.1",
     "medium-zoom": "^1.0.8",
     "prettier": "^3.0.3",
     "vitepress": "^1.0.0-rc.11"