为什么要引入服务工作者？
在移动应用程序中，离线功能、运行后台服务和推送通知等功能是作为本地移动设备的一部分来实现的。这将只在移动设备中作为内置功能使用。桌面应用程序和基于浏览器的应用程序则不具备内置功能。网络应用中的这些功能可以通过服务工作者来实现。Web页面通常是由用户发起的请求，由主线程处理。
服务工作者是在后台运行的独立线程，用于跟踪网络请求、缓存数据、检索数据并将信息推送给浏览器。
基本上，该工作者根据网络可用性提供实时内容或缓存内容。这为应用程序提供了离线访问，使其成为一个渐进式的Web应用程序。
服务工作者的特点
- 它在网络应用程序、浏览器和网络服务之间充当代理服务器。
- 它可以访问页面级别的DOM元素。
- 它利用javascript承诺，在不等待请求的情况下运行。
- 它只在https协议上运行
- 服务工作者是一个在后台运行的javascript代码，无需用户干预。
- 出于安全原因，在https协议上运行
生命周期事件
有各种事件，如注册/执行/缓存/获取，以提供离线访问。
注册首先服务工作者需要注册。一旦服务工作者被注册，服务工作者的代码就会被复制到客户端，并转移到下一个生命周期事件进行安装，浏览器将在后台线程中启动。
这将安装服务工，并指定javascript文件代码，检查浏览器中是否有服务工，一旦页面加载，就在worker.js中注册服务工代码 Register()返回承诺，如果服务工没有注册，将被注册。服务工作者脚本代码，您必须为安装/激活/获取事件编写代码。
self.addEventListener('install', function(e) {
});
self.addEventListener('activate', function(e){
});
self.addEventListener('fetch', function(e){
});
安装事件： 这有将数据存储到存储机制的代码，并允许保存资产以便离线访问。激活事件：一旦服务工作者安装完成，这将得到通知。写一段代码，用于删除旧版本的缓存 Fetch事件。这将对服务工作者的任何资源进行调用，以获取资源，如调用ajax API调用。
服务工作者 API 提供 fetch - 从缓存中检索内容和
缓存--将应用程序特定的数据存储到存储机制中
离线访问的脚本示例：-
这是一个用于离线访问的angular应用程序的示例代码。
var dataCacheName = 'mycache-v1';
var cacheName = 'mycache-1';
var filesToCache = [
'/',
'/index.html'
];
console.log('ServiceWorker Start');
self.addEventListener('install', function(e) {
console.log('[ServiceWorker] Install');
e.waitUntil(
caches.open(cacheName).then(function(cache) {
console.log('[ServiceWorker] Caching app shell');
return cache.addAll(filesToCache);
})
);
});
self.addEventListener('activate', function(e) {
console.log('[ServiceWorker] Activate');
e.waitUntil(
caches.keys().then(function(keyList) {
return Promise.all(keyList.map(function(key) {
if (key !== cacheName && key !== dataCacheName) {
console.log('[ServiceWorker] Removing old cache', key);
return caches.delete(key);
}
}));
})
);
return self.clients.claim();
});
self.addEventListener('fetch', function(e) {
console.log('[Service Worker] Fetch', e.request.url);
e.respondWith(
caches.match(e.request).then(function(response) {
return response || fetch(e.request);
})
);
});
console.log('ServiceWorker End');
浏览器支持
Chrome、Firefox 和 Opera 都支持。微软Edge最近推出了对该功能的支持。苹果Safari浏览器已计划在未来支持该功能。
浏览器中默认启用服务工作者。你也可以在不同的浏览器中检查设置，如下所示
火狐浏览器
在火狐浏览器的URL中打开about:config，检查dom.serviceWorkers.enabled值，如果是false，就把它改成true。
Chrome 浏览器
在chrome中打开chrome://flags，检查experimental-web-platform-features值，如果它是禁用的，就启用它。
Opera浏览器
打开Opera://flags中的URL，检查Support for ServiceWorker值，如果它是false，则改为true。
Microsoft Edge浏览器
在Edge中打开_about:_flags的网址，检查启用服务工作者的值，如果没有选中，就选中它。
一旦你做了修改，请重新启动浏览器。
这些工具对开发者调试脚本非常有帮助。
Chrome的开发者工具有以下内容
chrome://inspect/#service-workers - 当前服务工作者和存储设备信息
chrome://serviceworker-internals - 这允许启动/停止/调试服务工作。
火狐有以下的开发者工具
about: debugging - 这显示了一个已注册的服务工作者的列表，你可以从这里禁用/删除。
使用案例：
在网络带宽有限的情况下访问离线应用程序：
推送通知
将来支持GPS
修复DOMException：注册ServiceWorker失败
在测试服务工作者代码的过程中，你经常会遇到下面这个错误。
未捕获的（在承诺中）DOMException。注册ServiceWorker失败。
这是位于js文件中的javascript代码的问题。为了进一步调试这个问题
转到chrome://serviceworker-internals，打开开发者工具页面，调试工作过的脚本文件代码，通过检查它，看看问题到底出在哪里。
注册ServiceWorker失败了。在获取脚本时收到了一个错误的HTTP响应代码（404）。
通常情况下，像index.html这样的主要HTML页面有服务工作者代码来注册。你只在这个页面上得到这个错误。在这里，你正在配置javascript文件。
请确保你所指的是服务工作者文件的确切路径。或将两个文件放在同一目录下。
