我正在尝试使用我自己的服务人员在反应网络中进行非侵入式更新。我想在网站有新更新时显示通知。我正在使用一个组件来处理服务工作者逻辑。问题是我不知道如何在服务工作者的事件侦听器中调用我的类的函数,其中 this 引用了服务工作者本身。有小费吗?这是处理 service worker 的类:
import * as React from 'react';
import { RouteComponentProps } from 'react-router';
export class ServiceWorker extends React.Component<RouteComponentProps<{}>> {
constructor() {
super();
}
registerServiceWorker() {
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/ServiceWorker.js').then(reg => {
console.log('SW registered: ', reg);
if (!navigator.serviceWorker.controller) {
return;
}
if (reg.waiting) {
console.log("update ready1");
//Can call updateAlert() here, because still using the same object
this.updateAlert();
return;
}
if (reg.installing) {
reg.installing.addEventListener('statechange', () => {
if (reg.installing.state == 'installed') {
console.log("update ready2");
//Can't call here
//this.updateAlert();
}
});
return;
}
reg.addEventListener('updatefound', function () {
reg.installing.addEventListener('statechange', () => {
if (reg.installing) {
if (reg.installing.state == 'installed') {
console.log("update ready3");
//or here
//this.updateAlert();
}
}
if (reg.waiting) {
if (reg.waiting.state == 'installed') {
console.log("update ready4");
//or here
//this.updateAlert();
}
}
});
})
}).catch(registrationError => {
console.log('SW registration failed: ', registrationError);
});
});
}
}
updateAlert() {
console.log("success");
}
public render() {
this.registerServiceWorker();
return null;
}
}