feat: add pwa

.vitepress/config.js

@@ -1,5 +1,6 @@
 // import { defineConfig } from 'vitepress'
 import { withMermaid } from "vitepress-plugin-mermaid-xyxsw";
+import { VitePWA } from 'vite-plugin-pwa';
 import { main_sidebar, chapter2, chapter3, chapter4, chapter5, chapter6, chapter7, chapter8, chapter9 } from './sidebar.js';
 import { nav } from './nav.js';
 import PanguPlugin from 'markdown-it-pangu'
@@ -17,6 +18,7 @@ export default withMermaid({
     ['script', { async: "async", src: 'https://umami.hdu-cs.wiki/script.js', "data-website-id": "3f11687a-faae-463a-b863-6127a8c28301", "data-domains": "wiki.xyxsw.site,hdu-cs.wiki" }],
     ['link', { rel: 'icon', href: '/favicon.ico' }],
     ["meta", { "name": "description", "content": "HDU计算机科学讲义" }],
+    ["meta", { "name": "viewport", "content": "width=device-width,initial-scale=1" }],
     ["meta", { "property": "og:url", "content": "https://hdu-cs.wiki/" }],
     ["meta", { "property": "og:type", "content": "website" }],
     ["meta", { "property": "og:title", "content": "HDU-CS-WIKI | HDU-CS-WIKI" }],
@@ -28,12 +30,13 @@ export default withMermaid({
     ["meta", { "name": "twitter:title", "content": "HDU-CS-WIKI | HDU-CS-WIKI" }],
     ["meta", { "name": "twitter:description", "content": "HDU计算机科学讲义" }],
     ["meta", { "name": "twitter:image", "content": "https://cdn.xyxsw.site/og-img.png" }],
-    ["link", { "rel": "apple-touch-icon", "sizes": "180x180", "href": "/apple-touch-icon.png" }],
+    ["link", { "rel": "apple-touch-icon", "sizes": "180x180", "href": "/apple-touch-icon-180x180.png" }],
     ["link", { "rel": "icon", "type": "image/png", "sizes": "32x32", "href": "/favicon-32x32.png" }],
     ["link", { "rel": "icon", "type": "image/png", "sizes": "16x16", "href": "/favicon-16x16.png" }],
     ["link", { "rel": "manifest", "href": "/site.webmanifest" }],
     ["link", { "rel": "mask-icon", "href": "/safari-pinned-tab.svg", "color": "#5bbad5" }],
     ["meta", { "name": "msapplication-TileColor", "content": "#2b5797" }],
+    ["meta", { "name": "theme-color", "content": "#ffffff" }],
   ],
   themeConfig: {
     // https://vitepress.dev/reference/default-theme-config
@@ -85,6 +88,36 @@ export default withMermaid({
   vite: {
     plugins: [
       VueMacros(),
+      VitePWA({
+        registerType: 'autoUpdate',
+        devOptions: {
+          enabled: true,
+          type: 'module'
+        },
+        injectRegister: 'auto',
+        includeAssets: ['favicon.ico', 'favicon-16x16.png',
+          'favicon-32x32.png', 'apple-touch-icon-180x180.png', 'safari-pinned-tab.svg'],
+        manifest: {
+          name: 'HDU 计算机科学讲义',
+          short_name: 'HDU-CS-WIKI',
+          description: 'HDU 计算机科学讲义',
+          theme_color: '#ffffff',
+          start_url: '/',
+          prefer_related_applications: true,
+          icons: [
+            {
+              src: '/android-chrome-192x192.png',
+              sizes: '192x192',
+              type: 'image/png'
+            },
+            {
+              src: '/android-chrome-512x512.png',
+              sizes: '512x512',
+              type: 'image/png'
+            }
+          ]
+        }
+      }),
     ],
     resolve: {
       alias: [

.vitepress/theme/index.js

@@ -32,6 +32,8 @@ export default {
 
 if (typeof window !== 'undefined') {
   // detect browser, add to class for conditional styling
+  import('./pwa.js')
+
   const browser = navigator.userAgent.toLowerCase()
   if (browser.includes('chrome'))
     document.documentElement.classList.add('browser-chrome')

.vitepress/theme/pwa.js

@@ -0,0 +1,3 @@
+import { registerSW } from 'virtual:pwa-register'
+
+registerSW({ immediate: true })