使用 Angular CLI 建立漸進式網頁應用程式

想讓 Angular 應用程式可供安裝嗎？還在等什麼？

Minko Gechev

本文將說明如何使用 Angular 指令列介面 (CLI) 建立漸進式網頁應用程式 (PWA)。

您可以在 GitHub 找到本指南的程式碼範例。

建立可安裝的 PWA

如要將 Angular 應用程式設為 PWA，只需執行單一指令：

ng add @angular/pwa

這段指令會執行下列動作：

  • 使用預設快取設定建立Service Worker。
  • 建立資訊清單檔案，告知瀏覽器應用程式安裝在使用者裝置上時的行為。
  • 在 index.html 中新增資訊清單檔案的連結。
  • 將 theme-color <meta> 標記新增至 index.html。
  • 在 src/assets 目錄中建立應用程式圖示。

根據預設，Service Worker 應在首次載入網頁後幾秒內完成註冊。如果不是，請考慮修改 registrationStrategy。

自訂 PWA

「使用 Angular Service Worker 預先快取」一文說明如何設定 Angular Service Worker。您可以在該處瞭解如何指定要讓 Service Worker 快取的資源，以及應使用的策略。

您可以在應用程式的資訊清單檔案中指定應用程式名稱、簡稱、圖示、主題顏色和其他詳細資料。如要瞭解可設定的完整屬性集，請參閱「新增網頁應用程式資訊清單」一文。

請查看 Angular CLI 產生的資訊清單檔案：

{
  "name": "manifest-web-dev",
  "short_name": "manifest-web-dev",
  "theme_color": "#1976d2",
  "background_color": "#fafafa",
  "display": "standalone",
  "scope": "/",
  "start_url": "/",
  "icons": [
    {
      "src": "assets/icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    …
    {
      "src": "assets/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

如要自訂任何屬性，請在 manifest.webmanifest 中變更相關值。

PWA 會在 index.html 中使用 link 元素參照資訊清單檔案。瀏覽器找到參照內容後，會顯示「新增至主畫面」提示：

漸進式網頁應用程式安裝提示

由於 ng-add 結構圖會新增所有必要項目，讓應用程式可供安裝，因此會產生一些捷徑圖示，使用者將應用程式新增至桌面後就會顯示這些圖示：

漸進式網頁應用程式捷徑圖示

請務必先自訂資訊清單屬性和圖示，再將 PWA 部署至正式環境！

結論

如要建立可安裝的 Angular 應用程式，請按照下列步驟操作：

  1. 使用 Angular CLI 將 @angular/pwa 新增至專案。
  2. 編輯 manifest.webmanifest 檔案中的選項，以符合專案需求。
  3. 更新 src/assets/icons 目錄中的圖示，以符合專案需求。
  4. 如要編輯 index.html 中的 theme-color，請選用這個步驟。