Aktivujte servisní pracovníky rychleji

Servisní pracovníci jsou skvělí pro mnoho účelů: rychlost, offline, ovládání mezipaměti a další. Pokud vás to zajímá, můžete si prohlédnout mnoho ukázek použití kódu service worker v kuchařce Service Worker. Jeden z těchto receptů, Okamžitá reklamace, je stejně důležitý a užitečný, protože poskytuje způsob, jak získat svého servisního pracovníka rychleji, což znamená, že můžete rychleji přijímat události načtení.

Následující zrychlení kódu můžete přirovnat k DOMContentLoaded (běžně známé jako domready ) vs. stará verze load událost -- uvede zpracování do pohybu rychleji. Tento trik zahrnuje install servisního pracovníka a activate události:

// 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();
});

Nakonec vrací skipWaiting()install událost spustí activate událost, která okamžitě aktivuje servisního pracovníka a umožní vašemu servisnímu pracovníkovi pracovat s fetch události a další možnosti servisních pracovníků. Servisní pracovníci vyžadují k aktivaci navigační událost (opětovné načtení stránky, přechod na novou stránku atd.), a proto je tento trik tak užitečný.

V nadcházejících měsících se můžete těšit na další tipy a příklady pro servisní pracovníky na blogu!