JavaScript新知：service workers

前端技术正在像桌面技术靠近，其中一项很重要的就是就是service workers，它让HTML App离线工作成为可能。本文会以一个简单的案例代码来说明这项技术。
我使用的工具：

1. 浏览器版本为chrome 55

2. 服务器系统：Node 5.0

我们需要准备3个文件：

touch  index.html b.html sw.js

其中文件index.html内容为：

    <script>
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('/sw.js');
    }
    </script>

它注册一个service worker，文件名为sw.js，一个JavaScript代码文件。所以真正关键的文件是sw.js，其内容为：

    const cacheName = 'v1::static';
    self.addEventListener('install', e => {
      e.waitUntil(
        caches.open(cacheName).then(cache => {
          return cache.addAll([
            '/',
          ]).then(() => self.skipWaiting());
        })
      );
    });
    self.addEventListener('fetch', event => {
      event.respondWith(
        caches.open(cacheName).then(cache => {
          return cache.match(event.request).then(res => {
            return res || fetch(event.request)
          });
        })
      );
    });
    

作为一个事件，install会在ServiceWorker第一次装入时被调用，此处你可以做一些初始化的工作，典型的工作是加载在离线时会需要的文件到cache内。这里我们制定了"/",因此任何内容都会被缓存下来。

第二个事件是fetch，当访问远程资源时会被调用。这里可以做一个匹配，如果在cache内有就曲cache内的资源返回，否则去远程取。

第三个文件b.html就是一个为了演示离线效果的文件，内容为：

    <h1>serviceWorker B</h1>

虽然即可安装http server，并在当前路径内执行它:

    npm i http-server 
    http-server 

访问:

    http://localhost:8080/index.html

和

    http://localhost:8080/b.html

随后，关闭http server，再次访问

    http://localhost:8080/b.html
    

居然可以访问~，而这就是离线实现的效果。

嗯，想要查看service workers的运行状况，还可以使用如下url来：

    chrome://inspect/#service-workers

可以看到更加细节的是这个：

    chrome://serviceworker-internals/

在这里可以启动，撤销注册等操作。

可以查询它的实现情况，还不是那么乐观：

    http://caniuse.com/#feat=serviceworkers
    

ref

https://developers.google.com...

关于

作者：刘传君

创建过产品，创过业。好读书，求甚解。
可以通过 1000copy#gmail.com 联系到我

出品

bootstrap小书 https://www.gitbook.com/book/...
http小书 http://www.ituring.com.cn/boo...
Git小书 http://www.ituring.com.cn/boo...