Güvenilir web uygulamaları oluşturmada iki API çok önemli rol oynar: Service Worker ve Cache Storage. Ancak bunları etkili bir şekilde kullanmak (fark edilmesi zor hatalara yol açmadan 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 üzerine inşa edilmiş üst düzey bir hizmet çalışanı araç setidir. Web uygulamalarına çevrimdışı destek eklemek için kullanıma hazır bir kitaplık seti sunar. Araç seti iki koleksiyon halinde yapılandırılmıştır: hizmet çalışanınızda çalışan kodu yönetmeye yardımcı olan araçlar ve derleme sürecinizle entegre olan araçlar.
Çalışma zamanı kodu
Bu, hizmet çalışanı komut dosyanızda çalışan ve giden istekleri nasıl yakaladığını ve Cache Storage API ile nasıl etkileşimde bulunduğunu kontrol eden koddur. Workbox'ta her biri çeşitli özel kullanım alanlarını işleyen toplamda bir düzine kadar 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 işlemi 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 dayalı bir 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'ın çalışma zamanı kitaplıklarını "arka planda" kullanır.
- Derleme süreciniz sırasında oluşturulan dosyaları dahil etmek ve hariç tutmak için yapılandırılabilir kalıplara göre "önbelleğe alınması" gereken URL'lerin listesini oluşturun.
Neden Workbox kullanmalısınız?
Hizmet çalışanınızı oluştururken Workbox kullanmak isteğe bağlıdır. "Sade" bir hizmet çalışanı perspektifinden yaygın önbelleğe alma stratejilerini açıklayan birçok kılavuz vardır. Workbox'ı kullanmaya karar verirseniz bazı avantajları şunlardır.
Önbellek yönetimi
Workbox, önbelleğe alma işlemini kullanırken derleme sürecinize bağlı olarak veya çalışma zamanı önbelleğe alma işlemini 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 süresinin dolması için yerleşik desteği yoktur. Workbox gibi araçlar bu boşluğu doldurur.
Kapsamlı günlük kaydı ve Error Reporting
Hizmet çalışanlarını kullanmaya başladığınızda, bir şeyin neden önbelleğe alındığını (veya aynı derecede sinir bozucu bir şekilde, neden önbelleğe alınmadığını) anlamak zor olabilir.
Workbox, web sitenizin geliştirme sürümünü localhost üzerinde çalıştırdığınızı otomatik olarak algılar ve tarayıcınızın JavaScript konsolunda hata ayıklama günlüğünü etkinleştirir.
Günlük mesajlarını takip ederek yapılandırma veya geçersiz kılma sorunlarının kökenine tek başınıza yapabileceğinizden çok daha hızlı bir şekilde ulaşabilirsiniz.
Test edilmiş, tarayıcılar arası kod tabanı
Workbox, tarayıcılar arası bir test paketiyle geliştirilmiştir ve mümkün olduğunda, belirli tarayıcılarda eksik olan özelliklerin alternatif uygulamalarına otomatik olarak 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 geri döner.- workbox-background-sync modülü, mümkünse Background Sync API'yi kullanır. Mümkün değilse hizmet çalışanı her başlatıldığında sıraya alınan etkinlikleri yeniden dener.
Workbox'ı 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ıç kiti ve eklenti eklentisinde bulunan Workbox entegrasyonundan yararlanabilirsiniz:
Workbox'ı mevcut derleme sürecinize ekleme
Siteniz için zaten bir derleme süreciniz varsa Workbox'ı kullanmaya başlamak için uygun komut satırı, Node.js modülü veya webpack eklentisi aracını eklemeniz yeterli olabilir.
Özellikle Workbox komut satırı arayüzü, yerel geliştirme ortamınızı kontrol eden ve ileride kullanabileceğiniz makul bir varsayılan yapılandırma öneren wizard moduyla kullanmaya başlamayı kolaylaştırır:
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ı oluşturmak için derleme sürecinin bir parçası olarak workbox generateSW workbox-config.js komutunu çalıştırın. Ayrıntılar için generateSW belgelerini inceleyin.
workbox-config.js üzerinde değişiklik yaparak hizmet çalışanınızı daha da özelleştirebilirsiniz.
Ayrıntılar için seçeneklerle ilgili belgelere bakın.
Mevcut bir hizmet çalışanında ç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ı önbelleğe alma için hemen kullanmaya başlayın. Bu kullanım alanında, önceden önbelleğe alma özelliğinden (derleme zamanı entegrasyonu gerektirir) yararlanamazsınız ancak prototip oluşturma ve farklı önbelleğe alma stratejilerini anında deneme 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',
})
);