Workbox

PWA'nız büyüdükçe hizmet çalışanınızı ve önbellek depolama mantığını korumak zor olabilir. Workbox, bu konuda size yardımcı olacak bir dizi açık kaynak kitaplıktan oluşur. Workbox, Service Worker API ve Cache Storage API gibi alt düzey API'leri kapsar ve geliştirici dostu arayüzler sunar.

Önbelleğe alma stratejilerini yollarla (veya yönlendirme kalıplarıyla) eşleştirme, akışlarla çalışma ve uygun yedeklerle arka plan senkronizasyonu gibi özellikleri kullanma gibi görevler konusunda yardımcı olabilir.

Workbox, öğe önbelleğe alma ve sunma ihtiyaçlarınızı yönetmenize yardımcı olabilir. Aynı zamanda hizmet çalışanları için en çok kullanılan kitaplıktır. Mobil sitelerin% 54'ü tarafından kullanılır ve Angular CLI, Create-React-App, Vue CLI gibi birçok derleme aracı ve KSA'da kullanılır. Next.js gibi diğer kitaplık ve çerçevelerin çoğuna yönelik eklentiler de vardır.

%54

Service Worker'lar içeren mobil siteler, Workbox kitaplığını kullanır

Çalışma kutusu modülleri

Çalışma kutusunda, her biri öğelerinizi yönetmenin ve Service Worker'ın davranışını yönetmenin farklı bir yönüne odaklanan ve dahili olarak modüller olarak adlandırılan çeşitli kitaplıklar bulunur.

Çalışma kutusu modülleri aşağıdaki gibi farklı bağlamlarda çalışır:

  • Service Worker bağlamında: İhtiyacınız olan modülleri içe aktarır ve bunları Service Worker dosyanızdan kullanabilirsiniz. Örneğin, önbelleğe alma işlemini yönetmenize ve dosyaları farklı stratejilerle sunmaya yardımcı olmak için bunları kullanabilirsiniz.
  • Ana window bağlamında: Service Worker'ın kaydedilmesine ve onunla iletişim kurulmasına yardımcı olma
  • Bir derleme sisteminin parçası olarak: Örneğin, öğelerinizin manifestini oluşturma, hatta tüm hizmet çalışanınızı oluşturma gibi amaçlar için webpack.

Popüler modüllerden bazıları şunlardır:

  • workbox-yönlendirme: Service Worker'ın isteklerine müdahale etmesi halinde bu modül, bu istekleri yanıt sağlayan farklı işlevlere yönlendirir. Bu, Sunum bölümünde belirtildiği gibi fetch etkinlik işleyicinin bir uygulamasıdır.
  • workbox-strategies: Bir isteğe yanıt vermeyi sağlayan çalışma zamanı önbelleğe alma stratejileri grubudur (ör. önce önbellek ve yeniden doğrulama sırasında eski). Bu, Sunum bölümünde bahsedilen farklı stratejilerin uygulanmasıdır.
  • workbox-precaching: Bu, Önbelleğe alma bölümünde belirtildiği gibi, hizmet çalışanının install etkinlik işleyicisinde (önbelleğe alma olarak da bilinir) dosyaların önbelleğe alma işleminin uygulanmasıdır. Bu modül ile bir dosya grubunu kolayca önceden önbelleğe alabilir ve bu öğelerde yapılan güncellemeleri etkili bir şekilde yönetebilirsiniz. Öğeleri güncelleme konusunu Güncelleme bölümünde ele alacağız.
  • workbox-expiration: Önbelleğe alınan öğelerin sayısına veya önbelleğe alınan isteğin yaşına bağlı olarak, önbelleğe alınan istekleri kaldırmak için önbelleğe alma stratejilerinde kullanılan bir eklentidir. Önbelleklerinizi yönetmenize yardımcı olur, zamanında ve her önbellekteki öğe sayısını sınırlar.
  • workbox-window: Pencere bağlamında, yani PWA web sayfalarınızın içinde çalışması planlanan modüller grubu. Service Worker kayıt ve güncelleme sürecini basitleştirebilir, Service Worker bağlamında çalışan kod ile pencere bağlamındaki kod arasında daha kolay iletişim kurulmasını sağlayabilirsiniz.

Workbox'ı kullanma

Workbox, PWA'nıza entegre edebileceğiniz farklı yollar sunar. Uygulamanızın mimarisine en uygun olanı seçebilirsiniz:

  • Workbox CLI: Eksiksiz bir hizmet çalışanı oluşturan, ön önbellek manifesti ekleyen veya gerekli Workbox dosyalarını kopyalayan bir komut satırı yardımcı programı.
  • Çalışma Kutusu Derlemesi: Eksiksiz bir hizmet çalışanı oluşturan, ön önbellek manifesti ekleyen ve Çalışma Kutusu dosyalarını kopyalayan bir npm modülü. Bu, kendi derleme sürecinize entegre edilmesi için tasarlanmıştır.
  • workbox-sw: Workbox Service Worker paketlerini derleme işlemi kullanmayan bir CDN'den yükleme yöntemi.

Workbox CLI, hizmet çalışanınızı oluşturma adımlarında size yol gösterecek bir sihirbaz sağlar. Sihirbazı çalıştırmak için komut satırına aşağıdaki komutu yazın:

npx workbox-cli wizard

Bir terminalde çalışan Workbox CLI

Workbox ile önbelleğe alma ve sunma

Workbox'ın yaygın bir kullanımı, dosyaları önbelleğe almak ve sunmak için yönlendirme ve stratejiler modüllerini birlikte kullanmaktır.

