このページは Cloud Translation API によって翻訳されました。

Service Worker の ES モジュール

importScripts() の最新の代替手段。

Jeff Posnick

背景

ES モジュール長い間デベロッパーに愛されてきましたKubernetes の汎用モジュール形式により、共有コードをモジュール化し、ブラウザや次のような代替ランタイムで実行される Node.js。しばらくすべての最新ブラウザサポートしている ES モジュールのサポートが、すべて コードを実行できます具体的には、リモートホスト内の ES モジュールのインポートが、ブラウザの Service Worker 利用可能になり始めたところです

この記事では、Service Worker における ES モジュールのサポートの現状について詳しく説明します。回避すべき問題点とベストプラクティス下位互換性が確保されます。

ユースケース

Service Worker 内の ES モジュールの理想的なユースケースは、他のランタイムと共有される最新のライブラリまたは構成コードにサポートしています。

ES モジュールで古いバージョンのコードを使用する "ユニバーサル"UMD などのモジュール形式を使用しており、グローバルに公開された変更を行うコードを記述したり、使用します。

ES モジュールを介してインポートされたスクリプトで Service Worker をトリガー可能更新変更すると、そのアプリケーションのすべてのレイヤに行動 / importScripts()。

現在の制限事項

静的インポートのみ

ES モジュールは、次のいずれかの方法でインポートできます。静的に import ... from '...' 構文を使用する動的に import() メソッドを使用します。Service Worker 内では、構文は、現在サポートされています。

この制限は、同様の制限 importScripts() の使用に対して適用されます。importScripts() の動的呼び出しでは、すべての importScripts() 呼び出し（Service Worker など）で本質的に同期的な処理であるため、Service Worker が install フェーズ。この制限により、ブラウザは Service Worker に必要なすべての JavaScript コードを暗黙的にキャッシュし、実装する必要があります。

最終的にこの制限は解除される可能性があり、動的 ES はモジュールインポート許可される場合があります。現時点では、必ず静的構文を使用できます。

他のワーカーについてはどうですか？

サポート「Dedicated」の ES モジュールワーカー new Worker('...', {type: 'module'}) で構築されています。より広範囲に及び、サポートされてきましたが、バージョン 80 以降の最新バージョンの Safari をインストールしてください。専用ワーカーでは、ES モジュールの静的インポートと動的インポートの両方がサポートされています。

Chrome と Edge は、共有ワーカーバージョン 83 以降、現時点で他のブラウザもサポートしています。

地図のインポートはサポート対象外

地図をインポートするとモジュール指定子を書き換えて、たとえば ES モジュールの読み込み元となる優先 CDN の URL。

Chrome と Edge バージョン 89 以降サポートしています。現在、サービスで使用できないできます。

ブラウザサポート

Service Worker の ES モジュールは、Chrome と Edge でバージョン 91。

Safari では、テクノロジープレビュー 122 リリースこの機能が安定版でリリースされます Safari の新しいバージョンです。

コード例

これは、ウェブアプリの window で共有 ES モジュールを使用する基本的な例です。同じ ES モジュールを使用する Service Worker も登録します。

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

下位互換性

上の例は、すべてのブラウザが Service Worker では、そうではありません。

組み込みサポートのないブラウザを使用する場合は、 Service Worker スクリプトを ES モジュール互換バンドラを使用して、すべてのモジュールコードがインラインで含まれ、古いブラウザです。あるいは、インポートしようとしているモジュールがすでにバンドルされています IIFE または UMD 形式である場合は、 importScripts()。

Service Worker の 2 つのバージョンが使用可能になったら、その他のモジュールについては、現在のインフラストラクチャを対応する Service Worker スクリプトを登録できます。最高の支援を検出するためのプラクティスは、現在流動的なものですが、ディスカッション GitHub の問題: おすすめします。

_Photo by Vlado Paunovic、Unsplash より