Servis çalışanlarında ES modülleri

Arka plan #

ES modülleri bir süredir geliştiricilerin favorisi olmuştur. ek olarak diğer faydaların sayısıpaylaşılan kodun bir kez yayınlanıp tarayıcılarda ve alternatif çalışma zamanlarında çalıştırılabileceği evrensel bir modül biçimi vaadini sunarlar. Node.js. Sırasında tüm modern tarayıcılar bazı ES modülü desteği sunar, hepsi destek sunmaz her yer bu kod çalıştırılabilir. Spesifik olarak, bir tarayıcının içine ES modüllerini içe aktarma desteği hizmet çalışanı daha yaygın olarak kullanılabilir hale gelmeye başlıyor.

Bu makale, ortak tarayıcılarda hizmet çalışanlarında ES modülü desteğinin mevcut durumunu, kaçınılması gereken bazı hileleri ve geriye dönük uyumlu hizmet çalışanı kodunu göndermeye yönelik en iyi uygulamaları ayrıntılarıyla açıklar.

Kullanım örnekleri #

Hizmet çalışanlarının içindeki ES modülleri için ideal kullanım durumu, ES modüllerini destekleyen diğer çalışma zamanlarıyla paylaşılan modern bir kitaplık veya yapılandırma kodu yüklemek içindir.

ES modüllerinden önce kodu bu şekilde paylaşmaya çalışmak, aşağıdakiler gibi daha eski “evrensel” modül biçimlerinin kullanılmasını gerektiriyordu: UMD Bunlar, gereksiz kalıpları ve küresel olarak açığa çıkan değişkenlerde değişiklikler yapan kod yazmayı içerir.

ES modülleri aracılığıyla içe aktarılan komut dosyaları, içerikleri değişirse hizmet çalışanı güncelleme akışını tetikleyebilir. davranış ile ilgili importScripts().

Mevcut sınırlamalar #

Yalnızca statik içe aktarmalar #

ES modülleri iki yoldan biriyle içe aktarılabilir: statik olarakkullanmak import ... from '...' sözdizimi veya dinamik olarakkullanmak import() yöntem. Bir hizmet çalışanının içinde şu anda yalnızca statik sözdizimi desteklenmektedir.

Bu sınırlama şuna benzer: benzer kısıtlama yer almak importScripts() kullanım. Dinamik aramalar importScripts() bir servis çalışanının içinde çalışmayın ve tüm importScripts() doğası gereği senkronize olan çağrılar, servis çalışanı işini tamamlamadan önce tamamlanmalıdır. install faz. Bu kısıtlama, tarayıcının kurulum sırasında bir hizmet çalışanının uygulaması için gereken tüm JavaScript kodunu bilmesini ve dolaylı olarak önbelleğe alabilmesini sağlar.

Sonunda, bu kısıtlama kaldırılabilir ve dinamik ES modülü içe aktarmaları izin verilebilir. Şimdilik, bir hizmet çalışanının içinde yalnızca statik sözdizimini kullandığınızdan emin olun.

Peki diğer çalışanlar? #

“Adanmış” işçilerde ES modülleri için destek — ile oluşturulmuş olanlar new Worker('...', {type: 'module'})— daha yaygındır ve o zamandan beri Chrome ve Edge’de desteklenmektedir. sürüm 80birlikte son sürümler Safari’nin. Hem statik hem de dinamik ES modülü içe aktarmaları, adanmış çalışanlar tarafından desteklenir.

Chrome ve Edge’de desteklenen ES modülleri vardır paylaşılan işçiler o zamandan beri sürüm 83ancak şu anda başka hiçbir tarayıcı destek sunmuyor.

Haritaları içe aktarma desteği yok #

Haritaları içe aktar çalışma zamanı ortamlarının, örneğin ES modüllerinin yüklenebileceği tercih edilen bir CDN’nin URL’sini başa eklemek için modül tanımlayıcılarını yeniden yazmasına izin verir.

Chrome ve Edge sürüm 89 ve üzeri içe aktarma haritalarını destekler, şu anda kullanılamaz servis çalışanları ile.

tarayıcı desteği #

Hizmet çalışanlarındaki ES modülleri, Chrome ve Edge’de şu tarihten başlayarak desteklenir: sürüm 91.

Safari, şuraya destek ekledi: Teknoloji Önizlemesi 122 Sürümüve geliştiriciler, gelecekte Safari’nin kararlı sürümünde yayınlanan bu işlevi görmeyi beklemelidir.

Örnek kod #

Bu, bir web uygulamasında paylaşılan bir ES modülü kullanmanın temel bir örneğidir. window bağlam, aynı ES modülünü kullanan bir hizmet çalışanını da 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, hizmet çalışanlarında tüm tarayıcılar ES modüllerini destekliyorsa iyi çalışır, ancak bu yazı itibariyle durum böyle değil.

Yerleşik desteği olmayan tarayıcıları barındırmak için hizmet çalışanı betiğinizi bir ES modülü uyumlu paketleyici satır içi modül kodunun tamamını içeren ve eski tarayıcılarda çalışacak bir hizmet çalışanı oluşturmak için. Alternatif olarak, içe aktarmaya çalıştığınız modüller zaten paket halinde mevcutsa IIFE veya UMD biçimlerini kullanarak içe aktarabilirsiniz. importScripts().

Hizmet çalışanınızın iki sürümüne sahip olduğunuzda (biri ES modüllerini kullanan ve diğeri kullanmayan), geçerli tarayıcının neleri desteklediğini algılamanız ve ilgili hizmet çalışanı komut dosyasını kaydetmeniz gerekir. Desteği tespit etmeye yönelik en iyi uygulamalar şu anda değişim halindedir, ancak buradaki tartışmayı takip edebilirsiniz. GitHub sorunu tavsiyeler için

fotoğrafı çeken Vlado Paunovic Açık Unsplash