PWA 漸進式 Web 應用實戰：讓工具站可安裝、可離線

什麼是 PWA？

PWA（Progressive Web App）讓 Web 應用具備接近原生 App 的體驗：

能力	傳統 Web	PWA
安裝到桌面	❌	✅ Add to Home Screen
離線存取	❌	✅ Service Worker 快取
推播通知	❌	✅ Push API
全螢幕執行	❌	✅ standalone 模式
自動更新	✅	✅ 背景更新 SW

對於工具庫這類高頻使用的工具站，PWA 代表使用者可以像原生 App 一樣一鍵開啟 PDF 合併、JSON 格式化等常用工具。

---

Web App Manifest

manifest.json 定義應用的安裝資訊：

{
  "name": "工具庫 - 線上工具合集",
  "short_name": "工具庫",
  "start_url": "/zh-TW/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#2563eb",
  "icons": [
    { "src": "/icons/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icons/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

欄位	作用
display: standalone	隱藏瀏覽器網址列
start_url	安裝後開啟的頁面
theme_color	狀態列／標題列顏色
icons	桌面圖示（至少 192px 與 512px）

---

Service Worker 快取策略

快取優先（工具靜態資源）

// 適合：JS/CSS/WASM/字型等不常變動的資源
self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request).then(cached => {
      return cached || fetch(event.request).then(response => {
        const clone = response.clone();
        caches.open('static-v1').then(cache => cache.put(event.request, clone));
        return response;
      });
    })
  );
});

網路優先（HTML 頁面）

// 適合：可能更新的 HTML 頁面
event.respondWith(
  fetch(event.request).catch(() => caches.match(event.request))
);

工具庫的快取分層

資源	策略	TTL
_next/static/**	Cache First	1 年（hash 檔名）
*.wasm	Cache First	1 年
*.html	Network First	1 小時
i18n JSON	Stale While Revalidate	1 天

---

離線工具体驗

PWA 離線時的使用者體驗設計：

使用者離線開啟工具庫
     ↓
Service Worker 回傳快取的 HTML/JS/CSS
     ↓
工具頁面正常載入（SSG 預渲染的 HTML）
     ↓
Client Component 啟動，工具邏輯在本機執行
     ↓
File API / WASM 處理檔案 → 完全離線可用

工具庫的所有核心工具（PDF、圖片、JSON、加密）都基於瀏覽器本機 API，天然支援離線使用——PWA 只需確保靜態資源被快取。

---

安裝提示最佳實務

let deferredPrompt: BeforeInstallPromptEvent;

window.addEventListener('beforeinstallprompt', (e) => {
  e.preventDefault();
  deferredPrompt = e;
  showInstallBanner(); // 顯示自訂安裝提示
});

installButton.addEventListener('click', async () => {
  deferredPrompt.prompt();
  const { outcome } = await deferredPrompt.userChoice;
  if (outcome === 'accepted') hideInstallBanner();
});

注意：不要過早顯示安裝提示。建議在使用者成功使用 2–3 個工具後再提示，轉換率更高。

---

總結

PWA 是工具站提升使用者留存的有效手段。Web App Manifest 提供安裝入口，Service Worker 實現離線快取，而工具庫本身的瀏覽器本機處理架構讓離線工具体驗與線上無異。