[FE] Hello Service Worker

启动服务器

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <script src="./index.js"></script>
    <script src="./src/main.js"></script>
</head>
<body>
</body>
</html>

（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