Modul ES di pekerja layanan

Alternatif modern untuk importScripts().

Jeff Posnick

Latar belakang

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

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

Kasus penggunaan

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

Sebelum modul ES, upaya untuk membagikan kode dengan cara ini memerlukan penggunaan format modul "universal" yang lebih lama seperti UMD yang menyertakan boilerplate yang tidak diperlukan, dan penulisan kode yang membuat perubahan pada variabel yang terekspos secara global.

Skrip yang diimpor melalui modul ES dapat memicu alur update pekerja layanan jika kontennya berubah, sesuai 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 meng-cache secara implisit, semua kode JavaScript yang diperlukan untuk implementasi service worker selama penginstalan.

Pada akhirnya, batasan ini mungkin akan dicabut, dan impor modul ES dinamis mungkin akan diizinkan. Untuk saat ini, pastikan Anda hanya menggunakan sintaksis statis di dalam service worker.

Bagaimana dengan pekerja lain?

Dukungan untuk modul ES di worker "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 dedicated worker.

Chrome dan Edge telah mendukung modul ES di shared worker 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 peta tersebut 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

Berikut 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 saat tulisan ini dibuat, hal itu tidak terjadi.

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

Setelah memiliki dua versi service worker yang tersedia—satu yang menggunakan modul ES, dan satu lagi yang tidak—Anda harus mendeteksi apa yang didukung browser saat ini, dan mendaftarkan skrip service worker yang sesuai. Praktik terbaik untuk mendeteksi dukungan saat ini masih berubah-ubah, tetapi Anda dapat mengikuti diskusi dalam masalah GitHub ini untuk mendapatkan rekomendasi.