0.0.29

- Added toast notifications for users when a new service worker version is available.
- Updated service worker configuration to require manual activation for updates.
- Enhanced user experience by allowing users to choose when to update the application.

index.html

@@ -18,6 +18,11 @@
     <link rel="dns-prefetch" href="https://ipinfo.io">
     <link rel="preconnect" href="https://ipinfo.io" crossorigin>
     
+    <!-- Google Fonts -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500&family=Noto+Sans+SC:wght@400;500&display=swap" rel="stylesheet">
+    
     <!-- Open Graph / Facebook -->
     <meta property="og:type" content="website" />
     <meta property="og:url" content="https://litek.typist.cc/" />

package.json

@@ -1,7 +1,7 @@
 {
   "name": "litek",
   "private": true,
-  "version": "0.0.25",
+  "version": "0.0.29",
   "type": "module",
   "scripts": {
     "dev": "vite",

src/components/sidebar/index.tsx

@@ -114,11 +114,7 @@ export const AppSidebar = () => {
           </SidebarGroupContent>
         </SidebarGroup>
       </SidebarContent>
-      <SidebarFooter className="flex flex-row justify-between items-center gap-2">
-        <SidebarMenuButton variant="outline" asChild>
-          <a href="mailto:litek@mail.typist.cc">need more tools?</a>
-        </SidebarMenuButton>
-      </SidebarFooter>
+      <SidebarFooter className="flex flex-col gap-2" />
     </Sidebar>
   );
 };

src/index.css

@@ -116,6 +116,7 @@
   }
   body {
     @apply bg-background text-foreground;
+    font-family: 'Roboto Mono', 'Noto Sans SC', 'SF Mono', Consolas, monospace;
   }
 }
 

src/main.tsx

@@ -2,7 +2,7 @@ import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 
 import { Toaster } from '@/components/ui/sonner'
-
+import { toast } from 'sonner'
 
 import './index.css'
 import { AppRouter } from './router'
@@ -19,11 +19,32 @@ if ('serviceWorker' in navigator && import.meta.env.PROD) {
   import('workbox-window').then(({ Workbox }) => {
     const wb = new Workbox('/sw.js')
     
-    wb.addEventListener('installed', (event) => {
-      if (event.isUpdate) {
-        console.log('New service worker installed, reloading page...')
-        window.location.reload()
-      }
+    // 检测到新版本时，在后台下载完成后显示通知
+    wb.addEventListener('waiting', () => {
+      // 显示更新通知，右上角弹窗
+      toast.info('found new version', {
+        description: 'new content available, click update to get the latest version',
+        duration: Infinity, // 持续显示，直到用户操作
+        action: {
+          label: 'update now',
+          onClick: () => {
+            // 用户点击更新按钮
+            wb.messageSkipWaiting()
+          }
+        },
+        cancel: {
+          label: 'later',
+          onClick: () => {
+            // 用户选择稍后更新，关闭通知
+            // 新版本会在下次手动刷新时自动激活
+          }
+        }
+      })
+    })
+
+    // 当新的 Service Worker 接管页面时，刷新页面
+    wb.addEventListener('controlling', () => {
+      window.location.reload()
     })
 
     wb.register()

vite.config.ts

@@ -43,11 +43,41 @@ export default defineConfig({
                 statuses: [0, 200]
               }
             }
+          },
+          {
+            // Google Fonts 样式表缓存
+            urlPattern: /^https:\/\/fonts\.googleapis\.com\/.*/i,
+            handler: 'StaleWhileRevalidate',
+            options: {
+              cacheName: 'google-fonts-stylesheets',
+              expiration: {
+                maxEntries: 10,
+                maxAgeSeconds: 60 * 60 * 24 * 365 // 1 年
+              },
+              cacheableResponse: {
+                statuses: [0, 200]
+              }
+            }
+          },
+          {
+            // Google Fonts 字体文件缓存
+            urlPattern: /^https:\/\/fonts\.gstatic\.com\/.*/i,
+            handler: 'CacheFirst',
+            options: {
+              cacheName: 'google-fonts-webfonts',
+              expiration: {
+                maxEntries: 30,
+                maxAgeSeconds: 60 * 60 * 24 * 365 // 1 年
+              },
+              cacheableResponse: {
+                statuses: [0, 200]
+              }
+            }
           }
         ],
         cleanupOutdatedCaches: true,
-        clientsClaim: true,
-        skipWaiting: true
+        clientsClaim: true,   // 新 SW 激活后立即接管
+        skipWaiting: false    // 不自动跳过等待，需要手动触发
       }
     })
   ],