Workbox

PWA'nız büyüdükçe Service Worker'ınızı ve önbellek depolama alanı mantığınızı korumak zor olabilir. Workbox, bu konuda yardımcı olacak bir açık kaynak kitaplık setidir. Workbox, Service Worker API ve Cache Storage API gibi alt düzey API'leri içerir ve daha fazla geliştirici dostu arayüzler sunar.

Yardımcı olabileceği görevlerden bazıları, önbelleğe alma stratejilerini yollar (veya yönlendirme kalıpları) ile eşleştirmek, akışlarla çalışmak ve uygun yedeklerle arka plan senkronizasyonu gibi özellikleri kullanmaktır.

Workbox, öğelerinizi önbelleğe alma ve sunma ihtiyaçlarınızı yönetmenize yardımcı olabilir. Aynı zamanda Service Worker'ların en çok kullandığı kitaplıktır. Mobil sitelerin% 54'ünde kullanılıyor ve Angular KSA, Create-React-App ve Vue CLI gibi birçok derleme aracında ve KSA'da kullanılıyor. Next.js gibi diğer çoğu kitaplık ve çerçeve için de eklentiler vardır.

_%54

Service Worker'lara sahip mobil siteler, Workbox kitaplığını kullanır

Not: Workspace, PWA topluluğundaki hizmet çalışanları için en yaygın kitaplık grubu olsa da sw-tools ve UpUp gibi başka çözümler de vardır

Çalışma kutusu modülleri

Çalışma kutusunda, her biri öğelerinizi ve hizmet çalışanı davranışını yönetmenin farklı bir yönüne odaklanan dahili modül adı verilen çeşitli kitaplıklar bulunur.

Çalışma kutusu modülleri farklı bağlamlarda çalışır. Örneğin:

• Service Worker bağlamında: İhtiyacınız olan modülleri içe aktarır ve bunları Service Worker dosyanızdan kullanırsınız. Örneğin, önbelleğe almayı yönetmeye ve farklı stratejilerle dosya sunmaya yardımcı olabilirsiniz.
• window ana bağlamında: Service Worker'ı kaydetme ve onunla iletişim kurma
• Bir derleme sisteminin parçası olarak: Örneğin, öğelerinizin manifestini oluşturma veya hatta hizmet çalışanınızın tamamını oluşturma gibi amaçlarla webpack.

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

• workbox-routing: Service Worker'ın müdahale ettiği bu modül, bu istekleri yanıt sağlayan farklı işlevlere yönlendirir. Sunum bölümünde belirtildiği gibi fetch etkinlik işleyici uygulamasıdır.
• workbox-strategies: Bir isteğe yanıt veren çalışma zamanı önbellek stratejileri (örneğin, yeniden doğrulama sırasında önbellek ve eski); Yayınlama bölümünde belirtilen farklı stratejilerin uygulanmasıdır.
• çalışma kutusunu önbelleğe alma: Önbelleğe alma bölümünde belirtildiği gibi, hizmet çalışanının install etkinlik işleyicisinde dosyaları önbelleğe alma işlemidir (önbelleğe alma olarak da bilinir). Bu modül sayesinde bir grup dosyayı kolayca önceden önbelleğe alabilir ve bu varlıklardaki güncellemeleri verimli bir şekilde yönetebilirsiniz. Öğelerin güncellenmesini Güncelleme bölümünde ele alacağız.
• workbox-expiration: Önbelleğe alınan istekleri önbellekteki öğelerin sayısına veya önbelleğe alınan isteğin yaşına dayalı olarak kaldırmak için önbelleğe alma stratejilerinde kullanılan bir eklentidir. Önbelleklerinizi yönetmenize yardımcı olur, zaman ve her önbellekteki öğe sayısı ile ilgili sınırlar belirler.
• workbox-window: Pencere bağlamında, yani PWA web sayfalarınızın içinde çalışması amaçlanan bir modül grubu. Service Worker kayıt ve güncelleme sürecini basitleştirebilir ve Service Worker bağlamında çalışan kod ile pencere bağlamında daha kolay iletişim kurabilirsiniz.

Workbox'ı kullanma

Workbox, PWA'nıza entegrasyon için farklı yöntemler sunar. Uygulamanızın mimarisine en uygun seçeneği belirleyebilirsiniz:

