使用 PWA 构建现代、可安装的 Web 应用：终极指南

什么是渐进式 Web 应用程序？

渐进式 Web 应用 (PWA) 是一种使用标准 Web 技术（如 HTML、CSS 和 JavaScript）构建的应用，但具有原生应用的功能。PWA 结合了 Web 应用的可访问性以及通常与移动应用相关的功能，例如离线支持、推送通知和直接从浏览器安装。PWA 的主要目标是：

可靠：即使在网络不可靠的情况下也能快速加载且可访问。

引人入胜：提供推送通知、后台同步和流畅动画等功能。

可安装：无需应用商店即可添加到用户的主屏幕或桌面。

使用 Vite React App 创建 PWA

要使用 Vite 和 React 创建渐进式 Web 应用 (PWA)，您需要使用 Vite 更快的构建流程以及 PWA 插件来处理服务工作线程和缓存。以下是分步指南：

1. 使用 Vite 设置 React 项目

首先，使用 React 创建一个新的 Vite 项目：

npm create vite@latest my-app --template react
cd my-app
npm install

2. 安装 Vite PWA 插件：

接下来，安装 vite-plugin-pwa，它可以简化添加 PWA 功能（如服务工作线程和 Web 应用清单）的过程：

npm install vite-plugin-pwa

3.配置 Vite PWA 插件

在 vite.config.js 文件中，导入并配置 PWA 插件。添加以下内容：

// vite.config.js
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { VitePWA } from "vite-plugin-pwa";

export default defineConfig({
  plugins: [
    react(),
    VitePWA({
      registerType: "autoUpdate",
      includeAssets: ["favicon.svg", "robots.txt", "apple-touch-icon.png"],
      manifest: {
        name: "YOUR APP NAME",
        short_name: "YOUR NAME",
        description: "SHORT DESC",
        theme_color: "#ffffff",
        background_color: "#ffffff",
        display: "standalone",
        start_url: "/",
        icons: [
          {
            src: "/icon-192x192.png",
            sizes: "192x192",
            type: "image/png",
            purpose: "any"
          },
          {
            src: "/icon-512x512.png",
            sizes: "512x512",
            type: "image/png",
            purpose: "any"
          },
          {
            src: "/icon-144x144.png",
            sizes: "144x144",
            type: "image/png",
            purpose: "any"
          }
        ],
        screenshots: [
          {
            src: "/screenshot-wide.png",
            sizes: "3840x2160",
            type: "image/png",
            form_factor: "wide"
          },
          {
            src: "/screenshot-mobile.png",
            sizes: "2160x3840",
            type: "image/png",
            form_factor: "narrow"
          }
        ]
      },
    }),
  ],
});

以下是各个选项的细分：

registerType: 'autoUpdate'：确保服务工作者自动更新。

manifest：定义 PWA 安装后的外观和行为。调整 name、short_name 和 theme_color 等详细信息以匹配您的应用。

图标：在公共文件夹中添加图标（例如，public/pwa-144x144.png，public/pwa-192x192.png，public/pwa-512x512.png，public/screenshot-wide.png 和 public/screenshot-mobile.png）。

4.向公共目录添加图标

确保在清单中指定的公共目录中添加图标和 img 文件（例如，public/pwa-144x144.png、public/pwa-192x192.png、public/pwa-512x512.png、public/screenshot-wide.png 和 public/screenshot-mobile.png）。

5. 启用离线缓存和自定义 Service Worker 配置（可选）

VitePWA 中的 Workbox 选项允许您设置高级缓存和离线策略。要启用特定的缓存行为，您可以自定义 Workbox 配置。

6. 构建并测试 PWA

开发测试：以开发模式运行应用程序：

npm run dev

生产构建：PWAs 在生产中完全正常运行，因此请构建应用程序并在本地提供服务：

npm run build
npm install -g serve
serve -s dist

验证 PWA 安装：在 Chrome 中打开应用，转到 DevTools，然后选择“应用程序”选项卡。查看清单和服务工作者部分，以确保应用符合 PWA 的条件。

现在，您的 Vite + React 项目是一个 PWA，配备了服务工作线程、缓存和可安装性！此设置在基于 Vite 的快速开发环境中提供了 PWA 的所有优势。

CLIS.CC