w3ctech

[译]快速激活Service Workers

点击阅读原文

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微信

扫码关注w3ctech微信公众号

共收到0条回复