Çalışma kutusu: üst düzey Service Worker araç setiniz

Güvenilir web uygulamaları oluşturmada iki API'nin önemli bir rolü vardır: Service Worker ve Cache Storage. Ancak bunları etkili bir şekilde kullanmak (gizli hatalar oluşturmadan veya uç durumlarla karşılaşmadan) zor olabilir. Örneğin, hizmet çalışanı kodunuzdaki hatalar önbelleğe alma sorunlarına neden olabilir. Kullanıcılara güncel olmayan içerikler veya bozuk bağlantılar gösterilebilir.

Workbox, Service Worker ve Cache Storage API'leri temel alınarak oluşturulmuş üst düzey bir hizmet çalışanı araç setidir. Web uygulamalarına çevrimdışı destek eklemek için üretime hazır bir kitaplık grubu sağlar. Araç seti iki koleksiyona ayrılmıştır: Hizmet çalışanınızın içinde çalışan kodu yönetmenize yardımcı olan araçlar ve derleme sürecinizle entegre olan araçlar.

Bu, hizmet çalışanı komut dosyanızda çalışan ve giden isteklerin nasıl yakalanacağını ve Cache Storage API ile nasıl etkileşim kurulacağını kontrol eden koddur. Workbox'ta, her biri çeşitli özel kullanım alanlarını ele alan toplamda yaklaşık bir düzine kitaplık modülü bulunur. En önemli modüller, hizmet çalışanının yanıt verip vermeyeceğini (yönlendirme olarak bilinir) ve nasıl yanıt vereceğini (önbelleğe alma stratejisi olarak bilinir) belirler.

Entegrasyon oluşturma

Workbox, iki şeyi gerçekleştirmenin alternatif yollarını sunan komut satırı, Node.js modülü ve webpack eklentisi araçları sunar:

  • Bir dizi yapılandırma seçeneğine göre hizmet çalışanı komut dosyası oluşturun. Oluşturulan hizmet çalışanı, yapılandırdığınız önbelleğe alma stratejilerini uygulamak için Workbox'un "altyapıdaki" çalışma zamanı kitaplıklarını kullanır.
  • Derleme işleminiz sırasında oluşturulan dosyaları dahil etmek ve hariç tutmak için yapılandırılabilir kalıplara göre "önceden önbelleğe alınması" gereken URL'lerin listesini oluşturun.

Workbox'u neden kullanmalısınız?

Servis çalışanınızı oluştururken Workbox'u kullanmak isteğe bağlıdır. "Temel" bir servis çalışanı perspektifinden yaygın önbelleğe alma stratejilerini açıklayan birçok kılavuz mevcuttur. Workbox'u kullanmaya karar verirseniz bu aracın bazı avantajlarını aşağıda bulabilirsiniz.

Önbellek yönetimi

Workbox, önbelleğe alma işlemini kullanırken derleme sürecinize bağlı olarak veya çalışma zamanında önbelleğe alma işlemini kullanırken yapılandırılabilir boyut/yaş politikaları aracılığıyla önbelleğe alma güncellemelerini sizin için yönetir. Temel Cache Storage API güçlüdür ancak önbelleğin süresi dolma özelliği için yerleşik bir desteği yoktur. Workbox gibi araçlar bu boşluğu doldurur.

Kapsamlı günlük kaydı ve hata raporlama

Hizmet çalışanlarına yeni başladığınızda bir öğenin neden önbelleğe alındığını (veya eşit derecede can sıkıcı olan, neden önbelleğe alınmadığını) anlamak zordur. Workbox, web sitenizin geliştirme sürümünü localhost üzerinde çalıştırdığınızda bunu otomatik olarak algılar ve tarayıcınızın JavaScript konsolunda hata ayıklama günlük kaydını etkinleştirir.

Workbox'un DevTools konsoluna günlük kaydı eklemesi

Günlük mesajlarını takip ederek yapılandırma veya geçersiz kılma sorunlarının köküne tek başınıza yapacağınızdan çok daha hızlı bir şekilde ulaşabilirsiniz.

Test edilmiş, tarayıcılar arası kod tabanı

Workbox, tarayıcılar arası bir test paketine göre geliştirilmiştir ve mümkün olduğunda belirli tarayıcılarda bulunmayan özelliklerin alternatif uygulamalarına otomatik olarak geri döner.

Workbox'u nasıl kullanmalısınız?

Çerçeve entegrasyonu

Sıfırdan yeni bir projeye başlıyorsanız birçok popüler başlangıç paketinde ve eklenti eklentisinde bulunan Workbox entegrasyonundan yararlanabilirsiniz:

Workbox'u mevcut derleme sürecinize ekleme

Siteniz için zaten bir derleme süreciniz varsa Workbox'u kullanmaya başlamak için uygun komut satırını, Node.js modülünü veya webpack eklentisini eklemeniz yeterli olabilir.

Özellikle Workbox komut satırı arayüzü, yerel geliştirme ortamınızı kontrol edip ileride kullanabileceğiniz makul bir varsayılan yapılandırma öneren wizard modu sayesinde kolayca çalışmaya başlamanızı sağlar:

workbox wizard
? What is the root of your web app (i.e. which directory do you deploy)? src/
? Which file types would you like to precache? css, js, html
? Where would you like your service worker file to be saved? build/sw.js
? Where would you like to save these configuration options? workbox-config.js

Hizmet işleyicinizi oluşturmak için derleme sürecinin bir parçası olarak workbox generateSW workbox-config.js'i çalıştırın. Ayrıntılar için generateSW dokümanlarını inceleyin. workbox-config.js dosyasında değişiklik yaparak hizmet işleyicinizi daha da özelleştirebilirsiniz. Ayrıntılar için seçeneklerin dokümanlarına bakın.

Mevcut bir hizmet çalışanında çalışma zamanında Workbox'u kullanma

Mevcut bir hizmet çalışanınız varsa ve Workbox'un çalışma zamanındaki kitaplıklarını denemek istiyorsanız Workbox'u resmi CDN'sinden içe aktarın ve çalışma zamanındaki önbelleğe alma için hemen kullanmaya başlayın. Bu kullanım alanı, ön önbelleğe alma özelliğinden (derleme zamanında entegrasyon gerektirir) yararlanamayacağınız anlamına gelir ancak prototip oluşturmak ve farklı önbelleğe alma stratejilerini anında denemek için idealdir.

// Replace 3.6.3 with the current version number of Workbox.
importScripts('https://storage.googleapis.com/workbox-cdn/releases/3.6.3/workbox-sw.js');

workbox.routing.registerRoute(
  new RegExp('\.png$'),
  workbox.strategies.cacheFirst({
    cacheName: 'images-cache',
  })
);