🚀 GitHub + Netlify 打造 PWA 手機 APP 與網站完整攻略

✅ 什麼是 PWA（Progressive Web App）？

PWA 是一種 介於網站與原生 App 之間的技術，具備以下優勢：

• 支援「加到主畫面」直接當 App 用
• 離線可用（Offline）
• 高速載入、優化效能
• 支援推播通知（進階）
• 全響應式設計，電腦 / 手機自適應

✅ 技術架構概覽

📌 技術組成：

✅ 開發與部署完整流程

🔨 1️⃣ 建立專案（以 Vite + React 為例）

npm create vite@latest my-pwa-app -- --template react
cd my-pwa-app
npm install

✅ 加入 PWA 支援：

npm install vite-plugin-pwa --save-dev

✅ vite.config.js 配置：

import { VitePWA } from 'vite-plugin-pwa'

export default {
  plugins: [VitePWA({
    registerType: 'autoUpdate',
    manifest: {
      name: 'My PWA App',
      short_name: 'PWA',
      icons: [
        { src: 'icon-192.png', sizes: '192x192', type: 'image/png' },
        { src: 'icon-512.png', sizes: '512x512', type: 'image/png' }
      ],
      start_url: '.',
      display: 'standalone',
      theme_color: '#ffffff'
    }
  })]
}

💾 2️⃣ 專案推上 GitHub

git init
git remote add origin https://github.com/你的帳號/你的repo.git
git add .
git commit -m "Initial PWA Commit"
git push -u origin main

🚀 3️⃣ 連結 Netlify 自動部署

✅ 設定步驟：

1. 登入 Netlify
2. 選擇「New Site from Git」
3. 選擇 GitHub，連結你的 Repo
4. 設定：

• Build Command：npm run build
• Publish Directory：dist

5. 點擊「Deploy Site」

✅ 自動化：

往後只要 git push，Netlify 會：

• 自動拉取最新 commit
• 自動 build
• 自動部署上線

🌐 4️⃣ PWA 安裝與驗證

• 手機 Chrome 開啟網站 ➔ 會看到「加入主畫面」提示
• iOS Safari ➔ 點選分享 ➔ 加到主畫面
• Chrome DevTools ➔ Application ➔ Service Worker 正常運作

✅ 重點技術知識與細節整理

📱 PWA 核心技術要點

☁ Netlify 免費版關鍵限制

🔎 GitHub + Netlify 自動化重點

• 每次 git push ➔ Netlify 自動 build 與上線

可在 Netlify 後台看到：

• Build Logs
• Deploy Preview
• Production URL

支援 .netlify.toml 高級配置，例如：

[build]
  command = "npm run build"
  publish = "dist"
[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

✅ 解決 React Router 路由問題

✅ 手機安裝後體驗像原生 App（重點細節）

✅ 延伸功能（進階可加）

• Web Push 通知
• 離線 AI 模型推論（結合 Transformers.js）
• IndexedDB 大量資料離線快取
• 多語系（i18n）
• 數據分析整合（Plausible / Umami）

✅ 結論與實戰建議

✅ 成本超低（全免費）
✅ 體驗接近原生 App
✅ 部署無痛，適合快速 MVP / side project / AI 產品