web项目检测升级

前端版本更新

react 前端项目，如何实现前端项目发布，在项目中提示用户，点击按钮刷新最新代码资源

在 React 前端项目中，实现前端项目发布并提示用户点击按钮刷新最新代码资源，可以通过以下步骤实现：

1. 检测新版本：使用服务端或者某种机制检测前端资源是否有更新。
2. 通知用户：当检测到新版本时，通知用户，并提供一个按钮来刷新页面。

步骤 1：检测新版本

一种常见的方法是使用 Service Worker 来检测新版本的静态资源。你可以使用 workbox 库来简化这个过程。

首先，安装 workbox：

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

然后，在你的 webpack 配置文件中添加 workbox-webpack-plugin：

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

module.exports = {
  // 你的其他 webpack 配置
  plugins: [
    // 你的其他插件
    new GenerateSW({
      clientsClaim: true,
      skipWaiting: true,
    }),
  ],
};

这会生成一个 Service Worker，它会在后台安装和激活新的 Service Worker，并在下一次页面加载时使用新的资源。

步骤 2：通知用户

在你的 React 应用中，你可以监听 Service Worker 的更新事件，并通知用户。

创建一个 ServiceWorkerWrapper 组件：

import React, { useEffect, useState } from 'react';

const ServiceWorkerWrapper = () => {
  const [showReload, setShowReload] = useState(false);

  useEffect(() => {
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.addEventListener('controllerchange', () => {
        if (this.refreshing) return;
        this.refreshing = true;
        window.location.reload();
      });

      navigator.serviceWorker.register('/service-worker.js').then((registration) => {
        registration.onupdatefound = () => {
          const installingWorker = registration.installing;
          installingWorker.onstatechange = () => {
            if (installingWorker.state === 'installed') {
              if (navigator.serviceWorker.controller) {
                setShowReload(true);
              }
            }
          };
        };
      });
    }
  }, []);

  const reloadPage = () => {
    window.location.reload();
  };

  return (
    showReload && (
      <div className="reload-notification">
        <p>新版本可用!</p>
        <button onClick={reloadPage}>刷新</button>
      </div>
    )
  );
};

export default ServiceWorkerWrapper;

在你的主应用组件中引入 ServiceWorkerWrapper：

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

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

样式

你可以为提示框添加一些样式：

.reload-notification {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #f8d7da;
  color: #721c24;
  text-align: center;
  padding: 1rem;
  border-top: 1px solid #f5c6cb;
}

.reload-notification button {
  background: #721c24;
  color: #fff;
  border: none;
  padding: 0.5rem 1rem;
  cursor: pointer;
  margin-left: 1rem;
}

总结

通过以上步骤，你可以在 React 前端项目中实现检测新版本并提示用户刷新最新代码资源的功能。这种方式利用了 Service Worker 的能力，确保用户能够及时获取最新的前端资源。