reactjs - 从 Create React App 注册 Service Worker 时如何更新页面

标签 reactjs create-react-app

我正在从 create React app 注册一个 Service Worker,并且我在 Lighthouse 中获得了良好的分数,因为它是一个渐进式 Web 应用程序,并且我可以从 Chrome 地址栏安装该 Web 应用程序,所有很好

但是当我更新网站上的内容时,没有人能看到它,除非他们清除缓存,而他们并没有清除缓存。我如何确保他们看到最新内容,同时仍然在 Lighthouse 上获得作为渐进式网络应用程序的最高分?

import React from 'react';
import ReactDOM from 'react-dom';
import * as serviceWorker from './serviceWorker';
import { Router } from './router';
import './scss/index.scss';

ReactDOM.render(<Router />, document.getElementById('shell'));
serviceWorker.register();

最佳答案

要让 Service Worker 更新您的缓存,您需要关闭网站的所有选项卡。 另一种方法是使用这个包来完成这项工作。

https://www.npmjs.com/package/@loopmode/cra-workbox-refresh

它将为您完成所有工作,安装新文件后,它会显示一个按钮,允许您更新页面

关于reactjs - 从 Create React App 注册 Service Worker 时如何更新页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58322965/

相关文章:

javascript - 将多个 Prop 传递给 React 组件

react-native - React Native 与 CRNA

javascript - 如果刷新页面则找不到 React Router URL - 创建 React App

reactjs - 启动时创建-react-app "Failed to compile"

reactjs - 为什么我们在 onClick 事件上使用 Bind 方法

javascript - 发送来自 reducer 的数据之前调用 action creator 的组件

java - 用于大型 Web 应用程序的 React 与 GWT

reactjs - React 错误边界并不能阻止 cra 应用程序崩溃

reactjs - 如何在 create-react-app 中禁用热重载?

reactjs - 如何读取 socket.io 回调中的 props?