将你的 React + Vite 应用转换为 PWA

介绍

渐进式 Web 应用 (PWA) 是一种提供类似原生应用体验的 Web 应用。PWA 的设计目标是快速、可靠且支持离线使用。本文将介绍如何将 React + Vite 项目转换为 PWA。

步骤 1：向项目中添加必要的依赖项

我们需要两个依赖项才能将我们的应用变成 PWA。第一个是Workbox。Workbox是一个库，可以轻松地为您的应用添加离线支持。第二个是 Vite 插件——vite -plugin-pwa。您可以复制以下命令并粘贴到终端中。

npm install -D workbox-window vite-plugin-pwa

步骤 2：更新 vite 配置文件

在文件顶部导入我们已安装的插件vite.config.ts。

import { VitePWA } from "vite-plugin-pwa";

现在，在你的插件数组中添加VitePWA，并将一个对象作为参数。该对象必须如下所示👇

// https://vitejs.dev/config/
export default defineConfig({
    base: "./",
    plugins: [react(), VitePWA(manifestForPlugin)],
});

注意：manifest键必须与您的 manifest.json 相同。
另外，不要忘记添加一个具有可掩码角色的图标，因为它将用作用户安装您的 PWA 时应用程序的图标。

你的应用还没有可遮罩的图标吗？使用pwa-asset-generator为你的应用创建可遮罩的图标和启动画面。

此时，如果您打开开发者工具并为渐进式 Web 应用生成Lighthouse报告，您应该会得到类似如下的结果👇

看到这些错误不要惊慌。应用部署完成后，它们就会消失。

步骤 3：部署您的应用

现在，使用Netlify或Vercel等平台部署您的 React 应用。

应用部署完成后，请在浏览器中访问您的应用，并再次运行 Lighthouse 审核。

好了，各位！现在你们知道如何将 React 应用转换为渐进式 Web 应用 (PWA) 了🥳🎉。如果还有任何疑问，欢迎在评论区留言。我已经将我的一个 React 应用转换成了 PWA，点击这里查看。

如果你喜欢这篇文章并想保持联系，请务必查看我的Linktree。

快乐编程