ok

src/components/App.jsx

@@ -12,13 +12,16 @@ import useDialog from '../libs/useDialog.jsx'
 // 其他
 import getStaredImages from '../libs/getStaredImages.js'
 import clearDB from '../libs/clearDB.js'
+import checkBrowser from '../libs/checkBrowser.js'
 
 // 清除 sessionStorage
 sessionStorage.clear()
 // 如果存在非目标版本数据，确认后清空 IndexedDB
 const versionInfo = await clearDB(2024041522)
 // 获取已收藏图片列表
 const staredImages = await getStaredImages()
+// 检查浏览器
+checkBrowser()
 
 // 主组件
 function App() {

src/libs/checkBrowser.js

@@ -0,0 +1,25 @@
+/**
+ * 检查浏览器版本是否符合要求  
+ * 如果不符合要求，弹出提示框
+ */
+export default function checkBrowser() {
+  const ua = navigator.userAgent
+  const chrome = ua.match(/Chrome\/(\d+)/)
+  const firefox = ua.match(/Firefox\/(\d+)/)
+  const edge = ua.match(/Edge\/(\d+)/)
+  const safari = ua.match(/Safari\/(\d+)/)
+  if (
+    (chrome && Number(chrome[1]) < 108) ||
+    (firefox && Number(firefox[1]) < 101) ||
+    (edge && Number(edge[1]) < 108) ||
+    (safari && Number(safari[1]) < 15.4)
+  ) {
+    alert(`
+      您的浏览器版本过低
+      可能无法正常使用本应用
+      建议使用最新版本
+      Chrome/Edge/Firefox/Safari
+      等现代浏览器
+    `)
+  }
+}

vite.config.js

@@ -4,6 +4,7 @@ import react from '@vitejs/plugin-react'
 export default defineConfig({
   plugins: [react()],
   build: {
+    // 修改编译目标后记得同步修改 checkBrowser.js 中的版本号
     target: ['chrome108', 'edge108', 'firefox101', 'safari15.4'],
     rollupOptions: {
       output: {