是独立于当前页面的一段运行在浏览器后台进程里的脚本。它的特性将包括推送消息,背景后台同步， geofencing（地理围栏定位），拦截和处理网络请求。本文主要说一下离线加载以及消息推送两部分内容。
一：serviceWorker离线加载
1.在页面上register注册register-service-worker.js
if(navigator.serviceWorker){
navigator.serviceWorker.register('./service-worker.js',{scope:'./'})
.then(function (reg){
console.log(reg)
})
.catch(function (e){
console.log(e)
})
}else{
alert('Service Worker is not supported')
}
2.注册流程后需要install装载监听service-worker.js
self.addEventListener('install', function (e){
e.waitUntil(
caches.open('app-v1')
.then(function (cache){
console.log('open cache')
return cache.addAll([
'./../app.js',
'./register-service-worker.js',
'./index.html',
'./service-worker.js',
'./main.css'
])
})
)
})
3.处理fetch请求监听service-worker.js
self.addEventListener('fetch',function (event){
event.respondWith(
caches.match(event.request).then(function (res){
if(res){
return res
}else{
//通过fetch方法向网络发起请求
// fetch(url).then(function (res){
// })
}
})
)
})
本地起服务，通过loaclhost访问即可看到（serviceWorker机制决定只能使用localhost才能成功）
二：消息推送页面A输入内容，自动推送到页面B
1.消息监听
self.addEventListener('message',function (event){
var promise = self.clients.matchAll().then(function(client){
var senderID = event.source ? event.source.id : 'unknow';
clientList.forEach(function (client){
if(client.id == senderID){
return
}else{
client.postMessage({
client: senderID,
message: event.data
})
}
})
})
})
2.消息处理
if(navigator.serviceWorker){
var sendBtn = document.getElementById('send-msg-button');
var msgInput = document.getElementById('msg-input');
var msgBox = document.getElementById('msg-box').value;
sendBtn.addEventListener('click',function (){
//主页面发送信息到serviceworker
navigator.serviceWorker.controller.postMessage(msgInput.value)
})
serviceWorker.addEventListener('message',function(event){
msgBox.innerHTML = msgBox.innerHTML+('<li>' + event.data.message + '</li>')
})
navigator.serviceWorker.register('./service-worker.js',{scope:'./'})
.then(function (reg){
console.log(reg)
})
.catch(function (e){
console.log(e)
})
}else{
alert('Service Worker is not supported')
}