feat: PWA支持(manifest+Service Worker缓存+图标,可添加到主屏幕/离线/增量更新)

This commit is contained in:
gouki
2026-08-02 15:01:26 +00:00
parent f79d021307
commit cc7b2c67fe
7 changed files with 104 additions and 1 deletions
+11 -1
View File
@@ -11,7 +11,7 @@ from pathlib import Path
from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware
from fastapi.responses import HTMLResponse
from fastapi.responses import FileResponse, HTMLResponse
from fastapi.staticfiles import StaticFiles
from jinja2 import Environment, FileSystemLoader
from sqlmodel import Session
@@ -64,6 +64,16 @@ def index() -> HTMLResponse:
return HTMLResponse(html)
@app.get("/sw.js", include_in_schema=False)
def service_worker() -> FileResponse:
"""Service Worker(置于根路径以使 scope 覆盖全站)"""
return FileResponse(
STATIC_DIR / "sw.js",
media_type="application/javascript",
headers={"Service-Worker-Allowed": "/"},
)
@app.get("/health")
def health_check() -> dict:
"""健康检查(version 动态读取,便于验证自动更新)"""
+13
View File
@@ -4,6 +4,12 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<title>{{ app_name }}</title>
<link rel="manifest" href="/static/manifest.json">
<meta name="theme-color" content="#2563eb">
<link rel="apple-touch-icon" href="/static/icons/icon-192.png">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="资产管理">
<script src="/static/js/tailwind.js"></script>
<script>tailwind.config = { darkMode: 'class' };</script>
<script src="/static/js/vue.global.prod.js"></script>
@@ -19,5 +25,12 @@
<div id="app"></div>
<script src="/static/js/api.js"></script>
<script src="/static/js/app.js"></script>
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('load', function () {
navigator.serviceWorker.register('/sw.js').catch(function () {});
});
}
</script>
</body>
</html>