什麼是 PWA
Progressive Web App（漸進式網頁應用）是一種讓網站具備部分原生 App 功能的技術集合：
- 可以「加到主畫面」——在 iOS/Android 手機桌面上有自己的圖示，點開後沒有瀏覽器地址欄，體驗像原生 App
- 離線讀取——已瀏覽過的頁面可以在沒有網路的情況下存取（透過 Service Worker 快取）
- 推播通知——主動向已安裝到桌面的用戶發送通知（Android 支援較好，iOS 自 iOS 16.4 起支援）
- 更快的載入速度——透過 Service Worker 快取靜態資源
PWA 不需要在 App Store 上架，不需要原生開發，是網站技術的延伸。
PWA 對品牌官網的實際效益評估
並不是所有品牌官網都需要 PWA。以下是誠實的效益評估：
明顯有幫助的情境
你的網站內容需要頻繁查詢： 例如服務細節、報價資訊、作品集——如果用戶可能多次回訪，「加到主畫面」讓回訪更方便。
你的目標用戶在網路不穩定的環境下訪問： 施工現場、戶外活動、部分台灣原住民族地區。離線快取讓你的核心頁面在弱網路下仍可閱覽。
每週都有新內容（部落格/媒體型網站）： 推播通知可以在新文章發布時通知訂閱者，比 Email 更即時。
效益有限的情境
對「一次性瀏覽、主要用於潛在客戶轉換」的品牌官網，PWA 的大部分功能意義不大——用戶決定是否聯絡你，通常不需要多次回訪，也不需要離線閱覽。
PWA 的 3 個核心技術
1. Web App Manifest
一個 JSON 格式的設定檔，定義 App 的「外觀」：
- App 名稱
- 圖示（多尺寸，用於不同設備）
- 主題色（開啟 App 時的頂部狀態欄顏色）
- 顯示模式（standalone：隱藏瀏覽器 UI，讓它更像原生 App）
- 起始頁面 URL
在 Next.js 中，在 app/manifest.ts 中匯出 manifest 設定物件，Next.js 會自動生成 manifest.json 並在 HTML head 中引用。
2. Service Worker
在瀏覽器背景執行的 JavaScript，負責攔截網路請求、管理快取。
Service Worker 是 PWA 最複雜的部分，但對大多數品牌官網，使用 next-pwa 這個套件可以幾乎零設定地自動生成 Service Worker。
3. HTTPS
PWA 要求網站必須在 HTTPS 下運作（localhost 例外）。所有現代主機服務（Vercel、Netlify、Cloudflare）都預設提供 HTTPS，這不是需要額外處理的問題。
在 Next.js 中快速導入 PWA
使用 @ducanh2912/next-pwa 或 next-pwa 套件：
安裝後，在 next.config 中包裹 withPWA 設定，並確保存在 next-pwa 能正確運作所需的 manifest 和圖示。
這個設定會自動：
- 在生產環境啟用 Service Worker
- 預快取所有靜態資源
- 在開發模式中停用（避免快取問題影響開發體驗）
iOS 的限制
Apple 對 PWA 的支援一直比 Android 保守：
- iOS 16.4 之前：不支援 PWA 推播通知
- iOS 16.4+：透過 Web Push API 支援推播，但需要用戶主動將網站加到主畫面
- 某些 PWA 功能（例如後台同步）在 iOS 上仍有限制
這是 2026 年 PWA 最大的現實限制：iOS 用戶（台灣市場佔比約 35–40%）的 PWA 體驗仍不如 Android 完整。
應該導入 PWA 嗎？
推薦考慮的品牌類型：
- 內容型網站（部落格、媒體、知識庫）
- 有高回訪需求的服務業（診所、瑜珈工作室的課表查詢）
- 電商網站（快速的第二次訪問體驗很重要）
暫時不需要的品牌類型：
- 純粹的品牌展示型官網（訪客主要是第一次來決定是否聯絡）
- 預算有限且沒有技術資源維護 PWA 功能的品牌
導入 PWA 的技術成本在使用 Next.js 的情況下已很低，但仍需要確認圖示、Manifest 設定、快取策略是否正確——不正確的設定可能造成用戶看到過期的頁面內容。