面试题：React中如何为组件添加基本的PWA支持

1. 配置Web应用清单（Web App Manifest）文件

创建manifest.json文件：在项目的公共目录（通常是public目录）下创建manifest.json文件。
定义基本信息：
```
{
  "name": "Your App Name",
  "short_name": "App",
  "icons": [
    {
      "src": "icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#000000"
}
```
- name：应用完整名称。
- short_name：应用简称。
- icons：指定不同尺寸的应用图标，用于不同设备和场景。
- start_url：应用启动时加载的URL。
- display：定义应用显示模式，如standalone使应用看起来像原生应用。
- background_color：应用启动画面的背景色。
- theme_color：定义应用的主题颜色，影响地址栏等部分的颜色。
在HTML中引用：在public/index.html文件的<head>标签中添加：
```
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
```

2. 注册服务工作线程（Service Worker）

安装workbox - build：在React项目中，通过npm或yarn安装workbox - build库，它能帮助生成和注入服务工作线程代码。
```
npm install workbox - build
```
生成服务工作线程代码：在项目构建脚本中（如webpack配置或自定义脚本），使用workbox - build生成服务工作线程代码。例如，在React项目的根目录下创建一个generate - sw.js文件：
```
const { generateSW } = require('workbox - build');

generateSW({
  swDest: 'public/service - worker.js',
  globDirectory: 'public',
  globPatterns: ['**/*.{html,js,css,png,jpg,gif}'],
  // 排除某些文件
  globIgnores: ['service - worker.js'],
  // 替换运行时注入点
  replaceInjectManifest: true
}).then(() => {
  console.log('Service worker generated successfully');
}).catch((error) => {
  console.error('Error generating service worker:', error);
});
```
- swDest：指定生成的服务工作线程文件的输出路径。
- globDirectory：指定要遍历的目录。
- globPatterns：指定要缓存的文件模式。
- globIgnores：指定要排除的文件。
- replaceInjectManifest：替换运行时注入点。

在React应用中注册服务工作线程：在index.js文件中注册服务工作线程：

import React from'react';
import ReactDOM from'react - dom';
import App from './App';
import './index.css';

if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/service - worker.js')
    .then((registration) => {
        console.log('ServiceWorker registration successful with scope: ', registration.scope);
      })
    .catch((error) => {
        console.log('ServiceWorker registration failed: ', error);
      });
  });
}

ReactDOM.render(<App />, document.getElementById('root'));

首先检查浏览器是否支持服务工作线程。
当页面加载完成后，使用navigator.serviceWorker.register方法注册服务工作线程，并处理注册成功或失败的回调。

3. 配置离线缓存策略

在服务工作线程中定义缓存策略：生成的服务工作线程代码（service - worker.js）中，Workbox会自动使用默认的缓存策略。你也可以根据需求自定义。例如，使用Stale - While - Revalidate策略（先返回缓存内容，同时更新缓存）：

self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request)
    .then((response) => {
        const fetchPromise = fetch(event.request)
        .then((networkResponse) => {
            caches.open('my - cache - v1')
            .then((cache) => cache.put(event.request, networkResponse.clone()));
            return networkResponse;
          });
        return response || fetchPromise;
      })
  );
});

更新缓存版本：当应用有更新时，需要更新缓存版本，以便服务工作线程能正确更新缓存内容。例如，在生成服务工作线程代码时，修改缓存名称中的版本号：

generateSW({
  swDest: 'public/service - worker.js',
  globDirectory: 'public',
  globPatterns: ['**/*.{html,js,css,png,jpg,gif}'],
  globIgnores: ['service - worker.js'],
  replaceInjectManifest: true,
  // 修改缓存名称版本
  swDestinations: {
    'public/service - worker.js': {
      cacheName:'my - cache - v2'
    }
  }
});

通过以上步骤，可以在React组件开发中实现基本的PWA支持，使应用能够离线访问部分页面内容。

星途面试题库

面试题：React中如何为组件添加基本的PWA支持

知识考点

面试题答案

1. 配置Web应用清单（Web App Manifest）文件

2. 注册服务工作线程（Service Worker）

3. 配置离线缓存策略