我希望用户能够在新的服务人员可用并等待时当场更新？当有新的更新可用时，我已经可以显示一个弹出窗口，但我想添加一个按钮来当场强制更新。我知道这可以通过调用skipWaiting来实现，但不知道如何使用Create React应用程序来实现。有人能做到这一点吗？非常感谢您的帮助。非常感谢。
CRAbuildservice-worker.js文件现在(v3 plus)包含处理skipWaiting:的代码
self.addEventListener('message', (event) => {
if (event.data && event.data.type === 'SKIP_WAITING') {
self.skipWaiting();
}
});
在index.js中调用的寄存器函数serviceWorker.js文件现在接受一个配置参数：
serviceWorker.register({
onUpdate: registration => {
const waitingServiceWorker = registration.waiting
if (waitingServiceWorker) {
waitingServiceWorker.addEventListener("statechange", event => {
if (event.target.state === "activated") {
window.location.reload()
}
});
waitingServiceWorker.postMessage({ type: "SKIP_WAITING" });
}
}
});
这将跳过等待，然后在应用更新后刷新页面。
在serviceWorker.js文件中可以找到以下代码
if (config && config.onUpdate) {
config.onUpdate(registration);
}
因此，实现config.ounupdate函数
创建一个文件swConfig.js
export default {
onUpdate: registration => {
registration.unregister().then(() => {
window.location.reload()
})
},
onSuccess: registration => {
console.info('service worker on success state')
console.log(registration)
},
}
在index.js将实现函数发送到serviceWorker
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import swConfig from './swConfig'
ReactDOM.render(<App />,
document.getElementById('root'));
serviceWorker.register(swConfig);
查看此回购https://github.com/wgod58/create_react_app_pwaupdate
我使用了一个名为https://github.com/bbhlondon/cra-append-sw要附加以下代码以调用触发器skipWaiting：
self.addEventListener('message', event => {
if (event.data === 'skipWaiting') {
self.skipWaiting();
}
});
@user10532439的答案对我不起作用https://github.com/bbhlondon/cra-append-sw并添加
// @ts-ignore
workbox.skipWaiting();
// @ts-ignore
workbox.clientsClaim();
连同
"build": "react-scripts build && cra-append-sw -s ./src/custom-sw.js",
我知道它已经得到了回答，但我发现了一个解决方案，它不需要任何额外的包，当然除了工作簿。
在包.json:
"build": "react-scripts build && node ./src/serviceWorkerBuild"
serviceWorkerBuild.js
const workboxBuild = require('workbox-build');
// NOTE: This should be run *AFTER* all your assets are built
const buildSW = () => {
// This will return a Promise
return workboxBuild.injectManifest({
swSrc: 'src/serviceWorkerRules.js',
swDest: 'build/sw.js',
globDirectory: 'build',
globPatterns: [
'**/*.{js,css,html,png}',
]
}).then(({count, size, warnings}) => {
// Optionally, log any warnings and details.
warnings.forEach(console.warn);
console.log(`${count} files will be precached, totaling ${size} bytes.`);
});
};
buildSW();
和serviceWorkerRules.js，您可以在其中添加规则：
importScripts(
'https://storage.googleapis.com/workbox-cdn/releases/3.5.0/workbox-sw.js'
);
/* global workbox */
if (workbox) {
console.log('Workbox is loaded');
self.addEventListener('install', event => {
self.skipWaiting();
});
/* injection point for manifest files. */
workbox.precaching.precacheAndRoute([]);
/* custom cache rules*/
workbox.routing.registerNavigationRoute('/index.html', {
blacklist: [/^/_/, //[^/]+.[^/]+$/],
});
workbox.routing.registerRoute(
/.(?:png|gif|jpg|jpeg|svg)$/,
workbox.strategies.cacheFirst({
cacheName: 'images',
plugins: [
new workbox.expiration.Plugin({
maxEntries: 60,
maxAgeSeconds: 5 * 24 * 60 * 60, // 5 Days
}),
],
}),
);}
同时在serviceWorker.js第78行添加window.location.reload();。
您应该在服务工作者的安装事件中调用skipWaiting方法。服务工作者与UI/Rect代码解耦。所以和真正的反应无关。
现在，我有一个模式，我将安装事件代码重构为自己的方法，所以我的服务人员倾向于如下所示：
self.addEventListener( "install", function ( event ) {
event.waitUntil( installServiceWorker() );
} );
function installServiceWorker() {
self.skipWaiting();
// do stuff here like pre-caching site core assets
//most likely returning a promise
}另外：如果需要将缓存的资产与活动UI同步，请不要调用skipWaiting。如果您的服务人员正在更新，并且可能会破坏UI，则不要调用skipWaiting。而是等待用户刷新页面。例如，您可以使用消息传递基础结构来通知用户更新可用。