Çalışma kutusu stratejileri modülünde, Öğeler ve veriler ile Yayınlama bölümlerinde açıklanan önbelleğe alma stratejileri kullanıma hazırdır.

Çalışma kutusu yönlendirme modülü, hizmet çalışanınıza gelen istekleri sıralamanıza ve bu isteklere yanıt almak için bunları önbelleğe alma stratejileri veya işlevleriyle eşleştirmenize yardımcı olur.

Stratejilerle rotalar eşleştirildikten sonra Workbox, workbox-cacheable-Response eklentisi ile önbelleğe alınacak yanıtları filtreleme olanağı da sunar. Bu eklentiyle, örneğin yalnızca hatasız döndürülen yanıtları önbelleğe alabilirsiniz.

Aşağıdaki kod örneğinde, sayfada gezinmeleri önbelleğe almak ve sunmak için CacheFirst modülü aracılığıyla bir önbellek öncelikli stratejisi kullanılmaktadır.

import { registerRoute } from 'workbox-routing';
import { CacheFirst } from 'workbox-strategies';
import { CacheableResponsePlugin } from 'workbox-cacheable-response';

const pageStrategy = new CacheFirst({
  // Put all cached files in a cache named 'pages'
  cacheName: 'pages',
  plugins: [
    // Only requests that return with a 200 status are cached
    new CacheableResponsePlugin({
      statuses: [200],
    }),
  ],
});

Eklenti, Workbox'ın önbelleğe alma ve istek çözümleme yaşam döngüsünden yararlanmanıza olanak tanır. Burada CacheableResponsePlugin, yalnızca 200 durumuyla sonuçlanan istekleri önbelleğe almak ve hatalı isteklerin önbelleğe kaydedilmesini önlemek için kullanılır.

Strateji oluşturulduktan sonra, onu kullanmak için bir rota kaydetmeniz gerekir. Aşağıdaki örnek, geri çağırma işlevine bir İstek nesnesi ileterek registerRoute() işlevini çağırır. request.mode değeri "navigate" ise önceki kod örneğinde tanımlanan CacheFirst stratejisini (burada pageStrategy olarak adlandırılır) kullanır.

// Cache page navigations (HTML) with a Cache First strategy
registerRoute( ({ request }) => request.mode === 'navigate',
  pageStrategy );

Daha fazla örnek ve en iyi uygulama için Workbox belgelerini inceleyin.

Çevrimdışı yedek

Çalışma kutusu yönlendirme modülünde ayrıca, bir rota hata verdiğinde müdahale edilmesini sağlayan dışa aktarılmış bir setCatchHandler() bulunur. Bunu kullanarak, kullanıcılara istenen rotanın şu anda kullanılabilir olmadığını bildirmek üzere çevrimdışı bir yedek ayarlayabilirsiniz.

Burada Workbox ve Cache Storage API'sinin birlikte kullanılması, yalnızca önbellek stratejisini kullanarak çevrimdışı bir yedek sağlar. İlk olarak, hizmet çalışanının yükleme yaşam döngüsü boyunca offline-fallbacks önbelleği açılır ve çevrimdışı yedek dizisi önbelleğe eklenir.

import { setCatchHandler } from 'workbox-routing';

// Warm the cache when the service worker installs
self.addEventListener('install', event => {
  const files = ['/offline.html']; // you can add more resources here
  event.waitUntil(
    self.caches.open('offline-fallbacks')
        .then(cache => cache.addAll(files))
  );
});

Ardından, setCatchHandler() ürününde hataya neden olan isteğin hedefi belirlenir ve offline-fallbacks önbelleği açılır. Hedef bir dokümansa çevrimdışı yedeğin içeriği kullanıcıya döndürülür. Bu dosya yoksa veya hedef bir doküman (ör. resim veya stil sayfası) değilse hata yanıtı döndürülür. Bu kalıbı yalnızca dokümanlar için değil; resimler, videolar, yazı tipleri ve çevrimdışı yedek olarak sağlamak istediğiniz her şey için de uygulayabilirsiniz.

// Respond with the fallback if a route throws an error
setCatchHandler(async (options) => {
  const destination = options.request.destination;
  const cache = await self.caches.open('offline-fallbacks');
  if (destination === 'document') {
    return (await cache.match('/offline.html')) || Response.error();
  }
  return Response.error();
});

Recipe'ler

NetworkFirst gezinmeleri ve çevrimdışı yedekler gibi çeşitli yönlendirme ve önbelleğe alma kalıpları, yeniden kullanılabilir tariflere dahil edilecek kadar yaygındır. Mimarınıza uygun bir çözüm sunulmuyorsa size yardımcı olabilecekleri için çalışma kutusu tarifleri'ni işaretleyin. Bunlar genellikle Service Worker'ınızın koduna eklemeniz gereken tek satırlık bir kod olarak kullanılabilir.

Öğeleri önbelleğe alma ve güncelleme

Öğelerin önbelleğe alınması, bunların güncellenmesini de içerir. Workbox, en uygun gördüğünüz şekilde öğelerinizi güncellemenize yardımcı olur. Sunucuda değişirse güncellemeleri almak veya uygulamanızın yeni bir sürümüne sahip olana kadar beklemek gerekebilir. Güncelleme hakkında daha fazla bilgiyi Güncelleme bölümünde bulabilirsiniz.

Çalışma kutusu ile oynayın

Aşağıdaki kod laboratuvarını kullanarak Workbox'ı hemen kullanabilirsiniz:

Kaynaklar