版本：v8

Vue 中的渐进式 Web 应用

使用 Vite 将您的 Vue 应用打造为 PWA

PWA 的两大主要要求是服务工作者和 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 应用清单和服务工作者。

有关配置 Vite PWA 插件的更多信息，请参阅 Vite PWA “入门”指南。

有关如何部署 PWA 的信息，请参阅 Vite PWA “部署”指南。

使用 Vue CLI 将您的 Vue 应用打造为 PWA

注意

从 Ionic CLI v7 开始，Ionic Vue 启动器应用程序使用 Vite 而不是 Vue CLI。请参阅使用 Vite 将您的 Vue 应用打造为 PWA 以获取有关 Vite 的说明。

PWA 的两大主要要求是服务工作者和 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 在构建时创建的服务工作者。在这里，我们可以自定义用户在服务工作者检测到更新、网络连接更改或收到错误时的体验。

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);
    },
  });
}

生成的服务工作者基于 Workbox 的 webpack 插件，默认情况下设置为使用 GenerateSW()。这意味着在构建时，Workbox 将自动为它处理的所有文件生成一个服务工作者缓存。

如果您想配置并更改默认行为，请查看 GitHub 上的 PWA 插件文档。

清单

除了服务工作者之外，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 静态 Web 应用。所有这些都将具有类似的需要完成的设置过程。本指南将使用 Firebase 作为托管示例。除了本指南之外，Vue CLI 文档还提供了一个关于如何部署到各种提供商的指南。

Firebase

Firebase 托管为渐进式 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 功能？” 选择“托管：为 Firebase 托管配置文件，（可选）设置 GitHub 操作部署”。

创建一个新的 Firebase 项目或选择一个现有的项目。

“为该目录选择一个默认的 Firebase 项目：” 选择您在 Firebase 网站上创建的项目。

“您想将什么用作您的公共目录？” 输入“dist”。

注意

回答下一个问题将确保应用中的路由、硬重载和深度链接正常工作

“将其配置为单页应用（将所有 URL 重写为 /index.html）？” 输入“是”。

“文件 build/index.html 已存在。覆盖它吗？” 输入“否”。

“使用 Github 设置自动构建和部署？” 输入“是”。

“您想为哪个 GitHub 存储库设置 Github 工作流？” 输入您的项目名称。

“设置工作流以在每次部署之前运行构建脚本？” 输入“是”。

“每次部署之前应该运行哪个脚本？” 输入 npm ci && npm run build。

“在合并 PR 时自动部署到您的网站的实时频道？” 输入“是”。

“与您的网站实时频道关联的获取挂钩分支的名称是什么？” 输入您项目的多分支名称。

将生成一个 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