• Workbox CLI: Eksiksiz bir hizmet çalışanı oluşturan, önbellek manifesti ekleyen veya gerekli Workbox dosyalarını kopyalayan bir komut satırı yardımcı programı.
• Workbox Build (Çalışma Kutusu Derlemesi): Eksiksiz bir hizmet çalışanı oluşturan, önbellek manifesti ekleyen ve Workbox dosyalarını kopyalayan npm modülü. Bunun amacı, kendi derleme sürecinizle entegre edilmesidir.
• workbox-sw: Workbox hizmet çalışanı paketlerini, derleme işlemi kullanmayan bir CDN'den yükleme yöntemi.

Workbox CLI, hizmet çalışanınızı oluşturma sürecinde size yol gösteren bir sihirbaz sağlar. Sihirbazı çalıştırmak için komut satırına aşağıdakileri yazın:

npx workbox-cli wizard

Çalışma Kutusu ile önbelleğe alma ve sunma

Workbox'ın yaygın bir kullanımı, dosyaları önbelleğe almak ve sunmak için yönlendirme ve strateji modüllerinin birlikte kullanılmasıdır.

workbox-stratejileri modülü, Öğeler ve veriler ile Yayınlama bölümlerinde ele alınan önbelleğe alma stratejilerini kullanıma hazır şekilde sunar.

Ç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.

Rotalar stratejilerle 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 olarak döndürülen yanıtları önbelleğe alabilirsiniz.

Dikkat: Workbox, npm modülleri olarak dağıtılsa da hizmet çalışanlarının kendileri her tarayıcıda ES modülü söz dizimini desteklemez. Bu nedenle, bu örnek kodun dağıtmadan önce bir paketleyici ile derlenmesi daha iyi bir yaklaşımdır.

Aşağıdaki kod örneğinde sayfa gezinmelerini önbelleğe almak ve sunmak için önbellek ilk stratejisi (CacheFirst modülü üzerinden) 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ümü 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 engellemek için kullanılır.

Strateji oluşturulduğunda, sıra onu kullanmak için bir rota kaydettirmeye gelir. Aşağıdaki örnekte registerRoute() öğesini çağırarak bir İstek nesnesi geri çağırmasına aktarılmaktadı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 okuyun.

Çevrimdışı yedek

workbox-routing modülünde, bir rotanın hata vermesi durumunda işlem yapılmasını sağlayan dışa aktarılmış bir setCatchHandler() de bulunur. İstedikleri rotanın şu anda kullanılamadığını kullanıcılara bildirmek üzere çevrimdışı yedek ayarlamak için bunu kullanabilirsiniz.

Bu örnekte, Workbox ve Cache Storage API birlikte kullanıldığında, yalnızca önbellek stratejisi kullanan çevrimdışı bir yedek sağlanır. İlk olarak, hizmet çalışanının yükleme yaşam döngüsü sırasında offline-fallbacks önbelleği açılır ve çevrimdışı yedekler 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 mevcut değilse veya hedef bir doküman değilse (resim veya stil sayfası gibi) bir 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 genişletebilirsiniz.

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

Yemek tarifleri

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. Mimariniz için uygun bir çözüm sunuyorlarsa size yardımcı olabilecek çalışma kutusu-tarifleri'ni işaretleyin. Bunlar genellikle hizmet çalışanınızın koduna eklemeniz gereken tek bir kod satırı olarak mevcuttur.

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

Öğeleri önbelleğe alma işlemi, öğelerin güncellenmesini de kapsar. Çalışma kutusu, öğelerinizi sizin için en iyisi olduğuna karar verdiğiniz şekilde güncellemenize yardımcı olur. Sunucuda değişirse uygulamayı güncel tutmak veya uygulamanızın yeni bir sürümünü edinmek için beklemeniz gerekebilir. Güncellemeyle ilgili daha fazla bilgiyi Güncelleme bölümünde bulabilirsiniz.

Workbox ile oynayın

Aşağıdaki kod laboratuvarını kullanarak Workbox'ı kullanmaya hemen başlayabilirsiniz:

Deneyin: Çalışma Kutusu ile Çalışma.

Kaynaklar

• Workbox'ı kullanmaya başlama
• Çalışma Kutusu Modülleri
• Workbox'ın yolları