PWA
Progressive Web App configuration
PWA là gì?
PWA cho phép website hoạt động như app native: cài trên điện thoại, hoạt động offline, tự cập nhật.
Manifest
{
"name": "Đủ & Đều",
"short_name": "Đủ & Đều",
"description": "Focus Timer — Tập trung mỗi ngày",
"display": "standalone",
"theme_color": "#0F7B5F",
"background_color": "#FFFFFF",
"start_url": "/app"
}Service Worker (Workbox)
| Strategy | Áp dụng cho | Mô tả |
|---|---|---|
| Cache-First | CSS, JS, images | Tải từ cache trước |
| Network-First | API calls | Lấy data mới nhất |
Install Prompt
- iOS Safari: Modal hướng dẫn (Share → Add to Home Screen)
- Android Chrome: Banner native
beforeinstallprompt - Desktop: Tương tự Android
Update Prompt
Khi có phiên bản mới → toast "Phiên bản mới có sẵn" → bấm → reload.
Offline Support
Toàn bộ assets cache bởi Service Worker. Hoạt động 100% offline cho timer, dashboard, settings, statistics. Chỉ cần online cho sync, YouTube, Google Sign-In.