react-slingshot 渐进式Web应用：PWA 功能完整实现

宁菁令

700人浏览 · 2025-10-21 02:21:49

宁菁令 · 2025-10-21 02:21:49 发布

react-slingshot 渐进式Web应用：PWA 功能完整实现

【免费下载链接】react-slingshot React + Redux starter kit / boilerplate with Babel, hot reloading, testing, linting and a working example app built in 项目地址: https://gitcode.com/gh_mirrors/re/react-slingshot

你是否遇到过这样的问题：用户在网络不稳定时无法访问你的React应用？或者希望应用能像原生App一样离线运行？本文将带你一步步在react-slingshot框架中实现完整的PWA（Progressive Web App，渐进式Web应用）功能，让你的应用具备离线访问、资源缓存和桌面图标等特性，提升用户体验。读完本文，你将掌握PWA核心技术在react-slingshot中的落地方法，包括Service Worker注册、缓存策略配置和Manifest文件创建。

PWA与react-slingshot基础

PWA（Progressive Web App，渐进式Web应用）是一种结合了Web和原生应用优点的技术方案，主要特性包括离线访问、后台同步、消息推送和桌面安装等。react-slingshot作为React+Redux的脚手架工具，提供了Webpack构建系统和开发环境，为PWA实现提供了良好基础。

从项目的package.json可以看到，react-slingshot 7.0.1版本已集成Webpack 4、Babel 7和React 16等现代前端工具链，但默认配置中尚未包含PWA相关功能。我们将通过添加Service Worker、配置缓存策略和创建Manifest文件来实现PWA功能。

实现步骤

步骤1：添加PWA依赖

首先需要安装Workbox相关依赖，Workbox是Google开发的PWA工具库，简化了Service Worker的配置和管理。执行以下命令安装依赖：

npm install workbox-webpack-plugin workbox-window --save-dev

步骤2：配置Webpack的PWA插件

修改webpack.config.prod.js，添加Workbox插件以生成Service Worker并配置缓存策略。在plugins数组中添加以下代码：

const { InjectManifest } = require('workbox-webpack-plugin');

// 在现有plugins数组中添加
new InjectManifest({
  swSrc: './src/service-worker.js', // Service Worker源文件路径
  swDest: 'service-worker.js', // 输出的Service Worker文件
  exclude: [/\.map$/, /asset-manifest\.json$/], // 排除不需要缓存的文件
}),

步骤3：创建Service Worker文件

在src目录下创建src/service-worker.js文件，实现资源缓存和离线功能：

import { precacheAndRoute } from 'workbox-precaching';
import { registerRoute } from 'workbox-routing';
import { StaleWhileRevalidate, CacheFirst } from 'workbox-strategies';
import { CacheableResponsePlugin } from 'workbox-cacheable-response';

// 预缓存Webpack生成的资源
precacheAndRoute(self.__WB_MANIFEST);

// 缓存API请求（使用StaleWhileRevalidate策略）
registerRoute(
  ({ url }) => url.pathname.startsWith('/api/'),
  new StaleWhileRevalidate({
    cacheName: 'api-cache',
    plugins: [
      new CacheableResponsePlugin({
        statuses: [0, 200],
      }),
    ],
  })
);

// 缓存图片（使用CacheFirst策略）
registerRoute(
  ({ request }) => request.destination === 'image',
  new CacheFirst({
    cacheName: 'image-cache',
    plugins: [
      new CacheableResponsePlugin({
        statuses: [0, 200],
      }),
    ],
  })
);

步骤4：注册Service Worker

修改src/index.js，在应用加载时注册Service Worker：

// 在文件底部添加Service Worker注册代码
if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/service-worker.js')
      .then(registration => {
        console.log('ServiceWorker registration successful');
      })
      .catch(err => {
        console.log('ServiceWorker registration failed: ', err);
      });
  });
}

步骤5：创建Web App Manifest

在public目录下创建public/manifest.json文件，定义应用的桌面图标和启动行为：

{
  "short_name": "React Slingshot",
  "name": "React Slingshot PWA",
  "icons": [
    {
      "src": "favicon.ico",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    },
    {
      "src": "logo192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "logo512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

步骤6：更新HTML模板

修改src/index.ejs，添加Manifest文件引用和PWA相关meta标签：

<!-- 在head标签中添加 -->
<link rel="manifest" href="/manifest.json">
<meta name="theme-color" content="#000000">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="apple-touch-icon" href="/logo192.png">