版本：v8

Vue 中的漸進式 Web 應用程式

使用 Vite 將您的 Vue 應用程式設為 PWA

PWA 的兩個主要需求是 Service Worker 和 Web 應用程式資訊清單。雖然可以手動將這兩者新增至應用程式，但我們建議改用 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 vue from '@vitejs/plugin-vue';
import { VitePWA } from 'vite-plugin-pwa';

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

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

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

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

使用 Vue CLI 將您的 Vue 應用程式設為 PWA

注意

從 Ionic CLI v7 開始，Ionic Vue starter 應用程式隨附 Vite 而非 Vue CLI。請參閱使用 Vite 將您的 Vue 應用程式設為 PWA 以取得 Vite 指示。

PWA 的兩個主要需求是 Service Worker 和 Web 應用程式資訊清單。雖然可以手動將這兩者新增至應用程式，但 Vue CLI 提供了一些公用程式來為您新增此功能。

對於現有專案，您可以執行 vue add 命令來安裝 Vue 的 PWA 外掛程式。

vue add pwa

注意

如果您已進行變更，請務必將其提交至 Git。

完成此步驟後，Vue 的 CLI 將會建立新的 registerServiceWorker.ts 檔案，並將其匯入到我們的 main.ts 中。

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
// Added by the CLI
import './registerServiceWorker';

createApp(App).use(router).mount('#app');

registerServiceWorker.ts 檔案將會指向 CLI 在建置時建立的 Service Worker。在此檔案中，我們可以自訂當 Service Worker 偵測到更新、網路連線變更或收到錯誤時，使用者會有的體驗。

import { register } from 'register-service-worker';

if (process.env.NODE_ENV === 'production') {
  register(`${process.env.BASE_URL}service-worker.js`, {
    ready() {
      console.log(
        'App is being served from cache by a service worker.\n' + 'For more details, visit https://goo.gl/AFskqB'
      );
    },
    registered() {
      console.log('Service worker has been registered.');
    },
    cached() {
      console.log('Content has been cached for offline use.');
    },
    updatefound() {
      console.log('New content is downloading.');
    },
    updated() {
      console.log('New content is available; please refresh.');
    },
    offline() {
      console.log('No internet connection found. App is running in offline mode.');
    },
    error(error) {
      console.error('Error during service worker registration:', error);
    },
  });
}

產生的 Service Worker 是以 Workbox 的 webpack 外掛程式為基礎，並且預設設定為使用 GenerateSW()。這表示在建置時，Workbox 會自動為其處理的所有檔案產生 Service Worker 快取。

如果您想要設定此設定並變更預設行為，請查看 GitHub 上的 PWA 外掛程式文件。

資訊清單

除了 Service Worker 之外，Vue PWA 外掛程式也負責為您的應用程式建立資訊清單檔案。根據預設，CLI 將會產生包含下列項目的資訊清單。

{
  "name": "pwa-test",
  "short_name": "pwa-test",
  "theme_color": "#4DBA87",
  "icons": [
    {
      "src": "./img/icons/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "./img/icons/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    },
    {
      "src": "./img/icons/android-chrome-maskable-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "maskable"
    },
    {
      "src": "./img/icons/android-chrome-maskable-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ],
  "start_url": ".",
  "display": "standalone",
  "background_color": "#000000"
}

請務必更新 public/img/icons 中的圖示，以符合您自己的品牌。如果您想要自訂主題顏色或名稱，請務必閱讀 GitHub 上的 PWA 外掛程式文件。

部署

您可以使用各種主機，例如 Firebase、Vercel、Netlify，甚至 Azure Static Web Apps。所有主機都會有類似的設定程序需要完成。在本指南中，Firebase 將會用作主機範例。除了本指南之外，Vue CLI 文件也有關於如何部署至各種提供者的指南。

Firebase

Firebase Hosting 為漸進式 Web 應用程式提供了許多優點，包括由於 CDN 而具有快速的回應時間、預設啟用 HTTPS，以及支援 HTTP2 推送。

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

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

npm install -g firebase-tools

注意

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

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

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

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

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

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

注意

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

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

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

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

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

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

每次部署之前應執行什麼指令碼？ 輸入 npm ci && npm run build。

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

與您網站的線上頻道相關聯的 get hooked 分支名稱是什麼？ 請輸入您專案的主要分支名稱。

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

最後需要確保快取標頭設定正確。為此，請將 headers 代码片段添加到 firebase.json 檔案中。完整的 firebase.json 如下所示：

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

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

接下來，執行以下指令來建置應用程式的最佳化版本：

ionic build

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

firebase deploy

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

使用 Vite 將您的 Vue 應用程式設為 PWA​

使用 Vue CLI 將您的 Vue 應用程式設為 PWA​

資訊清單​

部署​

Firebase​

目錄

使用 Vite 將您的 Vue 應用程式設為 PWA

使用 Vue CLI 將您的 Vue 應用程式設為 PWA

資訊清單

部署

Firebase