Modul ES di pekerja layanan

Alternatif modern untuk importScripts().

Jeff Posnick

Latar belakang

Modul ES telah menjadi favorit pengembang untuk sementara waktu. Selain pasal sejumlah manfaat lainnya, mereka menawarkan format modul universal di mana kode yang dibagikan dapat dirilis sekali dan berjalan di {i>browser<i} dan dalam {i>runtime <i}alternatif seperti Node.js. Meskipun semua browser modern menawarkan beberapa dukungan modul ES, mereka tidak semuanya menawarkan dukungan di mana pun kode dapat dijalankan. Khususnya, dukungan untuk mengimpor modul ES di dalam browser pekerja layanan baru akan tersedia secara luas.

Artikel ini menjelaskan status dukungan modul ES saat ini dalam pekerja layanan di seluruh {i>browser<i} 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 service worker adalah untuk memuat library modern atau kode konfigurasi yang digunakan bersama runtime lain yang mendukung modul ES.

Mencoba membagikan kode dengan cara ini sebelum modul ES memerlukan penggunaan versi lama "universal" dalam format modul seperti UMD yang menyertakan boilerplate yang tidak diperlukan, dan penulisan kode yang membuat perubahan pada variabel.

Skrip yang diimpor melalui modul ES dapat memicu pekerja layanan info terbaru mengalir jika kontennya berubah, sesuai dengan perilaku pengguna importScripts().

Batasan saat ini

Khusus impor statis

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

Keterbatasan ini setara dengan pembatasan serupa ditempatkan pada penggunaan importScripts(). Panggilan dinamis ke importScripts() tidak bekerja di dalam pekerja layanan, dan semua panggilan importScripts(), yang secara inheren sinkron, harus selesai sebelum pekerja layanan menyelesaikan Fase install. Pembatasan ini memastikan bahwa {i>browser<i} mengetahui tentang, dan dapat secara implisit meng-cache, semua kode JavaScript yang dibutuhkan untuk metode selama instalasi.

Pada akhirnya, pembatasan ini mungkin dicabut, dan ES dinamis impor modul mungkin diizinkan. Untuk saat ini, pastikan bahwa Anda hanya menggunakan {i>syntax<i} statis di dalam pekerja layanan.

Bagaimana dengan pekerja lain?

Dukungan untuk Modul ES di "khusus" pekerja—itu 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 pada pekerja khusus.

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

Tidak ada dukungan untuk impor peta

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

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

Dukungan browser

Modul ES di pekerja layanan didukung di Chrome dan Edge dimulai dengan versi 91.

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

Kode contoh

Ini adalah contoh dasar penggunaan modul ES bersama dalam window aplikasi web konteks, 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 pekerja layanan, tetapi saat tulisan ini dibuat, hal itu tidak terjadi.

Untuk mengakomodasi browser yang tidak memiliki dukungan terpasang, 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 {i>browser<i} lama. Atau, jika modul yang Anda coba impor telah sudah tersedia dipaketkan dalam IIFE atau UMD, Anda dapat mengimpornya menggunakan importScripts().

Setelah Anda menyediakan dua versi pekerja layanan—yang menggunakan ES modul lain, dan ada juga yang tidak. Anda harus mendeteksi didukung browser, dan mendaftarkan skrip pekerja layanan yang sesuai. Terbaik praktik untuk mendeteksi dukungan saat ini sedang mengalami fluks, tetapi Anda dapat mengikuti diskusi dalam Masalah GitHub untuk rekomendasi.

_Foto oleh Vlado Paunovic di Unsplash_