Güvenilir web uygulamaları oluşturmada iki API önemli bir rol oynar: Service Worker ve Cache Storage. Ancak küçük hatalara veya uç durumlara neden olmadan bunların etkili bir şekilde kullanılması zor olabilir. Örneğin, Service Worker kodunuzdaki hatalar, önbelleğe alma sorunlarına neden olabilir; kullanıcılara eski içerik veya bozuk bağlantılar gösterilebilir.
Workbox, Service Worker ve Cache Storage API'lerinin üzerine kurulmuş üst düzey bir Service Worker araç setidir. Web uygulamalarına çevrimdışı destek eklemek için üretime hazır kitaplıklar sağlar. Araç seti iki koleksiyon halinde yapılandırılmıştır: Service Worker'ınızın içinde çalışan kodu yönetmeye yardımcı olan araçlar ve derleme sürecinize entegre edilen araçlar.
Çalışma zamanı kodu
Bu, hizmet çalışanı komut dosyanızın içinde çalışan ve giden isteklere nasıl müdahale ettiğini ve Cache Storage API ile nasıl etkileşimde bulunduğunu kontrol eden koddur. Workbox'ta, her biri çeşitli özel kullanım alanlarına uygun olan toplamda bir düzine kadar kitaplık modülü bulunur. En önemli modüller, Service Worker'ın yanıt verip vermeyeceğini (yönlendirme olarak bilinir) ve nasıl yanıt vereceğini (önbelleğe alma stratejisi olarak bilinir) belirler.
Derleme entegrasyonu
Workbox, iki işlemi gerçekleştirmek için alternatif yollar sağlayan komut satırı, Node.js modülü ve web paketi eklentisi araçları sunar:
- Bir dizi yapılandırma seçeneğine göre Service Worker komut dosyası oluşturun. Oluşturulan hizmet çalışanı, yapılandırdığınız önbelleğe alma stratejilerini uygulamaya koymak için Workbox'ın "gelişmiş seçenekler" ç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 dayanarak "önbelleğe alınmış" olması gereken URL'lerin bir listesini oluşturun.
Neden Workbox'ı kullanmalısınız?
Service Worker'ınızı oluştururken Workbox'ı kullanmak isteğe bağlıdır. Yaygın önbellekleme stratejilerini, hizmet çalışanı bakış açısıyla ele alan birçok kılavuzdan yararlanabilirsiniz. Workbox'ı kullanmaya karar verirseniz faydalarından bazılarını aşağıda görebilirsiniz.
Önbellek yönetimi
Workbox, önbelleğe alma kullanılırken derleme işleminize bağlı veya çalışma zamanı önbelleğe alma özelliğini kullanırken yapılandırılabilir boyut/yaş politikaları aracılığıyla önbellek güncellemelerini sizin için yönetir. Temel Cache Storage API güçlüdür ancak önbellek geçerlilik sonu için herhangi bir yerleşik destek sunmaz. Workbox gibi araçlar bu boşluğu dolduruyor.
Kapsamlı günlük kaydı ve hata raporlama
Service Worker'ları kullanmaya başladığınızda bir öğenin neden önbelleğe alındığını (veya eşit ölçüde sinir bozucu bir şekilde neden önbelleğe alınmadığını) anlamak zordur.
Çalışma kutusu, localhost üzerinde web sitenizin bir geliştirme sürümünü çalıştırdığınızı otomatik olarak algılar ve tarayıcınızın JavaScript konsolunda hata ayıklama günlük kaydını açar.
Günlük mesajlarını takip ederek herhangi bir yapılandırma veya geçersiz kılma sorununun köküne, tek başınıza bağlanmaya kıyasla çok daha hızlı bir şekilde ulaşabilirsiniz.
Test edilmiş, tarayıcılar arası bir kod tabanı
Workbox, tarayıcılar arası test paketi temel alınarak geliştirilmiştir ve mümkün olduğunda, otomatik olarak belirli tarayıcılarda eksik olan özelliklerin alternatif uygulamalarına geri döner.
workbox-broadcast-cache-update module, mümkün olduğunda Broadcast Channel API'yi kullanır ve desteklenmeyen tarayıcılardapostMessage()tabanlı bir uygulamaya döner.- workbox-background-sync modülü, mümkünse Arka Plan Senkronizasyonu API'sini kullanır. Kullanılmıyorsa, Service Worker her başlatıldığında sıraya alınan etkinlikleri yeniden denenmeye başlar.
Workbox'ı nasıl kullanmalısınız?
Çerçeve entegrasyonu
Yeni bir projeye sıfırdan başlıyorsanız birçok popüler başlangıç setinde ve eklenti eklentisinde bulunan Workbox entegrasyonundan yararlanabilirsiniz:
Mevcut derleme işleminize Workbox ekleme
Siteniz için halihazırda bir derleme süreciniz varsa Workbox'ı kullanmaya başlamak için tek ihtiyacınız olan uygun bir komut satırını, Node.js modülünü veya web paketi eklentisi aracını eklemek olabilir.
Özellikle Workbox komut satırı arayüzü, yerel geliştirme ortamınızı kontrol eden ve ileriye dönük olarak kullanabileceğiniz makul bir varsayılan yapılandırma öneren bir wizard moduyla ürünü kolayca kullanmaya 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 çalışanınızı derlemek için derleme işleminin parçası olarak workbox generateSW workbox-config.js komutunu çalıştırın. Ayrıntılar için generateSW dokümanlarına göz atın.
workbox-config.js üzerinde değişiklikler yaparak hizmet çalışanınızı daha da özelleştirebilirsiniz.
Ayrıntılar için seçeneklere ilişkin dokümanlara bakın.
Mevcut bir hizmet çalışanının çalışma zamanında Workbox'ı kullanma
Mevcut bir hizmet çalışanınız varsa ve Workbox'ın çalışma zamanı kitaplıklarını denemek istiyorsanız Workbox'ı resmi CDN'sinden içe aktarın ve çalışma zamanında önbelleğe alma için kullanmaya hemen başlayın. Bu kullanım alanı, önbelleğe alma özelliğinden yararlanamayacağınız anlamına gelir (derleme zamanı entegrasyonu gerektirir) ancak anında prototip oluşturmak ve farklı önbelleğe alma stratejilerini denemek için mükemmeldir.
// 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',
})
);