Ativar Service Workers mais rapidamente

Os service workers são ótimos para muitas finalidades: velocidade, off-line, controle de cache e muito mais. O senhor pode ver muitos exemplos de uso de service workers de código no site Livro de receitas do service worker, se o senhor estiver interessado. Uma dessas receitas, Reivindicação imediataé tão importante e útil quanto fornece uma maneira de reivindicar seu service worker mais rapidamente, o que significa que o senhor pode receber eventos de busca mais rapidamente.

O senhor pode comparar o seguinte código de aceleração com DOMContentLoaded (comumente conhecido como domready) vs. o antigo load o processamento é iniciado mais rapidamente. O truque envolve o evento install e activate eventos:

// Install event - cache files (...or not)
// Be sure to call skipWaiting()!
self.addEventListener('install', function(event) {
  event.waitUntil(
	caches.open('my-cache').then(function(cache) {
        // Important to `return` the promise here to have `skipWaiting()`
        // 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).
      return self.skipWaiting();
    })
  );
});

// Activate event
// Be sure to call 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.
	return self.clients.claim();
});

Em última análise, o retorno do skipWaiting() do install aciona o evento activate ativando o service worker imediatamente e permitindo que o service worker trabalhe com o fetch e outros recursos do service worker. Os service workers precisam de um evento de navegação (recarregar a página, ir para uma nova página etc.) para serem ativados, e é por isso que esse truque é tão útil.

Aguarde mais dicas e exemplos de trabalhadores de serviços no blog nos próximos meses!