首先初始化 注册 主线程监听消息
/* 判断当前浏览器是否支持serviceWorker */
if ('serviceWorker' in navigator) {
/* 当页面加载完成就创建一个serviceWorker */
window.addEventListener('load', function () {
/* 创建并指定对应的执行内容 */
/* scope 参数是可选的,可以用来指定你想让 service worker 控制的内容的子目录。在这个例子里,我们指定了 '/',表示 根网域下的所有内容。这也是默认值。*/
navigator.serviceWorker.register('/service-worker.js', { scope: './' })
.then(function (registration) {
console.log('ServiceWorker registration successful with scope: ', registration.scope);
})
.catch(function (err) {
console.log('ServiceWorker registration failed: ', err);
});
});
// 监听消息
navigator.serviceWorker.addEventListener('message', function (e) {
const data = e.data;
console.log('我接受到消息了:', data);
});
}
随便一个事件 触发一下子线程message监听
navigator.serviceWorker.controller && navigator.serviceWorker.controller.postMessage('测试,传送消息,我发送消息啦。。。');
下面是 service-worker.js代码 在message监听 使用postMessage给主线程发送发送消息
// service-worker.js
//安装
self.addEventListener('install', function (event) {
console.log('install');
event.waitUntil(self.skipWaiting()); // Activate worker immediately
// event.waitUntil(
// // 这里可以做一些缓存的操作
// );
});
//激活
self.addEventListener('activate', function (event) {
console.log('activate');
event.waitUntil(self.clients.claim()); // Become available to all pages
// event.waitUntil(
// // 这里可以做一些清理缓存的操作
// );
});
self.addEventListener('fetch', function (event) {
console.log('fetch',event.request.url);
});
self.addEventListener('message', (event) => {
console.log('页面传递过来的数据',event.data)
// event.source.postMessage('this message is from sw.js to page');
self.clients.matchAll().then(function(clients) {
clients.forEach(function(client) {
// 这里的判断目的是过滤掉当前 Tab 页面,也可以使用 visibilityState 的状态来判断
if(!client.focused) {
client.postMessage(event.data)
}
})
})
});