跳到主要内容
版本: v8

React 中的渐进式 Web 应用程序

使用 Vite 使您的 React 应用程序成为 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 react from '@vitejs/plugin-react';
import { VitePWA } from 'vite-plugin-pwa';

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

此最小配置允许您的应用程序在构建时生成 Web 应用程序清单和服务工作者。

有关配置 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 的两个主要要求是 服务工作者 和 Web 应用程序清单。虽然可以手动将这两者都添加到应用程序中，但 Create React App (CRA) 和 Ionic CLI 提供的基项目已经提供了这些内容。

在应用程序的 index.ts 中，有一个对 serviceWorker.unregister() 函数的调用。CRA 提供的基项目将服务工作者作为一种可选功能，因此必须启用它。要启用，请调用 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 徽标作为应用程序图标。请务必更新清单以使用正确的应用程序名称，并替换图标。

注意

诸如服务工作者和许多 JavaScript API（例如地理位置）之类的功能要求应用程序托管在安全上下文中。在通过托管服务部署应用程序时，请注意，HTTPS 将是充分利用服务工作者的必要条件。

服务工作者配置​

默认情况下，CRA/React 脚本附带基于 Workbox 的 Webpack 插件 的预配置服务工作者设置。这利用了缓存优先策略，这意味着即使网络返回应用程序的更新版本，您的应用程序也将从缓存中加载。

由于 CRA/React 脚本的性质，此配置是 React 脚本的内部配置，这意味着无法在不从 React 脚本中弹出时自定义它。目前，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 会提示您

“您想为该文件夹设置哪些 Firebase CLI 功能？” 选择“托管：为 Firebase 托管配置文件并（可选）设置 GitHub Action 部署”。

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

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

“您想使用什么作为您的公共目录？” 输入“build”。

注意

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

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

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

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

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

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

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

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

与您网站的实时频道关联的 get hooked 分支的名称是什么？ 输入您的项目的 main 分支名称。

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

完成此操作后，应用程序将上线。

内容

编辑此页面