跳至主要內容
版本：v8

Angular 中的漸進式網頁應用程式

將您的 Angular 應用程式變成 PWA​

PWA 的兩個主要需求是 Service Worker 和 Web Manifest。雖然可以手動將這兩者新增至應用程式，但 Angular 團隊有一個 @angular/pwa 套件可用於自動化此過程。

@angular/pwa 套件會自動將 Service Worker 和應用程式資訊清單新增至應用程式。若要將此套件新增至應用程式，請執行

ng add @angular/pwa

新增此套件後，執行 ionic build --prod，www 目錄即可部署為 PWA。

注意

依預設，@angular/pwa 套件會使用 Angular 標誌作為應用程式圖示。請務必更新資訊清單以使用正確的應用程式名稱，並更換圖示。

注意

Service Workers 和許多 JavaScript API (例如地理位置) 等功能要求應用程式託管在安全環境中。透過託管服務部署應用程式時，請注意需要 HTTPS 才能充分利用 Service Workers。

Service Worker 設定​

新增 @angular/pwa 之後，會在專案的根目錄中建立新的 ngsw-config.json 檔案。此檔案負責設定 Angular 的 Service Worker 機制如何處理快取資產。依預設，會提供以下內容

{
  "$schema": "./node_modules/@angular/service-worker/config/schema.json",
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": ["/favicon.ico", "/index.html", "/*.css", "/*.js"]
      }
    },
    {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": ["/assets/**", "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"]
      }
    }
  ]
}

其中有兩個區段，一個用於應用程式特定的資源 (JS、CSS、HTML)，另一個用於應用程式將依需求載入的資產。根據您的應用程式，可以自訂這些選項。如需更詳細的指南，請參閱 Angular 團隊的官方指南。

部署​

Firebase​

Firebase 託管為漸進式網頁應用程式提供了許多優點，包括透過 CDN 實現的快速回應時間、預設啟用的 HTTPS 以及對 HTTP2 推送 的支援。

首先，如果尚不可用，請在 Firebase 中建立專案。

接下來，在終端機中，安裝 Firebase CLI

npm install -g firebase-tools
注意

如果您是第一次使用 firebase-tools，請使用 firebase login 命令登入您的 Google 帳戶。

安裝 Firebase CLI 後，在您的 Ionic 專案中執行 firebase init。CLI 會提示

「您想要為此資料夾設定哪些 Firebase CLI 功能？」選擇「託管：設定 Firebase 託管的檔案並 (選擇性地) 設定 GitHub Action 部署」。

建立新的 Firebase 專案或選取現有的專案。

「選取此目錄的預設 Firebase 專案：」選擇您在 Firebase 網站上建立的專案。

「您想要將什麼作為您的公用目錄？」輸入「www」。

注意

回答下一個問題將確保路由、硬重新載入和深度連結在應用程式中正常運作

「設定為單頁應用程式 (將所有 URL 重寫為 /index.html)？」輸入「是」。

「檔案 build/index.html 已經存在。要覆寫嗎？」輸入「否」。

使用 Github 設定自動建置和部署？輸入「是」。

您想要為哪個 GitHub 儲存庫設定 Github 工作流程？輸入您的專案名稱。

設定工作流程以在每次部署前執行建置腳本？輸入「是」。

每次部署前應執行什麼腳本？輸入 npm ci && npm run build。

當 PR 合併時，設定自動部署到您網站的即時通道？輸入「是」。

與您網站即時通道關聯的已連接分支的名稱是什麼？輸入專案的主要分支名稱。

會產生 firebase.json 設定檔，以設定應用程式以進行部署。

最後需要做的是確保快取標頭已正確設定。若要執行此操作，請將 headers 片段新增至 firebase.json 檔案。完整的 firebase.json 看起來像

{
  "hosting": {
    "public": "www",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ],
    "headers": [
      {
        "source": "/build/app/**",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "public, max-age=31536000"
          }
        ]
      },
      {
        "source": "ngsw-worker.js",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "no-cache"
          }
        ]
      }
    ]
  }
}

如需更多有關 firebase.json 屬性的資訊，請參閱 Firebase 文件。

接下來，執行以下命令來建置應用程式的優化版本

ionic build --prod

最後，執行以下命令來部署應用程式

firebase deploy

完成後，應用程式將會上線。

目錄

編輯此頁面