Service Worker 與 PWA (Service Worker & PWA)

Service Worker 是讓網頁變身 App 的核心技術。它是一個運行在瀏覽器背景的腳本，能夠攔截並處理網絡請求。在開發 Hyperliquid Monitor 時，我們針對不同資源制定了精細的緩存策略。

🌐 緩存策略：混合式 Stale-While-Revalidate

1. 靜態資源 (Shell)

• 包含: index.html, style.css, app.js。
• 策略: Cache First (緩存優先)。
• 目的: 我們希望 App 能夠 0 秒開啟，即使在沒有網路的環境下也能看到 UI 框架。
• 更新機制: 我們使用手動版本號 (hyper-monitor-v15...)。一旦修改代碼，必須更新這個版本號，這會強制用戶的瀏覽器在下次訪問時重新下載並更新緩存。

2. API 請求

• 策略: Network Only (僅網絡)。
• 原因: 金融數據具有極強的時效性。緩存昨天的比特幣價格是毫無意義的。因此，我們在 Service Worker 中明確排除了 API 請求的緩存，確保每次獲取的都是最前線的行情。

📦 PWA Manifest 與沉浸式體驗

Manifest 檔案告訴手機系統「這是一個 App」而非普通的網頁。

• display: standalone: 移除瀏覽器的網址列與導航按鈕，提供純粹的 App 體驗。
• background_color: 設置為黑色，確保 App 啟動時的過渡畫面與深色主題一致，避免視覺突兀。

📱 iOS 的特殊適配

由於 iOS Safari 對 PWA 的支持相對保守，我們需要額外處理：

• 狀態列適配: 使用 apple-mobile-web-app-status-bar-style: black-translucent，讓網頁內容能延伸到螢幕頂部的劉海區域，大幅提升視覺質感。
• 圖標設置: 必須提供專用的 apple-touch-icon 以確保加入主畫面後的圖標清晰。

🚀 總結

PWA 不僅僅是技術，更是一種思維方式。透過合理的 Service Worker 策略，我們能在 Web 上實現接近原生 App 的流暢感與離線能力。