在 React 中建立漸進式網頁應用程式

使用 Vite 將您的 React 應用程式變成 PWA

PWA 的兩個主要需求是 Service Worker 和 Web Application Manifest。雖然可以手動將這兩者新增到應用程式，但我們建議改用 Vite PWA 外掛程式。

若要開始，請安裝 vite-plugin-pwa 套件

npm install -D vite-plugin-pwa

接下來，更新您的 vite.config.js 或 vite.config.ts 檔案並新增 vite-plugin-pwa

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { VitePWA } from 'vite-plugin-pwa';

export default defineConfig({
  plugins: [react(), VitePWA({ registerType: 'autoUpdate' })],
});

此最小設定可讓您的應用程式在建置時產生 Web Application Manifest 和 Service Worker。

如需有關設定 Vite PWA 外掛程式的詳細資訊，請參閱 Vite PWA「開始使用」指南。

如需有關如何部署 PWA 的資訊，請參閱 Vite PWA「部署」指南。

使用 Create React App 將您的 React 應用程式變成 PWA

注意

從 Ionic CLI v7 開始，Ionic React 入門應用程式隨附 Vite 而非 Create React App。有關 Vite 指示，請參閱使用 Vite 將您的 React 應用程式變成 PWA。

PWA 的兩個主要需求是 Service Worker 和 Web Application Manifest。雖然可以手動將這兩者新增到應用程式，但 Create React App (CRA) 和 Ionic CLI 的基本專案已提供這兩者。

在應用程式的 index.ts 中，會呼叫 serviceWorker.unregister() 函式。CRA 提供的基本架構將 service worker 作為選擇加入功能，因此必須啟用。若要啟用，請呼叫 serviceWorker.register()。

import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';
import * as serviceWorkerRegistration from './serviceWorkerRegistration';

const container = document.getElementById('root');
const root = createRoot(container!);
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://cra.link/PWA
serviceWorkerRegistration.register();

新增此套件後，執行 ionic build，build 目錄就會準備好部署為 PWA。

注意

預設情況下，react 應用程式套件隨附 Ionic 標誌作為應用程式圖示。請務必更新 manifest 以使用正確的應用程式名稱，並同時取代圖示。

注意

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

Service Worker 設定

預設情況下，CRA/React Scripts 隨附根據 Workbox 的 Webpack 外掛程式的預先設定 Service Worker 設定。這會利用快取優先策略，這表示您的應用程式會從快取載入，即使網路傳回較新版本的應用程式也一樣。

由於 CRA/React Scripts 的本質，此設定在 React Scripts 內部，這表示若不從 React Scripts 退出，就無法自訂。目前，Ionic CLI 不支援已退出的 React 應用程式，因此如果執行此動作，您需要使用 npm/yarn 指令碼，而不是 Ionic CLI。

部署

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 網站上建立的專案。

「您要將哪個作為公開目錄？」輸入「build」。

注意

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

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

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

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

「您想要為哪個 GitHub 存放庫設定 Github Workflow？」輸入您的專案名稱。

「設定工作流程以在每次部署之前執行建置指令碼嗎？」輸入「是」。

「每次部署之前應執行哪個指令碼？」輸入 npm ci && npm run build。

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

「與您的網站即時通道相關聯的已勾選分支的名稱是什麼？」輸入您的專案主要分支名稱。

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

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

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

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

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

ionic build --prod

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

firebase deploy

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