Çalışma kutusu penceresini kullanma

Bu dokümanda henüz yeterli kapsamı bulunmayan Çalışma Kutusu modüllerinden biri olan workbox-window, window üzerinde çalışması amaçlanan bir dizi modüldür. Bu modülün hedefleri şunlardır:

• Geliştiricilerin hizmet çalışanı yaşam döngüsündeki kritik anları belirlemelerine yardımcı olarak hizmet çalışanı kaydını ve güncellemeleri basitleştirir ve bu anlarda yanıt vermeyi kolaylaştırır.
• Geliştiricilerin, bir hizmet çalışanını yanlış kapsamda kaydettirmek gibi yaygın hatalar yapmasını önlemek için.
• window ile hizmet çalışanı kapsamı arasındaki mesajlaşmayı basitleştirmek için.

workbox-window içe aktarılıyor ve kullanılıyor

workbox-window kaynağından en sık kullanacağınız dışa aktarma işlemi, Düğümde veya bir web sayfasındaki CDN'den içe aktarabileceğiniz Workbox sınıfıdır.

Yerel paket oluşturma

Araç zincirinizde webpack veya Toplayıcı gibi bir paketleyici varsa workbox-window'yi yerel olarak gruplandırabilirsiniz.

Öncelikle, uygulamanızın üretim bağımlılığı olarak workbox-window uygulamasını yükleyin:

npm install workbox-window --save

Ardından, uygulamanızın JavaScript'inde workbox-window öğesinden Workbox sınıfını import:

<script type="module">
import {Workbox} from 'workbox-window';

if ('serviceWorker' in navigator) {
  const wb = new Workbox('/sw.js');

  wb.register();
}
</script>

workbox-window oldukça küçük olsa da, sayfanızın ana paketinin boyutunu küçültebilecek dinamik import özelliğini kullanarak onu web sitenizin temel uygulama mantığından bölebilirsiniz:

<script type="module">
if ('serviceWorker' in navigator) {
  const {Workbox} = await import('workbox-window');

  const wb = new Workbox('/sw.js');
  wb.register();
}
</script>

CDN'yi kullanma

Önerilen yaklaşım olmasa da workbox-window kullanmanın daha kolay bir yolu, dosyayı bir CDN'den içe aktarmaktır:

<script type="module">
  import {Workbox} from 'https://storage.googleapis.com/workbox-cdn/releases/6.2.0/workbox-window.prod.mjs';

  if ('serviceWorker' in navigator) {
    const wb = new Workbox('/sw.js');

    wb.register();
  }
</script>

Yukarıdaki örnekte yer alan <script> öğesinin type="module" özelliğini kullandığını unutmayın. Tarayıcıda derleme adımı olmadan statik import ifadelerini kullanmak istiyorsanız bu gereklidir. Service Worker'ları destekleyen başlıca tüm tarayıcılar JavaScript modüllerini de destekler. Bu nedenle, eski tarayıcılar type özellik değeri "module" olan <script> öğelerini yoksayacağından, bu kodu tüm tarayıcılara sunabilirsiniz.

Hizmet çalışanı kaydetme

workbox-window ile bir hizmet çalışanı kaydetme işlemi, Workbox sınıfının register yöntemiyle yapılır ve şu şekilde yapılır:

import {Workbox} from 'workbox-window';

const wb = new Workbox('/sw.js');
wb.register();

Bu işlem, navigator.serviceWorker.register aracını kullanarak kendiniz bir hizmet çalışanı kaydettirmekle aynı gibi görünebilir. Ancak Workbox.register, hizmet çalışanını kaydetmeden önce window load etkinliğine kadar beklemeyi üstlenir. Önbelleğe almanın söz konusu olduğu durumlarda bu tercih edilir. Böylece, sayfa başlangıcını geciktirebilecek bant genişliği çakışması önlenebilir.

window ve hizmet çalışanı kapsamı arasında iletişim

Service Worker'lar window dışında kendi kapsamlarına sahiptir ve window içinde bulunan API'lerin yalnızca bir alt kümesine erişebilir. Ancak window ve hizmet çalışanı arasında iletişim kurulabilir. workbox-window, workbox-window modülünün messageSW yöntemini kullanarak iki kapsam arasında daha kolay iletişim kurulmasını sağlar.

Çalışma kutusu, iletiler için belirli bir biçimi kullanır ve aşağıdaki özelliklere sahip bir nesnedir:

• type, iletiyi tanımlayan gerekli benzersiz dizedir. Biçim, kelimeleri ayıran alt çizgiler ve büyük harfle yazılmalıdır (örneğin, CACHE_URLS).
• meta, mesajı gönderen Workbox paketinin adını temsil eden isteğe bağlı bir dizedir ve genellikle atlanır.
• payload, göndermek istediğiniz verileri temsil eden isteğe bağlı bir parametredir. Bu tüm veri türleri olabilir.

Aşağıda, hizmet çalışanınızdaki kodla başlayarak messageSW özelliğinin nasıl çalıştığına dair bir örnek verilmiştir:

// sw.js
const SW_VERSION = '1.0.0';

self.addEventListener('message', (event) => {
  if (event.data.type === 'GET_VERSION') {
    event.ports[0].postMessage(SW_VERSION);
  }
});

Ardından web sayfanızda şu kodu ekleyin:

const wb = new Workbox('/sw.js');
wb.register();

const swVersion = await wb.messageSW({type: 'GET_VERSION'});
console.log('Service Worker version:', swVersion);

Bir hizmet çalışanı güncellemesi olduğunda kullanıcıyı bilgilendirmek gibi, bir hizmet çalışanı ile window arasındaki iletişimin yararlı olabileceği birçok durum vardır. Bu tarif, self.skipWaiting için messageSkipWaiting adlı özel bir yardımcı yönteme dayanır. Bu yöntem, SKIP_WAITING type değerine sahip bir mesaj gönderir.