启动服务器
MDN: Service Worker文档中指出，
Service Worker只能用在使用https协议的站点，
但是，在本机测试的时候，http协议下也是可以的。
（1）新建test-pwa站点，以下操作都在站点根目录下进行，
$ mkdir test-pwa
$ cd test-pwa
（2）安装http-server，启动http站点，端口为8080
$ npm i -g http-server
$ http-server -p 8080
（3）浏览器访问
http://localhost:8080/
注： 启动https站点的方法
（1）在站点根目录下，生成key.pem和cert.pem文件
$ openssl req -newkey rsa:2048 -new -nodes -x509 -days 3650 -keyout key.pem -out cert.pem
> 遇到选项一路回车即可
否则，使用http-server启动https服务器时会报错，
Error: ENOENT: no such file or directory, open 'key.pem'
（2）启动https服务器，端口为8080
$ http-server -S -p 8080
（3）用命令行打开Chrome
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --user-data-dir=./tmp --ignore-certificate-errors --unsafely-treat-insecure-origin-as-secure=https://localhost:8080
否则，注册Service Worker时会抛异常，
DOMException: Failed to register a ServiceWorker: An SSL certificate error occurred when fetching the script.
测试代码目录结构
test-pwa
├── index.html
├── index.js
├── service-worker.js
└── src
├── main.js
└── cache.js
（1）index.html
Document
（2）index.js
if (navigator.serviceWorker) {
console.log('浏览器支持Service Worker');
navigator.serviceWorker.register('./service-worker.js')
.then(reg => console.log('Service worker 已注册成功'))
.catch(err => console.error('Service worker 注册失败'));
} else {
console.log('不支持Service Worker');
}
（3）service-worker.js
const cacheName = 'my-pwa-cache';
self.addEventListener('install', event => {
console.log('Service Worker 正在安装');
// 将./src/cache.js文件内容加入cache
event.waitUntil(
caches.open(cacheName).then(cache => cache.add('./src/cache.js'))
);
});
self.addEventListener('activate', event => {
console.log('Service Worker 已激活，刷新页面后的请求都会走Service Worker');
});
self.addEventListener('fetch', event => {
console.log('Service Worker 处理fetch请求');
const url = new URL(event.request.url);
// 如果是同域请求，且请求path为/src/other.js，则返回cache中的内容
if (url.origin == location.origin && url.pathname == '/src/main.js') {
// 返回缓存中的./src/cache.js文件内容
event.respondWith(caches.match('./src/cache.js'));
}
});
（4）src/main.js
alert('main');
（5）src/cache.js
alert('cache');
注：
（1）cache中的文件地址，既可以是相对路径，也可以是绝对路径，
哪怕cache.add('./src/cache.js')使用相对路径，
caches.match('/src/cache.js')使用绝对路径，也是可以的。
（2）url.pathname == '/src/main.js'这里必须是绝对路径，
是因为url.pathname会得到一个绝对路径。
浏览器调试
（1）在命令行打开的浏览器中访问，
https://localhost:8080/
# 如果是本地http方式，则打开
http://localhost:8080/
注：以下是https站点的日志，http站点的日志可能会略有不同。
控制台会输出：
浏览器支持Service Worker
Navigated to https://localhost:8080/
Service worker 已注册成功
Service Worker 正在安装
Service Worker 已激活，刷新页面后的请求都会走Service Worker
页面弹出alert对话框，内容为main。
（2）刷新页面
Service Worker 处理fetch请求 <- 该日志打印了3次
浏览器支持Service Worker
Navigated to https://localhost:8080/
Service worker 已注册成功
页面弹出alert对话框，内容为cache。
Chrome DevTool的Network选项卡中，看到页面仍然是请求https://localhost:8080/src/main.js，
但是http响应已经变成了https://localhost:8080/src/cache.js中的内容。
（3）卸载Service Worker
打开Chrome DevToolApplication选项卡，选中左边的Service Workers菜单，
看到有一个对应域名https://localhost:8080/的项，点击后面的Unregister。
卸载Service Worker后会删除其中的缓存。
参考
MDN: Service Worker
Github: indexzero/http-server
Stack Overflow: npm http-server with SSL
TESTING SERVICE WORKERS LOCALLY WITH SELF SIGNED CERTIFICATES
Service Worker 生命周期那些事儿
Github: hello-service-worker