Modul ES di pekerja layanan

Alternatif modern untuk importScripts().

Jeff Posnick

Latar belakang

Modul ES telah menjadi favorit developer sejak beberapa waktu lalu. Selain sejumlah manfaat lainnya, modul ini menawarkan format modul universal tempat kode bersama dapat dirilis sekali dan dijalankan di browser serta di runtime alternatif seperti Node.js. Meskipun semua browser modern menawarkan beberapa dukungan modul ES, tidak semua browser menawarkan dukungan di mana saja kode dapat dijalankan. Secara khusus, dukungan untuk mengimpor modul ES di dalam pekerja layanan browser baru saja mulai tersedia secara lebih luas.

Artikel ini menjelaskan status dukungan modul ES saat ini di pekerja layanan di seluruh browser umum, beserta beberapa masalah yang harus dihindari, dan praktik terbaik untuk mengirimkan kode pekerja layanan yang kompatibel dengan versi sebelumnya.

Kasus penggunaan

Kasus penggunaan yang ideal untuk modul ES di dalam pekerja layanan adalah untuk memuat library atau kode konfigurasi modern yang dibagikan dengan runtime lain yang mendukung modul ES.

Mencoba membagikan kode dengan cara ini sebelum modul ES mengharuskan penggunaan format modul "universal" lama seperti UMD yang menyertakan boilerplate yang tidak diperlukan, dan menulis kode yang membuat perubahan pada variabel yang diekspos secara global.

Skrip yang diimpor melalui modul ES dapat memicu alur update pekerja layanan jika kontennya berubah, yang cocok dengan perilaku importScripts().

Batasan saat ini

Hanya impor statis

Modul ES dapat diimpor dengan salah satu dari dua cara: secara statis, menggunakan sintaksis import ... from '...', atau secara dinamis, menggunakan metode import(). Di dalam pekerja layanan, saat ini hanya sintaksis statis yang didukung.

Batasan ini analog dengan pembatasan serupa yang diterapkan pada penggunaan importScripts(). Panggilan dinamis ke importScripts() tidak berfungsi di dalam pekerja layanan, dan semua panggilan importScripts(), yang secara inheren sinkron, harus selesai sebelum pekerja layanan menyelesaikan fase install-nya. Batasan ini memastikan bahwa browser mengetahui, dan dapat secara implisit menyimpan cache, semua kode JavaScript yang diperlukan untuk penerapan service worker selama penginstalan.

Pada akhirnya, pembatasan ini mungkin dicabut, dan impor modul ES dinamis mungkin diizinkan. Untuk saat ini, pastikan Anda hanya menggunakan sintaksis statis di dalam pekerja layanan.

Bagaimana dengan pekerja lain?

Dukungan untuk modul ES di pekerja "khusus"—yang dibuat dengan new Worker('...', {type: 'module'})—lebih luas, dan telah didukung di Chrome dan Edge sejak versi 80, serta versi terbaru Safari. Impor modul ES statis dan dinamis didukung di pekerja khusus.

Chrome dan Edge telah mendukung modul ES di pekerja bersama sejak versi 83, tetapi tidak ada browser lain yang menawarkan dukungan saat ini.

Tidak ada dukungan untuk peta impor

Peta impor memungkinkan lingkungan runtime menulis ulang penentu modul, misalnya, menambahkan URL CDN pilihan tempat modul ES dapat dimuat.

Meskipun Chrome dan Edge versi 89 dan yang lebih baru mendukung peta impor, saat ini tidak dapat digunakan dengan pekerja layanan.

Dukungan browser

Modul ES di pekerja layanan didukung di Chrome dan Edge mulai dari versi 91.

Safari menambahkan dukungan dalam Rilis Pratinjau Teknologi 122, dan developer akan melihat fungsi ini dirilis dalam versi stabil Safari pada masa mendatang.

Kode contoh

Ini adalah contoh dasar penggunaan modul ES bersama dalam konteks window aplikasi web, sekaligus mendaftarkan pekerja layanan yang menggunakan modul ES yang sama:

// 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);
    // ...
  })());
});

Kompatibilitas mundur

Contoh di atas akan berfungsi dengan baik jika semua browser mendukung modul ES di service worker, tetapi pada saat penulisan ini, hal itu tidak terjadi.

Untuk mengakomodasi browser yang tidak memiliki dukungan bawaan, Anda dapat menjalankan skrip pekerja layanan melalui bundler yang kompatibel dengan modul ES untuk membuat pekerja layanan yang menyertakan semua kode modul secara inline, dan akan berfungsi di browser lama. Atau, jika modul yang Anda coba impor sudah tersedia dalam paket dalam format IIFE atau UMD, Anda dapat mengimpornya menggunakan importScripts().

Setelah memiliki dua versi pekerja layanan yang tersedia—satu yang menggunakan modul ES, dan yang lainnya tidak—Anda harus mendeteksi apa yang didukung browser saat ini, dan mendaftarkan skrip pekerja layanan yang sesuai. Praktik terbaik untuk mendeteksi dukungan saat ini masih dalam proses, tetapi Anda dapat mengikuti diskusi di masalah GitHub ini untuk mendapatkan rekomendasi.

_Foto oleh Vlado Paunovic di Unsplash_