点击阅读原文

Service Workers在很多方面都表现的很好，无论是速度、离线、缓存操作等等。如果你对此感兴趣的话，你可以在Service Worker Cookbook上看到大量的Service Worker用例。其中， Immediate Claim所提供的用例是十分重要的，因为他提供了一种方法让你的Service Worker运行的更快，这意味着假如有问题发生，你也能更快知道。

以下的代码相比于以往的加载事件，能够加快DOMContentLoaded的速度，通常我们称之为domready，从而加快了处理启动的速率。这个诀窍涉及到了service worker的安装和激活事件：

// Install event - cache files (...or not)
// 安装事件——缓存文件（可选）
// Be sure to call skipWaiting()!
// 切记要调用skipWaiting()
self.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open('my-cache').then(function(cache) {
        // Important to `return` the promise here to have `skipWaiting()`
        // 切记在此返回promise以便于调用skipWainting
        // fire after the cache has been updated.
        // 在缓存更新后触发
        return cache.addAll([/* file1.jpg, file2.png, ... */]);
    }).then(function() {
      // `skipWaiting()` forces the waiting ServiceWorker to become the
      // active ServiceWorker, triggering the `onactivate` event.
      // Together with `Clients.claim()` this allows a worker to take effect
      // immediately in the client(s).
      // skipWating（）促使等待中的ServiceWorker被激活，触发'onactivat'事件
      // 和clients.claim()一起运用能够让ServiceWorker在客户端马上生效
      return self.skipWaiting();
    })
  );
});

// Activate event
// Be sure to call self.clients.claim()
// 激活事件，确保调用 self.clients.claim()
self.addEventListener('activate', function(event) {
    // `claim()` sets this worker as the active worker for all clients that
    // match the workers scope and triggers an `oncontrollerchange` event for
    // the clients.
    // ‘claim（）’将worker激活，让所有符合这个worker域的客户触发'oncontrollerchange'事件
    return self.clients.claim();
});

最终，安装事件将会触发激活事件，返回skipWaiting()。这会马上激活ServiceWorker。ServiceWorker需要一个导航事件（重新加载页面，前往新页面等等）来激活，这就是为什么这个诀窍可以使用的如此得心应手。

扫码关注w3ctech微信公众号