跳到主要内容
版本：v8

Progressive Web Apps in React

使用 Vite 将你的 React 应用转换为 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 react from '@vitejs/plugin-react';
import { VitePWA } from 'vite-plugin-pwa';

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

这个最小配置允许你的应用在构建时生成 Web 应用清单和 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 应用清单。虽然可以手动将它们添加到应用中，但来自 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>
);

// 如果你希望应用离线工作并加载更快，可以将下面的
// unregister() 改为 register()。请注意这有一些弊端。
// 有关 Service Worker 的更多信息：https://cra.link/PWA
serviceWorkerRegistration.register();

添加此包后，运行 ionic build 命令，build 目录将准备好作为 PWA 部署。

备注

默认情况下，react 应用包附带 Ionic 徽标作为应用图标。请务必更新清单以使用正确的应用名称，并替换图标。

备注

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 托管为渐进式 Web 应用提供了许多优势，包括借助 CDN 实现的快速响应时间、默认启用的 HTTPS 以及对 HTTP2 推送 的支持。

首先，如果尚未创建，请在 Firebase 中 创建项目。

接下来，在终端中安装 Firebase CLI：

npm install -g firebase-tools
备注

如果你是首次使用 firebase-tools，请使用 firebase login 命令登录你的 Google 账户。

安装 Firebase CLI 后，在你的 Ionic 项目中运行 firebase init。CLI 会提示：

"Which Firebase CLI features do you want to set up for this folder?" 选择 "Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys"。

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

"Select a default Firebase project for this directory:" 选择你在 Firebase 网站上创建的项目。

"What do you want to use as your public directory?" 输入 "build"。

备注

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

Configure as a single-page app (rewrite all urls to /index.html)?" 输入 "Yes"。

"File build/index.html already exists. Overwrite?" 输入 "No"。

Set up automatic builds and deploys with Github? 输入 "Yes"。

For which GitHub repository would you like to set up a Github Workflow? 输入你的项目名称。

Set up the workflow to run a build script before every deploy? 输入 "Yes"。

What script should be run before every deploy? 输入 npm ci && npm run build。

Set up automatic deployment to your sites live channel when a PR is merged? 输入 "Yes"。

What is the name of the get hooked branch associated with your sites live channel? 输入你的项目的主分支名称。

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

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

完成后，应用将上线。

Contents

编辑此页