Service Worker'larda ES modülleri

importScripts() için modern bir alternatif.

Jeff Posnick

Arka plan

ES modülleri bir süredir geliştiricilerin favorisidir. Ek olarak, birçok başka avantaj, paylaşılan kodun kullanılabileceği evrensel bir modül biçimi vaat ediyorlar bir kez yayınlanır ve tarayıcılarda ve şunun gibi alternatif çalışma zamanlarında çalışır: Node.js. Bu sırada tüm modern tarayıcılarda bazı ES modülü desteği sunabiliyorlar, ancak hepsi desteklenen her yerde destek çalıştırılabilir. Özellikle, ES modüllerini bir tarayıcının hizmet çalışanı yaygınlaşmaya başladı.

Bu makalede, hizmet çalışanlarında ES modülü desteğinin mevcut durumu ayrıntılı olarak açıklanmaktadır. ve kaçınılması gereken bazı sorunlar ve en iyi uygulamalar hakkında hizmet çalışanı kodu gönderme hakkında daha fazla bilgi edinin.

Kullanım alanları

Service Worker'lar içindeki ES modüllerinin ideal kullanım alanı, paylaşılan diğer çalışma zamanlarıyla paylaşılan modern bir kitaplık veya ES modüllerini destekler.

Daha eski bir sürüm kullanmayı gerektiren ES modüllerinden önce bu şekilde kod paylaşmaya çalışılması "evrensel" UMD gibi modül biçimleri gereksiz ortak metin ve tüm dünyada kullanıma sunulacak değişiklikler için değişkenlerine karşılık gelir.

ES modülleri aracılığıyla içe aktarılan komut dosyaları, hizmet çalışanını tetikleyebilir güncelle ve abonelik bilgileriyle eşleşen davranış / importScripts().

Mevcut sınırlamalar

Yalnızca statik içe aktarmalar

ES modülleri şu iki yöntemden biriyle içe aktarılabilir: statik olarak, import ... from '...' söz dizimini kullanarak veya dinamik olarak, import() yöntemini kullanıyorsunuz. Service Worker'ın içinde, yalnızca statik söz dizimi şu anda desteklenmektedir.

Bu sınırlama, benzer kısıtlama importScripts() kullanımına uygulandı. importScripts() için yapılan dinamik aramalar hizmet çalışanının içinde ve tüm importScripts() çağrılarının yapısı gereği eşzamanlıdır, Service Worker kendi işini tamamlamadan önce install aşama. Bu kısıtlama, tarayıcının bunları bilmesini ve için gereken tüm JavaScript kodlarını doğrudan önbelleğe alabilir, bazı temel öğeleri ele alacağız.

Nihayetinde bu kısıtlama kaldırılır ve dinamik ES, modül içe aktarmaları izin verilebilir. Şimdilik yalnızca hizmet çalışanıdır.

Peki ya diğer çalışanlar?

Destek "Özel" kategorisindeki ES modülleri çalışanlar: bu çalışanlar new Worker('...', {type: 'module'}) ile inşa edilmiştir — daha yaygındır ve Chrome ve Edge'de destekleniyor sürüm 80 ve Safari'nin yeni sürümlerine göz atın. Özel çalışanlarda hem statik hem de dinamik ES modülü içe aktarma işlemleri desteklenir.

Chrome ve Edge, şurada ES modüllerini desteklemiştir: paylaşılan çalışanlar sürüm 83'ten bu yana, ancak diğer tarayıcı şu anda destek sunuyor.

Haritaları içe aktarma desteği yok

Haritaları içe aktarma izni yeniden yazmak için çalışma zamanı ortamlarının tamamını oluşturur (örneğin, ES modüllerinin yükleneceği tercih edilen CDN'nin URL'si.

Chrome ve Edge sürüm 89 ve sonraki sürümler desteklenen haritaları desteklemektedir. Şu anda hizmetle kullanılamaz birlikte çalışır.

Tarayıcı desteği

Service Worker'lardaki ES modülleri şundan itibaren Chrome'da ve Edge'de desteklenir: sürüm 91 için de geçerlidir.

Safari, Technology Preview 122 Sürümü, Geliştiricilerin bu işlevin kararlı kullanıma sunmayı planlıyoruz.

Örnek kod

Bu, bir web uygulamasının window öğesinde paylaşılan bir ES modülünün kullanılmasına dair temel bir örnektir aynı ES modülünü kullanan bir hizmet çalışanı kaydederken:

// Inside config.js:
export const cacheName = 'my-cache';

// Inside your web app:
<script type="module">
  import {cacheName} from './config.js';
  // Do something with cacheName.

  await navigator.serviceWorker.register('es-module-sw.js', {
    type: 'module',
  });
</script>

// Inside es-module-sw.js:
import {cacheName} from './config.js';

self.addEventListener('install', (event) => {
  event.waitUntil((async () => {
    const cache = await caches.open(cacheName);
    // ...
  })());
});

Geriye dönük uyumluluk

Yukarıdaki örnek, ele alalım. Ancak yazıya göre durum böyle değil.

Yerleşik desteği olmayan tarayıcıları kullanmak için Service Worker komut dosyası aracılığıyla ES modülü uyumlu paketleyici tüm modül kodunu satır içi olarak içeren ve eski tarayıcılarda çalışır. Alternatif olarak, içe aktarmaya çalıştığınız modüller paket halinde zaten mevcut olan IIFE veya UMD biçimlerini kullanıyorsanız bunları importScripts().

Service Worker'ınızın biri ES kullanan iki sürümü olduğunda olup olmadığını belirlemek için mevcut modüllerdeki ilgili hizmet çalışanı komut dosyasını desteklemeli ve kaydetmelidir. En iyi şu anda çok fazla değişim söz konusu. Ancak aşağıdaki adımları izleyerek bu konudaki tartışma GitHub sorunu: öneriler.

_Fotoğrafçı: Vlado Paunovic, Unsplash_