Progressive Web Apps(PWA)核心技术-Service Worker

丑话都是说在前面：

1.浏览器支持查看浏览器支持情况

2.在开发过程中，可以通过 localhost 使用服务工作线程，但如果要在网站上部署服务工作线程，需要在服务器上设置 HTTPS。

Service Worker（服务工作线程）是浏览器在后台独立于网页运行的脚本，它打开了通向不需要网页或用户交互的功能的大门。

基本流程：



服务工作线程相关注意事项：

它是一种 JavaScript 工作线程，无法直接访问 DOM。 服务工作线程通过响应 postMessage 接口发送的消息来与其控制的页面通信，页面可在必要时对 DOM 执行操作。

服务工作线程是一种可编程网络代理，让您能够控制页面所发送网络请求的处理方式。

它在不用时会被中止，并在下次有需要时重启，因此，您不能依赖于服务工作线程的 onfetch 和 onmessage 处理程序中的全局状态。如果存在您需要持续保存并在重启后加以重用的信息，服务工作线程可以访问 IndexedDB API。

服务工作线程广泛地利用了 promise，因此如果您不熟悉 promise，则应停下阅读此内容，看一看 Promise 简介。

Service Worker生命周期

service worker的生命周期完全独立于网页。

要为网站安装service worker，您需要先在页面的 JavaScript 中注册。 注册service worker之后浏览器将会在后台启动service worker。

在安装过程中，您通常需要缓存某些静态资源。如果所有文件均已成功缓存，那么service worker就安装完毕。如果任何文件下载失败或缓存失败，那么安装将会失败，service worker就无法激活（也就是说，不会安装）。 如果发生这种情况，不必担心，它下次会再试一次。 但这意味着，如果安装完成，您可以知道您已在缓存中获得那些静态资源。

安装之后，接下来就是激活步骤，这是管理旧缓存的绝佳机会，我们将在service worker的更新部分对此详加介绍。

激活之后，service worker将会对其作用域内的所有页面实施控制，不过，首次注册service worker的页面需要再次加载才会受其控制。service worker实施控制后，它将处于以下两种状态之一：service worker终止以节省内存，或处理获取和消息事件，从页面发出网络请求或消息后将会出现后一种状态。

生命周期流程：



一个离线页面示例代码：

//先判断浏览器是否支持
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
//判断是否已经注册了service worker
if (navigator.serviceWorker.controller) {
//已注册
} else {
//未注册，执行注册方法
navigator.serviceWorker.register('sw.js', {
scope: './'
}).then(function(reg) {
//注册完成
});
}
});
}

—-sw.js—–

//Install stage sets up the offline page in the cahche and opens a new cache
self.addEventListener('install', function(event) {
var offlinePage = new Request('offline.html');
event.waitUntil(
fetch(offlinePage).then(function(response) {
return caches.open('pwabuilder-offline').then(function(cache) {
//缓存页面
return cache.put(offlinePage, response);
});
}));
});

self.addEventListener('fetch', function(event) {
event.respondWith(
fetch(event.request).catch(function(error) {
//网络请求失败，打开缓存页面
return caches.open('pwabuilder-offline').then(function(cache) {
return cache.match('offline.html');
});
}));
});

//刷新缓存页面
self.addEventListener('refreshOffline', function(response) {
return caches.open('pwabuilder-offline').then(function(cache) {
return cache.put(offlinePage, response);
});
});