Moduły ES w skryptach service worker

Nowoczesna alternatywa dla funkcji importScripts().

Jeff Posnick

Tło

Moduły ES jest ulubionym tematem deweloperów od dłuższego czasu. Oprócz wielu innych korzyści, To uniwersalny format modułów, gdzie wspólny kod jest wydawana jednorazowo i działa w przeglądarkach oraz w alternatywnych środowiskach wykonawczych, takich jak Node.js. Choć wszystkie nowoczesne przeglądarki obsługują tylko niektóre moduły ES, jednak nie wszystkie są dostępne wszędzie, gdy można uruchomić kod. W szczególności obsługa importu modułów ES jest obsługiwana w przeglądarki skrypt service worker staje się coraz powszechniej dostępna.

W tym artykule znajdziesz szczegółowe informacje o obecnym stanie obsługi modułu ES w mechanizmach Service Worker w popularnych przeglądarkach oraz pewne zagrożenia, których należy unikać, oraz sprawdzone metody wysyłki kodu service worker o zgodności wstecznej.

Przypadki użycia

Idealny przypadek użycia modułów ES w mechanizmach service worker to wczytywanie z nowoczesną biblioteką lub kodem konfiguracji udostępnianym innym środowiskiem wykonawczym, obsługują moduły ES.

Próba udostępnienia kodu w ten sposób przed modułami ES polegała na wykorzystaniu starszych „uniwersalne” formatów modułów, takich jak UMD, które obejmują niepotrzebny schemat i pisanie kodu, który wprowadza zmiany w udostępnianych globalnie zmiennych.

Skrypty zaimportowane przez moduły ES mogą aktywować skrypt service worker zaktualizuj w sytuacji, gdy zmieni się ich zawartość, zachowanie z importScripts().

Obecne ograniczenia

Tylko importy statyczne

Moduły ES można importować na 2 sposoby: statycznie, przy użyciu składni import ... from '...', dynamicznie, za pomocą metody import(). W mechanizmie service worker tylko statyczny składnia jest obecnie obsługiwana.

To ograniczenie jest analogiczne do podobne ograniczenie nałożonych na użycie importScripts(). Dynamiczne wywołania adresu importScripts() nie działają wewnątrz skryptu service worker, a wszystkie wywołania importScripts(), które są jest z natury synchroniczna, musi zakończyć działanie, zanim skrypt service worker zakończy faza install. To ograniczenie daje pewność, że przeglądarka wie o możesz niejawnie buforować, czyli cały kod JavaScript potrzebny do działania mechanizmu Service Worker podczas instalacji.

W przyszłości to ograniczenie może zostać zniesione, a dynamiczna ES importowanie modułów mogą być dozwolone. Na razie używaj tylko składni statycznej zawartej w parametrze skrypt service worker.

Co z innymi pracownikami?

Pomoc: Moduły ES w „dedykowanych” pracownicy, utworzone przy użyciu new Worker('...', {type: 'module'}) – jest bardziej powszechne. jest obsługiwana w Chrome i Edge od wersji 80 oraz najnowszych wersji Safari. Zarówno statyczne, jak i dynamiczne importowanie modułów ES jest obsługiwane przez dedykowane instancje robocze.

Chrome i Edge obsługują moduły ES w współdzielone instancje robocze od wersji 83, ale nie inna przeglądarka oferuje obecnie pomoc.

Brak obsługi importowania map

Importuj mapy pozwalają środowisk wykonawczych i przepisać specyfikatory modułów, na przykład dołączając na początku Adres URL preferowanej sieci CDN, z której można ładować moduły ES.

Chrome i Edge wersji 89 i nowszych obsługują importowanie map, nie można używać z usługą pracowników.

Obsługa przeglądarek

Moduły ES w mechanizmach Service Worker są obsługiwane w Chrome i Edge, zaczynając od wersji 91.

Przeglądarka Safari dodała obsługę Wersja przedpremierowa technologii 122, a deweloperzy powinni spodziewać się udostępnienia tej funkcji w wersji stabilnej, Safari w przyszłości.

Przykładowy kod

To jest podstawowy przykład wykorzystania udostępnionego modułu języka angielskiego w sekcji window aplikacji internetowej kontekstu oraz rejestrując skrypt service worker, który korzysta z tego samego modułu ES:

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

Zgodność wsteczna

Powyższy przykład działa dobrze, gdyby wszystkie przeglądarki obsługiwały moduły ES w ale na razie tak nie jest.

Aby dostosować ją do przeglądarek, które nie mają wbudowanej obsługi, możesz skrypt service worker za pomocą pakietu zgodnego z modułem ES, aby utworzyć skrypt service worker, który zawiera cały kod modułu w tekście i będzie działać starszych przeglądarek. Jeśli moduły, które próbujesz zaimportować, są dostępne w pakietach IIFE lub UMD, możesz je importować za pomocą importScripts().

Gdy będą dostępne 2 wersje skryptu service worker – jedną, która korzysta z ES modułów, a drugie nie, musisz wykryć bieżące obsługuje i zarejestruj odpowiedni skrypt service worker. Najlepsze metody wykrywania pomocy są obecnie zmieniane, ale zwróć uwagę na dyskusja w tej Problem z GitHubem dotyczący o zaleceniach.

_Fot. Vlado Paunovic na kanale Unsplash_