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 lainnya, fitur ini menawarkan format modul universal yang memungkinkan kode yang dibagikan bisa dirilis satu kali dan dijalankan di browser serta dalam runtime alternatif seperti Node.js. Meskipun semua browser modern menawarkan beberapa dukungan modul ES, tetapi tidak semuanya menawarkan dukungan di mana saja kode tersebut dapat dijalankan. Secara khusus, dukungan untuk mengimpor modul ES di dalam pekerja layanan browser baru mulai tersedia secara lebih luas.

Artikel ini menjelaskan status dukungan modul ES saat ini dalam pekerja layanan di seluruh browser umum, beserta beberapa kesalahan yang harus dihindari, dan praktik terbaik untuk mengirim 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 atau kode konfigurasi modern yang dibagikan dengan runtime lain yang mendukung modul ES.

Mencoba berbagi kode dengan cara ini sebelum modul ES memerlukan penggunaan format modul "universal" lama seperti UMD yang mencakup 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, 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, hanya sintaksis statis yang saat ini didukung.

Batasan ini serupa 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 diselesaikan sebelum pekerja layanan menyelesaikan fase install. Pembatasan ini memastikan bahwa browser mengetahui, dan dapat melakukan cache secara implisit, semua kode JavaScript yang diperlukan untuk implementasi pekerja layanan selama penginstalan.

Pada akhirnya, pembatasan ini dapat 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 dalam pekerja "khusus"—yang dibangun 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 dalam worker 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 peta impor

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

Meskipun Chrome dan Edge versi 89 dan yang lebih baru mendukung peta impor, saat ini keduanya 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 di 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, hal itu 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 Anda menyediakan dua versi pekerja layanan—versi yang menggunakan modul ES, dan versi lainnya yang tidak—Anda harus mendeteksi apa yang didukung browser saat ini dan mendaftarkan skrip pekerja layanan yang sesuai. Praktik terbaik untuk mendeteksi dukungan saat ini tidak tetap, tetapi Anda dapat mengikuti diskusi di masalah GitHub ini untuk mendapatkan rekomendasi.

_Foto oleh Vlado Paunovic di Unsplash_