弁言
Progressive Web App, 简称 PWA,是提拔 Web App 的体验的一种新方法,能给用户原生运用的体验。Service Worker 是 PWA 中的重要一部分。Service Worker 可以监听当前域下的功用性事宜,比方阻拦和处置惩罚收集要求、推送关照(push)、背景同步(sync),本日我们来相识一下 Service Worker
什么是 Service Worker
Service worker (简称 SW) 是一个注册在指定源和途径下的事宜驱动 Worker。它采纳 JavaScript 掌握关联的页面或许网站,阻拦并修正接见和资本要求,细粒度地缓存资本。你可以完整掌握运用在特定情况(最常见的情况是收集不可用)下的表现。
最先编写一个简朴的 SW
注册 Service Worker
起首,我们经由过程 js 代码挪用浏览器的 api,注册 SW,通知浏览器 SW 文件的位置,Service Worker 支撑 promise,所以写起来异常轻易
// main.js
if (navigator.serviceWorker) {
window.addEventListener('DOMContentLoaded', () => {
navigator.serviceWorker
.register('sw.js')
.then(function(swReg) {
console.log('sucess ~', swReg);
})
.catch(function(error) {
console.error('fail !', error);
})
})
}
sw 存在作用域的观点,上面注册的作用域为 ‘/’,假如注册的 js 文件地点为 ‘a/sw.js’,则 sw 的作用域为 ‘/a’
最先缓存
接下来的代码编写重要集合在 sw.js (sw 加载的 js 文件) 文件中,在 Service Worker 装置过程当中,我们举行数据的缓存。缓存文件的重要角色是浏览器的 Cache API,将数据缓存下来。
const cacheName = 'myCache'
const cacheArray = [
'/index.html',
'/index.css',
'/main.js'
]
self.addEventListener('install', function(event) {
// Perform install steps
event.waitUntil(
// 翻开一个 Cache 对象
caches.open(CACHE_NAME)
.then(function(cache) {
// 缓存数组中的内容
return cache.addAll(urlsToCache);
})
)
})
由于一个 Worker是运用一个组织函数建立的一个对象运转一个定名的JavaScript文件。这个文件包括将在事情线程中运转的代码,运转在另一个全局高低文中,差别于当前的window。在 sw.js 中,没法运用 window、操纵 DOM 等,运用 self 关键字,来实援用
DedicatedWorkerGlobalScope。假如一切文件都胜利缓存,则将装置 Service Worker。 若有任何文件没法下载,则装置步骤将失利。也意味着 Service Worker 启动失利
event.waitUntil
确保浏览器封闭也依然可以实行
缓存和代办要求
Service Worker 可以完成离线功用,重如果具有代办要求的功用,我们可以在要求的时刻有本身的操纵空间,要求优先,要求失利从 Cache 读取缓存;要求胜利,更新缓存。
self.addEventListener('fetch', (event) => {
if (event.request.mode === 'navigate') {
return event.respondWith(
fetch(event.request).catch(() =>
caches.match(OFFLINE_URL))
)
}
})
吸收推送音讯
在 sw.js 的内部经由过程事宜监听的体式格局实行对应的回调函数,吸收外部的推送信息,只需要增加 push 事宜监听即可
self.addEventListener('push', function(event) {
const options = {
body: 'Yay it works.',
icon: 'images/icon.png',
badge: 'images/badge.png'
}
self.registration.showNotification(title, options);
})
音讯推送,合营 Web Server For Chrome 更轻易~
开启背景同步功用
在浏览器无收集请情况下,服务端推送音讯,浏览器没法吸收到,然则当收集连通时,浏览器就可以吸收到服务端推送的信息。浏览器的要求也可以完成一样的功用,经由过程特别的体式格局发送要求,收集连通时,要求才会发出去。
// 要求
navigator.serviceWorker.ready.then((registration) => {
// 辨别差别的事宜
const tag = 'tag';
registration.sync.register(tag).then(() => {
// do something...
})
})
// 事宜监听
// sw.js
self.addEventListener('sync', function (e) {
console.log(e.tag === 'tag') // true
e.waitUntil(...)
})
事情周期
- 初始化阶段: 页面加载、剖析 Service Worker 的 js 文件
- 装置阶段: 装置 Service Worker ,通常在装置中实行缓存
- 事情阶段:监听种种事宜,实行事情
- 待机阶段:网页封闭,Service Worker 在浏览器处于”寂静”的状况,有事宜同送等重新最先,随后再次”寂静”
- 更新阶段:新的 sw 触发 install 事宜,旧的 sw 动身 activate 事宜
Firebase 云信息通报 (FCM)
Firebase 云信息通报 (FCM) 是一种跨平台音讯通报解决方案,可供您免费、可靠地通报音讯。可以发送关照音讯以再次吸援用户并留住他们。在即时通讯等运用情况中,一条音讯可将最多 4KB 的有用负载传送至客户端运用。
浏览器的 Service Worker 的音讯推送重要依靠 FCM,服务端音讯推送通报到 FCM,然后再由 FCM 推送到客户端。
参考链接: