PWA Introduction

PWA

---

APP vs WEB

NOTE: https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Guides/What_is_a_progressive_web_app

---

Progressive Web App (漸進式網路應用程式)

• 定義：利用現代瀏覽器 API 提供的功能，讓網頁擁有接近「原生 App」的體驗。
• 核心理念：不需要透過 App Store 下載，只要有瀏覽器，就能安裝到桌面並離線運行。
• 優勢：可探索、可安裝、可連結、可獨立於網路、可漸進、可接合、響應式、安全。

---

NOTE: 本質上還是browser, 但背景有一個service worker在執行

---

PWA 的三大支柱 (The Core)

• HTTPS
• Web App Manifest
• Service Worker

NOTE: 這邊是註解。

---

HTTPS

• 安全性：Service Worker 權力極大（可攔截請求），必須防止中間人攻擊。
• 隱私權：許多強大 API（如 Push, Geolocation）僅限安全上下文使用。
• 信任感：確保 Service Worker 腳本與遊戲資源未被篡改。

例外：開發環境（localhost）允許使用 HTTP，方便開發調試。

---

Web App Manifest

• JSON
• 提供這個網站內容

---

<link rel="manifest" href="manifest.json" />

NOTE: 必須用 rel=“manifest” 引入, 圖片是幾個必要欄位, name or short name, ios16.4後mobile可以允許safari 以外的瀏覽器安裝, 之前只能是safari

---

離線與背景運作

• 在網路不穩或無網路時仍能運作
• 在主 App 未開啟時也能執行某些工作
• 通知使用者重要事件

---

Service Worker

• 一種特殊的 Web Worker
• 在主執行緒(Main thread)之外執行
• 負責離線與背景工作處理
• 與主頁不能直接存取變數，但可以用 postMessage 傳訊息

---

Service Worker 的運作

• install: 預先儲存靜態資源（CSS, JS, Images）。
• activate: 清理舊版快取。
• fetch: 攔截請求。如果沒網路，就從快取拿資料（離線模式的關鍵）。

NOTE:

• install 事件：當 sw.js 第一次被下載或更新時執行。這裡通常用來把遊戲貼圖、模型存進快取。
• activate 事件：當新版 sw.js 正式上位時執行。這裡用來刪除舊版的過時資源。
• fetch 事件：這是最忙的部分。每當網頁要抓 API 或圖片，都會經過這裡。你可以決定要「給他快取」還是「讓他去連網」。
• push 事件：當伺服器發送推播時，瀏覽器喚醒 sw.js 來顯示通知氣泡。

---

Demo

---

Push

---

NOTE: 三方協作流程 PWA 推播並非直接從伺服器送到瀏覽器，而是經過「推播服務 (Push Service)」： 使用者訂閱：前端取得訂閱資訊 (Subscription Object) 並傳給伺服器。 伺服器發送：後端使用私鑰簽署，將訊息送至瀏覽器指定的 Push Service。 Service Worker 接收：Push Service 將訊息派送至設備，喚醒 Service Worker。 顯示通知：Service Worker 呼叫系統 API 顯示通知視窗。

---

前端訂閱機制

• 權限檢查：使用 Notification.requestPermission() 詢問使用者。
• 取得訂閱：透過 registration.pushManager.subscribe() 產生資訊。
• VAPID 安全機制：使用公鑰 (Public Key) 確保訊息來源合法。

---

Service Worker監聽

sw.js

self.addEventListener('push', (event) => {
  const data = event.data.json(); // 解析後端傳來的 JSON
  const options = {
    body: data.body,
    icon: '/img/game-logo.png',
    data: { url: data.link } // 點擊後要跳轉的網址
  };
  event.waitUntil(
    self.registration.showNotification(data.title, options)
  );
});

---

實作注意事項與限制

1. HTTPS 限制：除了 localhost 外，PWA 推播必須在 HTTPS 環境下運作。
2. iOS 支援度：iOS 16.4+ 之後才支援 Web Push，且玩家必須先「新增至主螢幕」後才能啟動。
3. 使用者主動性：若使用者手動在瀏覽器設定中封鎖通知，開發者無法強制重啟，必須引導使用者去設定調整。

---

Badge

• 使用 setAppBadge() API

// 顯示數字 5
self.navigator.setAppBadge(count).catch((error) => {
  console.error("設定徽章失敗:", error);
});

// 若不傳入數字，則顯示一個簡單的小圓點 (依系統而定)
self.navigator.setAppBadge(count);

---

Badge demo