çalışma kutusu-sw

workbox-sw modülü, çalışmaya başlamanız için son derece kolay bir yol sunar. Workbox modüllerinin kullanımını kolaylaştırır, Workbox modüllerinin yüklenmesini kolaylaştırır ve bazı basit yardımcı yöntemler sunar.

workbox-sw aracını CDN'miz aracılığıyla veya bir dizi çalışma kutusu dosyasıyla kullanabilirsiniz .

CDN üzerinden Workbox SW kullanma

Bu modülü kullanmaya başlamanın en kolay yolu CDN'yi kullanmaktır. Yapmanız gerekenler hizmet çalışanınıza aşağıdakileri ekleyin:

importScripts(
  'https://storage.googleapis.com/workbox-cdn/releases/6.4.1/workbox-sw.js'
);

Böylece, hizmet çalışanınızda şunları yapacak workbox ad alanına sahip olursunuz: tüm Workbox modüllerine erişim izni verir.

workbox.precaching.*
workbox.routing.*
etc

Ek modülleri kullanmaya başladığınızda bazı sihirli sonuçlar elde edersiniz.

Bir modüle ilk kez başvurduğunuzda workbox-sw bunu algılar kullanıma sunmadan önce yüklemeniz gerekir. Bu sorunun yaşandığını görmek için ağ sekmesinde bulabilirsiniz.

Geliştirici Araçları'nda Çalışma Kutusu Kitaplıkları Yükleme

Bu dosyalar, ileride kullanılmak üzere tarayıcınız tarafından önbelleğe alınır çevrimdışı kullanım.

CDN Yerine Yerel Çalışma Kutusu Dosyalarını Kullanma

CDN'yi kullanmak istemiyorsanız Workbox dosyalarına kolayca geçebilirsiniz kendi alan adınızda barındırılır.

En basit yaklaşım, dosyaları workbox-cli'ın copyLibraries komutuyla almak ve bu komuttan sonra modulePathPrefix yapılandırma seçeneği aracılığıyla bu dosyaların bulunacağı yer workbox-sw.

Dosyaları /third_party/workbox-vX.Y.Z/ altına yerleştirirseniz şu şekilde kullanırsınız:

importScripts('/third_party/workbox-vX.Y.Z/workbox-sw.js');

workbox.setConfig({
  modulePathPrefix: '/third_party/workbox-vX.Y.Z/',
});

Eş Zamansız İçe Aktarmaları Önleme

Yeni modüllerin ilk kez yüklenmesi, daha sonra importScripts() karşılık gelen JavaScript dosyasının yoluyla (CDN'de veya yerel bir URL aracılığıyla barındırılır). Her iki durumda da önemli bir kısıtlama vardır: importScripts() işlevine yapılan örtülü çağrılar yalnızca bir Service Worker'ın install işleyicisinin içinde veya eşzamanlı sırasında meydana gelirse Service Worker komut dosyasının ilk yürütülmesi.

Bu kısıtlamayı ihlal etmemek için en iyi uygulamalardan biri, workbox.* ad alanlarını, herhangi bir etkinlik işleyicinin veya eşzamansız işlevlerin dışına çıkarır.

Ö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 web sitenizin başka bir yerinde workbox.strategies için başvuruda bulunmadıysanız aşağıdaki kod sorun olabilir hizmet çalışanı:

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

Aksi takdirde bu kısıtlamaya aykırı olabilecek bir kod yazmanız gerekirse importScripts() çağrısını etkinlik işleyicinin dışında başlatmak için workbox.loadModule() yöntemi:

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şturabilirsiniz. ve ilgili 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ına Zorla

Workbox modüllerinin hepsi iki derleme içerir: günlük kaydını, ek tür kontrolünü ve üretim derlemesini içerir. günlük kaydını ve tür denetimini çıkarır.

workbox-sw, varsayılan olarak 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ırmasını ayarlayabilirsiniz seçenek:

workbox.setConfig({
  debug: true,
});

workbox-sw kullanmak için içe aktarma ifadelerini kullanarak kodu dönüştürün

Çalışma Kutusu'nu workbox-sw kullanarak yüklerken tüm Çalışma Kutusu paketlerine şunun üzerinden erişilir: global workbox.* ad alanında yer alır.

Dönüştürmek istediğiniz import ifadelerini kullanan bir kod örneğiniz varsa workbox-sw kullanmak için tek yapmanız gereken workbox-sw yüklemek ve tüm import ifadelerini referans verilen yerel değişkenlerle değiştirmek bu modüller de global ad alanına yerleştirilmelidir.

Bu işlem, npm'de yayınlanan her Workbox service Worker paketi de aynı zamanda global workbox ad alanında Adın camelCase biçimi (ör. workbox-precaching npm paketinden dışa aktarılan tüm modüller şurada bulunabilir: workbox.precaching.*. Dışa aktarılan tüm modüller workbox-background-sync npm paketi şurada bulunabilir: workbox.backgroundSync.*) tıklayın.

Örnek olarak, aşağıdaki gibi referans alan import ifadelerinin kullanıldığı Çalışma kutusu modülleri:

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 da aynı kod, workbox-sw kullanmak için yeniden yazılmıştır (yalnızca içe aktarma ifadeleri değişti (mantığa dokunulmadı):

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]})],
  })
);