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')
}