跳到主要内容
版本：v7

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 启动项目使用 Vite 而非 Vue CLI。有关 Vite 的说明，请参阅使用 Vite 将 Vue 应用变为 PWA。

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';
// 由 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(
        '应用正在通过 service worker 从缓存中提供。\n' + '更多详情，请访问 https://goo.gl/AFskqB'
      );
    },
    registered() {
      console.log('Service worker 已注册。');
    },
    cached() {
      console.log('内容已缓存，可用于离线使用。');
    },
    updatefound() {
      console.log('新内容正在下载中。');
    },
    updated() {
      console.log('新内容可用，请刷新。');
    },
    offline() {
      console.log('未找到网络连接。应用正在离线模式下运行。');
    },
    error(error) {
      console.error('Service worker 注册过程中出错：', 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 托管为渐进式 Web 应用提供了许多好处，包括借助 CDN 实现的快速响应时间、默认启用的 HTTPS 以及对 HTTP2 push 的支持。

首先，如果尚未创建，请在 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）？" 输入 "Yes"。

"文件 build/index.html 已存在。是否覆盖？" 输入 "No"。

"设置与 Github 的自动构建和部署？" 输入 "Yes"。

"您想为哪个 GitHub 仓库设置 Github Workflow？" 输入您的项目名称。

"设置工作流在每次部署前运行构建脚本？" 输入 "Yes"。

"每次部署前应运行什么脚本？" 输入 npm ci && npm run build。

"当 PR 合并时，设置自动部署到您站点的 live 频道？" 输入 "Yes"。

"与您站点的 live 频道关联的 get hooked 分支名称是什么？" 输入您项目的主分支名称。

将生成一个 firebase.json 配置文件，配置应用用于部署。

最后需要做的是确保缓存头设置正确。为此，在 firebase.json 文件中添加一个 headers 片段。完整的 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

完成后，应用将上线。

目录

编辑此页