Modul ES di pekerja layanan

Alternatif modern untuk importScripts().

Jeff Posnick

Latar belakang

Modul ES telah menjadi favorit developer untuk sementara waktu. Selain sejumlah manfaat lain, modul ini menawarkan jaminan akan format modul universal tempat kode bersama dapat dirilis sekali dan dijalankan di browser serta dalam runtime alternatif seperti Node.js. Meskipun semua browser modern menawarkan beberapa dukungan modul ES, tidak semuanya menawarkan dukungan di mana saja kode tersebut dapat dijalankan. Secara khusus, dukungan untuk mengimpor modul ES di dalam service worker browser akan tersedia secara luas.

Artikel ini menjelaskan status dukungan modul ES saat ini pada pekerja layanan di seluruh browser umum, bersama dengan 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 digunakan bersama oleh runtime lain yang mendukung modul ES.

Mencoba berbagi kode dengan cara ini sebelum modul ES memerlukan penggunaan format modul "universal" lama seperti UMD yang menyertakan boilerplate yang tidak diperlukan, dan penulisan 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, sehingga cocok dengan perilaku importScripts().

Batasan saat ini

Khusus 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, hanya sintaksis statis yang saat ini didukung.

Pembatasan ini setara dengan pembatasan serupa yang diterapkan pada penggunaan importScripts(). Panggilan dinamis ke importScripts() tidak berfungsi di dalam pekerja layanan, dan semua panggilan importScripts(), yang secara bawaan sinkron, harus diselesaikan sebelum pekerja layanan menyelesaikan fase install-nya. Pembatasan ini memastikan bahwa browser mengetahui tentang, dan dapat meng-cache secara implisit, semua kode JavaScript yang diperlukan untuk implementasi pekerja layanan selama penginstalan.

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

Bagaimana dengan pekerja lain?

Dukungan untuk modul ES pada 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 pada pekerja khusus.

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

Tidak ada dukungan untuk impor peta

Mengimpor peta memungkinkan lingkungan runtime menulis ulang penentu modul, misalnya, untuk menambahkan awalan URL CDN pilihan tempat modul ES dapat dimuat.

Meskipun Chrome dan Edge versi 89 dan yang lebih baru mendukung peta impor, keduanya 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 Technology Preview 122 Release, dan developer akan melihat fungsi ini yang 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 dalam pekerja layanan, tetapi saat tulisan ini dibuat, tidak demikian.

Untuk mengakomodasi browser yang tidak memiliki dukungan bawaan, Anda dapat menjalankan skrip pekerja layanan melalui pemaket 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 format IIFE atau UMD, Anda dapat mengimpornya menggunakan importScripts().

Setelah tersedia dua versi pekerja layanan, yaitu satu yang menggunakan modul ES, dan versi satunya tidak menggunakan modul ini, Anda harus mendeteksi apa yang didukung oleh browser saat ini, dan mendaftarkan skrip pekerja layanan yang sesuai. Praktik terbaik untuk mendeteksi dukungan saat ini sedang berubah, tetapi Anda dapat mengikuti diskusi di masalah GitHub ini untuk mendapatkan rekomendasi.

_Foto oleh Vlado Paunovic di Unsplash_