【Day 04】PWA 的核心三要素：Manifest、Service Worker、HTTPS

2026 iThome 鐵人賽

DAY 4

Software Development

SyncETA 開發日記：手把手打造你的智慧出發時間推薦 PWA系列第 4 篇

18th鐵人賽

zoeeyee

2026-08-27 09:31:20

69 瀏覽

分享至

今天要把昨天規劃好的 public/manifest.json 和 public/sw.js 實際寫出來，讓專案具備 PWA 的基本資格。

1. Web App Manifest

在 public/manifest.json 建立以下內容：

{
  "name": "SyncETA Lite",
  "short_name": "SyncETA",
  "description": "智慧出發時間推薦 PWA",
  "start_url": "/",
  "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 是關鍵設定，它讓安裝後的網頁不顯示瀏覽器網址列，看起來就像一個獨立 App。

2. 在 index.html 中連結 Manifest

打開 index.html，在 <head> 內加入：

<link rel="manifest" href="/manifest.json" />
<meta name="theme-color" content="#2563eb" />

3. 建立最簡單的 Service Worker

在 public/sw.js 先寫一個最陽春的版本（之後 Day 21 會補上完整的快取邏輯）：

// public/sw.js
self.addEventListener('install', (event) => {
  console.log('SyncETA Service Worker 安裝完成');
});

self.addEventListener('fetch', (event) => {
  // 目前先不攔截請求，之後會加入快取策略
});

4. 在 src/main.js 註冊 Service Worker

// src/main.js
if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/sw.js')
      .then(() => console.log('Service Worker 註冊成功'))
      .catch((err) => console.error('註冊失敗', err));
  });
}