Steven
483b554c3c
CI / backend (push) Canceled after 0s
用 vite-plugin-pwa 生成 manifest 与 Service Worker，不自己写缓存逻辑。 - 装到桌面：manifest 名字/主题色/三个图标（any + maskable + apple-touch-icon）， 图标和页头、安卓桌面是同一枚；首页底部给安装引导，能装就弹「安装」， iOS 给「分享 → 添加到主屏幕」，关掉记在 localStorage - 发版提示：registerType=prompt，收到新版本只在底部提示，点「刷新」才换。 故意不自动刷新——Vditor、图表是懒加载分片，后台换 chunk 会让面板 404 - 缓存边界：只预缓存页面骨架（约 0.8MB），/api/ 一律 NetworkOnly， 离线宁可报错也不端旧数据；/vditor/ 走 CacheFirst，不拖慢首次安装 - 顺手修：UpdatePrompt 居中改用 flex 包一层，animate-slide-up 的 keyframes 自带 transform，会和 -translate-x-1/2 抢属性，手机窄屏会把卡片推出屏幕 验证：web/e2e/pwa.mjs 19 项全绿（manifest/SW 激活/预缓存/安装引导/iOS 文案/ 发版提示/断网仍能打开）；tsc 通过、vite build 通过。 已知限制：Service Worker 只在 https 或 localhost 注册，生产入口还是 http， 所以内网 IP 上装不了——需要域名 + 证书反代或隧道，已写进 DEPLOY.md 第 6 节。
81 lines
2.7 KiB
TypeScript
81 lines
2.7 KiB
TypeScript
import { defineConfig } from "vite";
|
|
import react from "@vitejs/plugin-react";
|
|
import { VitePWA } from "vite-plugin-pwa";
|
|
|
|
// 开发端口固定 5180，接口走代理，避免本地跨域配置漂移
|
|
export default defineConfig({
|
|
plugins: [
|
|
react(),
|
|
VitePWA({
|
|
// 有新版本时先不偷偷换掉：让用户自己点"刷新"，
|
|
// 免得开着看板的时候后台把 chunk 换了，点一下就是 404。
|
|
registerType: "prompt",
|
|
injectRegister: null, // main.tsx 里自己注册，好在拿到 onNeedRefresh
|
|
includeAssets: ["icons/apple-touch-icon.png"],
|
|
manifest: {
|
|
name: "达道Task",
|
|
short_name: "达道Task",
|
|
description: "任务、工单、知识库，一条道走到底。",
|
|
lang: "zh-CN",
|
|
dir: "ltr",
|
|
start_url: "/",
|
|
scope: "/",
|
|
display: "standalone",
|
|
orientation: "any",
|
|
background_color: "#f7f5f0",
|
|
theme_color: "#2f6054",
|
|
categories: ["productivity", "business"],
|
|
icons: [
|
|
{ src: "/icons/icon-192.png", sizes: "192x192", type: "image/png", purpose: "any" },
|
|
{ src: "/icons/icon-512.png", sizes: "512x512", type: "image/png", purpose: "any" },
|
|
{
|
|
src: "/icons/maskable-512.png",
|
|
sizes: "512x512",
|
|
type: "image/png",
|
|
purpose: "maskable",
|
|
},
|
|
],
|
|
},
|
|
workbox: {
|
|
// 只预缓存构建产物与图标；Vditor 那 3.7MB 运行时按需缓存，别拖慢首次安装
|
|
globPatterns: ["**/*.{js,css,html,svg,png,ico,woff2}"],
|
|
globIgnores: ["vditor/**", "**/*.map"],
|
|
navigateFallback: "/index.html",
|
|
navigateFallbackDenylist: [/^\/api\//],
|
|
cleanupOutdatedCaches: true,
|
|
runtimeCaching: [
|
|
{
|
|
// 接口一律走网络：离线时宁可报错，也不要把别人的旧数据端出来
|
|
urlPattern: ({ url }) => url.pathname.startsWith("/api/"),
|
|
handler: "NetworkOnly",
|
|
},
|
|
{
|
|
// 编辑器的 lute / 语言包 / 图标：用过一次就留着，离线也能写字
|
|
urlPattern: ({ url }) => url.pathname.startsWith("/vditor/"),
|
|
handler: "CacheFirst",
|
|
options: {
|
|
cacheName: "vditor",
|
|
expiration: { maxEntries: 40, maxAgeSeconds: 60 * 60 * 24 * 30 },
|
|
},
|
|
},
|
|
],
|
|
},
|
|
devOptions: { enabled: false },
|
|
}),
|
|
],
|
|
server: {
|
|
port: 5180,
|
|
strictPort: true,
|
|
proxy: {
|
|
"/api": {
|
|
target: process.env.VITE_API_TARGET ?? "http://127.0.0.1:8100",
|
|
changeOrigin: true,
|
|
},
|
|
},
|
|
},
|
|
build: {
|
|
outDir: "dist",
|
|
sourcemap: true,
|
|
},
|
|
});
|