serviceWorker离线加载与消息推送
是独立于当前页面的一段运行在浏览器后台进程里的脚本。它的特性将包括推送消息,背景后台同步, 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') }