Javascript 活动serviceWorker未向正在等待的serviceWorker发送消息
我想做什么? 我正在创建一个渐进式web应用程序(PWA),为了正确发送升级应用程序,我正在执行一个步骤,在该步骤中,用户会收到通知,一旦用户说“升级”,服务工作者就会调用Javascript 活动serviceWorker未向正在等待的serviceWorker发送消息,javascript,reactjs,service-worker,create-react-app,progressive-web-apps,Javascript,Reactjs,Service Worker,Create React App,Progressive Web Apps,我想做什么? 我正在创建一个渐进式web应用程序(PWA),为了正确发送升级应用程序,我正在执行一个步骤,在该步骤中,用户会收到通知,一旦用户说“升级”,服务工作者就会调用skipWaiting() 到目前为止我做了什么? 我正在跟进一篇好文章来实现这一点 为了消除复杂性,我只测试serviceworks之间的消息发送,以了解skipWaiting的工作原理。我正在使用createreact应用程序(v“react”:“^16.5.2”,),它作为插件捆绑在workbox中 我当前的regist
skipWaiting()
到目前为止我做了什么?我正在跟进一篇好文章来实现这一点 为了消除复杂性,我只测试
serviceworks
之间的消息发送,以了解skipWaiting
的工作原理。我正在使用createreact应用程序(v“react”:“^16.5.2”,)
,它作为插件捆绑在workbox
中
我当前的registerServiceWorker.js
看起来像
// In production, we register a service worker to serve assets from local cache.
// This lets the app load faster on subsequent visits in production, and gives
// it offline capabilities. However, it also means that developers (and users)
// will only see deployed updates on the "N+1" visit to a page, since previously
// cached resources are updated in the background.
// To learn more about the benefits of this model, read
// This link also includes instructions on opting out of this behavior.
const isLocalhost = Boolean(
window.location.hostname === 'localhost' ||
// [::1] is the IPv6 localhost address.
window.location.hostname === '[::1]' ||
// 127.0.0.1/8 is considered localhost for IPv4.
window.location.hostname.match(
/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
)
);
export default function register() {
if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
// The URL constructor is available in all browsers that support SW.
const publicUrl = new URL(process.env.PUBLIC_URL, window.location);
if (publicUrl.origin !== window.location.origin) {
// Our service worker won't work if PUBLIC_URL is on a different origin
// from what our page is served on. This might happen if a CDN is used to
// serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374
return;
}
window.addEventListener('load', () => {
const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
if (!isLocalhost) {
// Is not local host. Just register service worker
registerValidSW(swUrl);
} else {
// This is running on localhost. Lets check if a service worker still exists or not.
checkValidServiceWorker(swUrl);
}
});
window.addEventListener('message', messageEvent => {
const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
if (messageEvent.data === 'skipWaiting') {
console.log('skipWaiting');
return navigator.serviceWorker.getRegistration(swUrl)
.then(registration => registration.skipWaiting());
}
console.log(`message=${messageEvent.data}`);
});
let refreshingPage;
navigator.serviceWorker.addEventListener('controllerchange', () => {
console.log('refreshing page now');
if (refreshingPage) return;
refreshingPage = true;
window.location.reload();
});
}
}
function registerValidSW(swUrl) {
navigator.serviceWorker
.register(swUrl)
.then(registration => {
registration.onupdatefound = () => {
const installingWorker = registration.installing;
installingWorker.onstatechange = () => {
if (installingWorker.state === 'installed') {
if (navigator.serviceWorker.controller) {
// At this point, the old content will have been purged and
// the fresh content will have been added to the cache.
// It's the perfect time to display a "New content is
// available; please refresh." message in your web app.
console.log('>> New content is available; please refresh.');
navigator.serviceWorker.controller.postMessage('skipWaiting');
} else {
// At this point, everything has been precached.
// It's the perfect time to display a
// "Content is cached for offline use." message.
console.log('Content is cached for offline use.');
}
}
};
};
})
.catch(error => {
console.error('Error during service worker registration:', error);
});
}
function checkValidServiceWorker(swUrl) {
// Check if the service worker can be found. If it can't reload the page.
fetch(swUrl)
.then(response => {
// Ensure service worker exists, and that we really are getting a JS file.
if (
response.status === 404 ||
response.headers.get('content-type').indexOf('javascript') === -1
) {
// No service worker found. Probably a different app. Reload the page.
navigator.serviceWorker.ready.then(registration => {
registration.unregister().then(() => {
window.location.reload();
});
});
} else {
// Service worker found. Proceed as normal.
registerValidSW(swUrl);
}
})
.catch(() => {
console.log(
'No internet connection found. App is running in offline mode.'
);
});
}
export function unregister() {
if ('serviceWorker' in navigator) {
navigator.serviceWorker.ready.then(registration => {
registration.unregister();
});
}
}
如您所见,当安装了一个新的serviceWorker时,我会以
console.log('>> New content is available; please refresh.');
navigator.serviceWorker.controller.postMessage('skipWaiting');
我希望这个消息能用这个函数来处理
window.addEventListener('message', messageEvent => {
const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
if (messageEvent.data === 'skipWaiting') {
console.log('skipWaiting');
return navigator.serviceWorker.getRegistration(swUrl)
.then(registration => registration.skipWaiting());
}
console.log(`message=${messageEvent.data}`);
});
然后,我部署我的更改,以便此serviceWorker
就绪。
然后,我对我的应用程序进行了更改(index.html
),现在当我部署时,我看到有多条消息被记录,但没有一条消息是使用skipWaiting
message=
registerServiceWorker.js:53 message=!_{"h":"I0_1548194465894"}
registerServiceWorker.js:53 message=!_{"s":"/I0_1548194465894::_g_rpcReady","f":"I0_1548194465894","r":"I0_1548194465894","t":"32296067","c":1,"a":[null],"g":false}
registerServiceWorker.js:53 message=!_{"s":"__cb","f":"I0_1548194465894","r":"I0_1548194465894","t":"32296067","c":null,"a":[1,[null]],"g":false}
registerServiceWorker.js:53 message=!_{"s":"__cb","f":"I0_1548194465894","r":"I0_1548194465894","t":"32296067","c":null,"a":[2,[null]],"g":false}
registerServiceWorker.js:53 message=!_{"s":"/I0_1548194465894::_g_restyleMe","f":"I0_1548194465894","r":"I0_1548194465894","t":"32296067","c":2,"a":[{"setHideOnLeave":false}],"g":false}
registerServiceWorker.js:53 message=!_{"s":"__cb","f":"I0_1548194465894","r":"I0_1548194465894","t":"32296067","c":null,"a":[4,[null]],"g":false}
registerServiceWorker.js:53 message=!_{"s":"/I0_1548194465894::authEvent","f":"I0_1548194465894","r":"I0_1548194465894","t":"32296067","c":3,"a":[{"type":"authEvent","authEvent":{"type":"unknown","eventId":null,"urlResponse":null,"sessionId":null,"postBody":null,"tenantId":null,"error":{"code":"auth/no-auth-event","message":"An internal error has occurred."}}}],"g":false}
registerServiceWorker.js:53 message=!_{"s":"__cb","f":"I0_1548194465894","r":"I0_1548194465894","t":"32296067","c":null,"a":[3,[true]],"g":false}
我做错了什么?有几件事做错了
navigator.serviceworner.controller.postMessage('skipWaiting')代码>
窗口
向工作者
发送消息,但您正在等待窗口上的消息
- 控制器->不是工作实例
将向该工作人员发送消息postMessage()
- 但是,您不想向该工作人员发布消息-它是您当前的活动工作人员,而您希望通知尚未接管的新安装工作人员
消息
事件处理程序中运行代码,它也不会运行if(messageEvent.data=='skipWaiting'){
控制台日志(“skipWaiting”);
返回navigator.serviceWorker.getRegistration(swUrl)
.then(registration=>registration.skipWaiting());
}
没有注册.skipWaiting()方法。我们在service worker.js
code中调用skipWaiting
在您的情况下,您需要在工作代码中为message
添加一个事件侦听器,并在那里拦截“Skip Waiting”消息
工作代码
self.addEventListener('message',(event)=>{
if(event.data=='skipWaiting')self.skipWaiting();
});
窗口代码(仅限更改)
向现在已安装的工作人员发送消息以跳过等待并接管
console.log(“>>新内容可用;请刷新”);
安装worker.postMessage('skipWaiting');
这段代码看起来很混乱。您在这里只展示了一个脚本,registerServiceWorker.js
,它在页面中运行,但服务工作者至少需要两个脚本,一个在页面中运行,一个在服务工作者中运行。我建议通过谷歌的Udacity课程来学习这些材料。