漸進式網頁應用程式（Progressive Web App，PWA）具有許多優勢：

1. 離線功能：Service Worker 會快取各項資產（圖示、圖片、字型等），讓應用程式即使在離線或網路連線緩慢時仍能正常運作
2. 即時載入速度：資產已經保存在儲存空間中，因此應用程式載入速度大幅提升
3. 推播最新更新通知：當部署新的正式版本時，我們可以透過程式向用戶端應用程式發送提醒。使用者可以點擊更新按鈕重新載入視窗以取得最新變更
4. 漸進式網頁應用程式（PWA）可安裝在行動裝置的主畫面上，或作為桌面應用程式使用。使用單一程式碼庫，即可在行動裝置和桌上型電腦之間無縫運作。

我之前並不熟悉 PWA，因此 AI 在起草需求與 ADR 文件、生成測試以及依據規格實作程式碼方面提供了極大的協助。

讓我向您展示如何在不寫一行程式碼的情況下，在應用程式中支援 PWA。

定義需求與架構決策記錄（ADR）

我使用了 grill-with-docs 技能，並提示模型在應用程式中支援 PWA：

/grill-with-docs I would like to support PWA in this application so that users can update the application when a new production is deployed

在釐清需求之後，我使用 to-spec 來生成 PRD。

/to-spec Please generate the requirements in a PRD

模型在 .scratch/<feature id>/spec.md 中生成了 PWA 的使用者故事 (User Stories)。

接著，我請 grill-with-docs 加入 ADR，因為這是一個不可逆的架構決策。

Write the ADR for me please.

如果您有興趣，可以閱讀這份 ADR 的完整內容。

附註： 當發現其他有用的 PWA 功能時，PRD 和 ADR 都可以隨時進行更新。

接下來，我們使用 implement 和 tdd 來實作功能並生成測試。

當這是一個新功能時，我會先使用 implement 來生成程式碼。在 Angular 服務或元件尚未建立之前，我要如何使用 tdd 來生成或修改 spec.ts 檔案呢？

如果是現有功能，我們有兩個選項：
選項 1： 使用 implement 生成程式碼。接著套用 tdd 來找出測試情境並生成 Vitest 測試案例。當功能較為複雜且希望節省時間時，我會選擇此選項。
選項 2： 如果我想學習新事物並培養肌肉記憶，我會選擇這個選項。

步驟流程：

1. 套用 tdd 來新增測試案例。如果我要求 angular-cli MCP 伺服器執行 spec.ts，這些新的測試案例將會失敗
2. 我手動實作這些變更
3. 要求 MCP 伺服器執行測試以驗證通過
4. 套用 code-review 以確保功能分支符合 PRD 與 ADR 中的需求
5. 將功能分支合併至 main 並推送程式碼

PWA 需求是採用選項 1 進行實作的。

今天，我將展示提示詞、工作流程以及初始化程式碼。
明天，我將展示 PWA 服務、PWA spec 檔案以及 PWA 橫幅（banner）元件的程式碼。

實作漸進式網頁應用程式

安裝 PWA 依賴套件（因為我想節省一些 token）：

npm i --save-exact @angular/service-worker

提示模型在 public/icons 中生成圖示：

Generate 192x192 and 512x512 icons in public/icons folder

這些圖示可以在此資料夾中找到。

提示模型實作該功能：

/implement the feature based on <full path of PRD> and <full path of ADR>

等待 AI 生成變更。完成後，請 AI 撰寫測試案例：

/tdd create test cases for <full path of PWA services> and <full path of PWA banner component>

根據我的經驗，建議套用 tdd 技能兩次。因為在被詢問兩次時，Gemini 通常會列出額外的測試案例。

核准此計畫，以便 Gemini 生成測試案例。

驗證

angular-cli 和 vitest MCP 伺服器都具有執行測試的工具，但我使用 ``angular-cli` 的工具，因為它是專為 Angular 測試所設計的。

提示 MCP 伺服器執行 spec.ts 以驗證 100% 正確性：

angular-cli: run <full path of the spec.ts>

如果評分不是 100%，請 Vitest 偵錯測試檔案以找出根本原因：

提示詞類似於：

vitest-mcp: debug <full path of the spec.ts> to find out why the tests failed

當評分終於達到 100% 時，請 Vitest 分析程式碼涵蓋率：

vitest-mcp: analyze the code cover of <full path of the spec.ts>

如果涵蓋率較低，請套用 tdd 找出遺漏的測試情境並進行實作。我們的目標是高於某個門檻的百分比（例如 85 - 90%）。

這就是我在將 PWA 加入 Angular 應用程式時所採用的工作流程。這是一次令人驚豔的體驗，因為這一切都是透過 AI 程式碼 Agent 和模型實現的。

接下來展示初始化程式碼。

PWA 設定

以下 JSON 檔案已生成或修改：

1. Service Worker 設定檔 (ngsw-config.json) (新增)
2. Web Manifest 設定檔 (manifest.webmanifest) (新增)
3. angular.json 設定檔。在該 JSON 檔案中加入 "serviceWorker": "ngsw-config.json",
4. PWA 提供者 (Provider)。將 Service Worker 提供者加入應用程式設定中

import { ApplicationConfig, isDevMode} from '@angular/core';
import { provideServiceWorker } from '@angular/service-worker';

export const appConfig: ApplicationConfig = {
  providers: [
    ... other providers ...
    provideServiceWorker('ngsw-worker.js', {
      enabled: !isDevMode(),
      registrationStrategy: 'registerWhenStable:30000',
    }),
  ],
};

PWA 只能在正式環境建置中進行測試，因此我安裝了 serve 開發依賴套件，並在 package.json 中加入了 preview 指令稿，以便在 Part 2 中進行驗證。

npm i --save-exact --save-dev serve

"scripts": {
    ... other scripts
    "preview": "npx serve dist/ng-firebase-tts/browser -p 5005 -s",
}

提示模型執行新指令稿：

execute npm run preview please

The production preview server is up and running! 🚀 
  
* URL: http://localhost:5005
* Serving: dist/ng-firebase-tts/browser
* Status: Running in the background with Service Worker and PWA manifest active.

如果執行了 npm run build，我們將會在瀏覽器中看到新的提醒，提示重新載入視窗以獲取新資產。

我們先在此告一段落，明天我們將會看到服務與元件的程式碼。

相關資源：
Angular Service Worker 與 PWA