workbox-sw modülü, Workbox modüllerini kullanmaya başlamak için son derece kolay bir yol sunar, Workbox modüllerinin yüklenmesini kolaylaştırır ve bazı basit yardımcı yöntemler sunar.
workbox-sw'yi CDN'miz aracılığıyla veya kendi sunucunuzdaki bir çalışma kutusu dosyasıyla birlikte kullanabilirsiniz.
CDN üzerinden Workbox SW'yu kullanma
Bu modülü kullanmaya başlamanın en kolay yolu CDN'yi kullanmaktır. Aşağıdakileri Service Worker'ınıza eklemeniz yeterlidir:
importScripts(
'https://storage.googleapis.com/workbox-cdn/releases/6.4.1/workbox-sw.js'
);
Bu işlem ile Service Worker'ınızda tüm Workbox modüllerine erişim sağlayacak workbox ad alanına sahip olursunuz.
workbox.precaching.*
workbox.routing.*
etc
Ek modülleri kullanmaya başladığınızda bazı büyüler fark edebilirsiniz.
Bir modüle ilk kez başvurduğunuzda workbox-sw bunu algılar ve kullanılabilir hale getirmeden önce modülü yükler. Bunu Geliştirici Araçları'ndaki ağ
sekmesinde görebilirsiniz.
Bu dosyalar, ileride çevrimdışı kullanıma uygun olmaları için tarayıcınız tarafından önbelleğe alınır.
CDN Yerine Yerel Çalışma Kutusu Dosyalarını Kullanma
CDN'yi kullanmak istemiyorsanız kendi alanınızda barındırılan Workbox dosyalarına kolayca geçiş yapabilirsiniz.
En basit yaklaşım, dosyaları workbox-cli copyLibraries komutunu kullanarak almak ve ardından modulePathPrefix yapılandırma seçeneğini kullanarak workbox-sw bu dosyaları nerede bulacağını bildirmektir.
Dosyaları /third_party/workbox-vX.Y.Z/ altına koyarsanız şu şekilde kullanabilirsiniz:
importScripts('/third_party/workbox-vX.Y.Z/workbox-sw.js');
workbox.setConfig({
modulePathPrefix: '/third_party/workbox-vX.Y.Z/',
});
Eş Zamansız İçe Aktarmalardan Kaçınma
Gelişmiş olarak, yeni modüllerin ilk kez yüklenmesi için ilgili JavaScript dosyasının (CDN'de veya yerel URL aracılığıyla barındırılan) yolu ile importScripts() çağrısı gerekir.
Her iki durumda da önemli bir kısıtlama geçerlidir: importScripts() için örtülü çağrılar yalnızca bir Service Worker'ın install işleyicisinin içinde veya Service Worker komut dosyasının eşzamanlı ilk yürütme sırasında gerçekleşebilir.
Bu kısıtlamayı ihlal etmekten kaçınmak için en iyi uygulama, herhangi bir etkinlik işleyici veya eşzamansız işlevlerin dışındaki çeşitli workbox.* ad alanlarına referans vermektir.
Örneğin, aşağıdaki üst düzey Service Worker kodu kullanılabilir:
importScripts(
'https://storage.googleapis.com/workbox-cdn/releases/6.4.1/workbox-sw.js'
);
// This will work!
workbox.routing.registerRoute(
({request}) => request.destination === 'image',
new workbox.strategies.CacheFirst()
);
Ancak hizmet çalışanınızda başka bir yerde workbox.strategies referansı vermediyseniz aşağıdaki kod sorun olabilir:
importScripts(
'https://storage.googleapis.com/workbox-cdn/releases/6.4.1/workbox-sw.js'
);
self.addEventListener('fetch', event => {
if (event.request.url.endsWith('.png')) {
// Oops! This causes workbox-strategies.js to be imported inside a fetch handler,
// outside of the initial, synchronous service worker execution.
const cacheFirst = new workbox.strategies.CacheFirst();
event.respondWith(cacheFirst.handle({request: event.request}));
}
});
Bu kısıtlamayı ihlal edecek şekilde kod yazmanız gerekiyorsa workbox.loadModule() yöntemini kullanarak importScripts() çağrısını etkinlik işleyici dışında açıkça tetikleyebilirsiniz:
importScripts(
'https://storage.googleapis.com/workbox-cdn/releases/6.4.1/workbox-sw.js'
);
// This will trigger the importScripts() for workbox.strategies and its dependencies:
workbox.loadModule('workbox-strategies');
self.addEventListener('fetch', event => {
if (event.request.url.endsWith('.png')) {
// Referencing workbox.strategies will now work as expected.
const cacheFirst = new workbox.strategies.CacheFirst();
event.respondWith(cacheFirst.handle({request: event.request}));
}
});
Alternatif olarak, etkinlik işleyicilerinizin dışındaki ilgili ad alanlarına referans oluşturabilir ve bu referansı daha sonra kullanabilirsiniz:
importScripts(
'https://storage.googleapis.com/workbox-cdn/releases/6.4.1/workbox-sw.js'
);
// This will trigger the importScripts() for workbox.strategies and its dependencies:
const {strategies} = workbox;
self.addEventListener('fetch', event => {
if (event.request.url.endsWith('.png')) {
// Using the previously-initialized strategies will work as expected.
const cacheFirst = new strategies.CacheFirst();
event.respondWith(cacheFirst.handle({request: event.request}));
}
});
Hata Ayıklama veya Üretim Derlemelerinin Kullanımını Zorunlu Kıl
Tüm Workbox modülleri, günlük kaydı ve ek tür kontrollerini içeren bir hata ayıklama derlemesi ile günlük kaydı ve tür kontrolünü basitleştiren bir üretim derlemesi olmak üzere iki derlemeye sahiptir.
Varsayılan olarak workbox-sw, localhost'taki siteler için hata ayıklama derlemesini kullanır ancak diğer kaynaklar için üretim derlemesini kullanır.
Hata ayıklamayı veya üretim derlemelerini zorunlu kılmak istiyorsanız debug yapılandırma seçeneğini ayarlayabilirsiniz:
workbox.setConfig({
debug: true,
});
İçe aktarma ifadelerini kullanarak kodu workbox-sw kullanmak için dönüştürün
Workbox, workbox-sw kullanılarak yüklenirken tüm İş Kutusu paketlerine genel workbox.* ad alanından erişilir.
workbox-sw kullanmak için dönüştürmek istediğiniz import ifadeleri kullanan bir kod örneğiniz varsa yapmanız gereken tek şey workbox-sw dosyasını yüklemek ve tüm import ifadelerini genel ad alanındaki bu modüllere başvuran yerel değişkenlerle değiştirmektir.
npm'de yayınlanan her Workbox hizmet çalışanı paketi, adın camelCase sürümü üzerinden global workbox ad alanında da mevcut olduğu için bu işe yarar (ör. workbox-precaching npm paketinden dışa aktarılan tüm modüllerworkbox.precaching.* üzerinde bulunabilir. Ayrıca, workbox-background-sync npm paketinden dışa aktarılan tüm modüller workbox.backgroundSync.* üzerinde bulunabilir.
Örnek olarak, Çalışma Kutusu modüllerine referans veren import ifadelerini kullanan bazı kod aşağıda verilmiştir:
import {registerRoute} from 'workbox-routing';
import {CacheFirst} from 'workbox-strategies';
import {CacheableResponse} from 'workbox-cacheable-response';
registerRoute(
({request}) => request.destination === 'image',
new CacheFirst({
plugins: [new CacheableResponsePlugin({statuses: [0, 200]})],
})
);
Burada, aynı kodu workbox-sw kullanmak üzere yeniden yazılmıştır (yalnızca içe aktarma ifadelerinin değiştiğine dikkat edin; mantığın mantığına müdahale edilmemiştir):
importScripts(
'https://storage.googleapis.com/workbox-cdn/releases/6.4.1/workbox-sw.js'
);
const {registerRoute} = workbox.routing;
const {CacheFirst} = workbox.strategies;
const {CacheableResponse} = workbox.cacheableResponse;
registerRoute(
({request}) => request.destination === 'image',
new CacheFirst({
plugins: [new CacheableResponsePlugin({statuses: [0, 200]})],
})
);