Çalışma kutusu penceresini kullanma

Bu dokümanda henüz çok fazla yer verilmeyen bir Workbox modülü workbox-window'dir. workbox-window, window'te çalışacak bir modül grubudur. Bu modülün hedefleri şunlardır:

• Geliştiricilerin hizmet çalışanı yaşam döngüsündeki kritik anları belirlemelerine ve bu anlarda yanıt vermeyi kolaylaştırarak hizmet çalışanı kaydını ve güncellemelerini kolaylaştırmak.
• Geliştiricilerin, bir hizmet çalışanını yanlış kapsama kaydetmek gibi yaygın hatalar yapmasını önlemek için.
• window ile Service Worker kapsamı arasındaki mesajlaşmayı basitleştirmek için.

workbox-window dosyalarını içe aktarma ve kullanma

workbox-window ürününden en sık kullanacağınız dışa aktarma işlemi, Workbox sınıfıdır. Bu sınıfı Düğüm'de veya bir web sayfasındaki CDN'den içe aktarabilirsiniz.

Yerel paket oluşturma

Aracı zincirinizde webpack veya Rollup gibi bir paketleyici varsa workbox-window'i yerel olarak paketleyebilirsiniz.

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

npm install workbox-window --save

Ardından, uygulamanızın JavaScript'inde, workbox-window'dan 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 dinamik import kullanarak sayfanızın ana uygulama mantığından bölebilirsiniz. Bu işlem sayfanızın ana paketinin boyutunu küçültebilir:

<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 öğesini 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 <script> öğesinin type="module" özelliğini kullandığına dikkat edin. Tarayıcıda statik import ifadelerini derleme adımı olmadan kullanmak istiyorsanız bu gereklidir. Servis çalışanlarını destekleyen tüm büyük tarayıcılar JavaScript modüllerini de destekler. Bu nedenle, bu kodu herhangi bir tarayıcıya sunabilirsiniz. Eski tarayıcılar, type özelliğinin değeri "module" olan <script> öğelerini yoksayar.

Hizmet çalışanı kaydetme

Bir hizmet çalışanını workbox-window'e kaydetme işlemi, Workbox sınıfının register yöntemiyle aşağıdaki gibi yapılır:

import {Workbox} from 'workbox-window';

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

Bunun, navigator.serviceWorker.register kullanarak kendi hizmet çalışanı kaydetmenizle aynı olduğu anlaşılıyor. Ancak Workbox.register, hizmet çalışanını kaydetmeden önce window load etkinliğine kadar beklemeyle ilgilenir. Bu, önceden önbelleğe almanın söz konusu olduğu durumlarda, sayfa açılışını geciktirebilecek bant genişliği anlaşmazlığının önlenebilmesi için tercih edilir.

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

Service Worker'lar, window ürününden ayrı olarak kendi kapsamına sahiptir ve window içinde kullanılabilen API'lerin yalnızca bir alt kümesine erişebilirler. Ancak window ile hizmet çalışanı arasında iletişim kurulabilir. workbox-window, workbox-window modülünün messageSW yöntemiyle iki kapsam arasında daha kolay iletişim kurulmasını sağlar.

Çalışma kutusu, mesajlar için belirli bir biçim kullanır ve nesne aşağıdaki özelliklere sahiptir:

• type, mesajı tanımlayan gerekli bir benzersiz dizedir. Biçim büyük harflerle yazılmalı ve kelimeler alt çizgiyle ayrılmalıdır (örneğin, CACHE_URLS).
• meta, iletiyi 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, herhangi bir veri türü olabilir.

Aşağıda, hizmet çalışanınızdaki kodla başlayarak messageSW'nin 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ıza aşağıdaki 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ı ile window arasında iletişim kurmanın faydalı olabileceği birçok durum vardır (ör. bir hizmet çalışanı güncellemesi mevcut olduğunda kullanıcıyı bilgilendirme). Bu tarif, self.skipWaiting için messageSkipWaiting adlı özel bir yardımcı yöntem kullanır. Bu yöntem, type değeri SKIP_WAITING olan bir ileti gönderir.