拡張機能 Service Worker の基本

拡張機能 Service Worker のインストールと更新は、ウェブサービス Worker とは異なります。このページでは、その違いについて説明します。

Service Worker を登録する

拡張機能の Service Worker を登録するには、manifest.json ファイルの "background" フィールドに指定します。単一の JavaScript ファイルを指定する "service_worker" キーを使用します。ウェブページまたはウェブアプリの Service Worker は、まず navigator で serviceWorker を特徴検出して、特徴検出内で register() を呼び出すことで、Service Worker を登録します。拡張機能には対応していません。

{
  "name": "Awesome Test Extension",
  ...
  "background": {
    "service_worker": "service-worker.js"
  },
  ...
}

スクリプトをインポートする

スクリプトをサービス ワーカーにインポートする方法は、import ステートメントと importScripts() メソッドの 2 つがあります。ダイナミック インポートと呼ばれる import() はサポートされていません。

import ステートメントを使用するには、マニフェストに "type" フィールドを追加し、"module" を指定します。次に例を示します。

  "background": {
    "service_worker": "service-worker.js",
    "type": "module"
  }

その後、通常どおり import を使用します。インポート アサーションはサポートされていません。

import { tldLocales } from './locales.js';

ウェブサービス ワーカーで使用するのと同様の方法で importScripts() を使用します。

importScripts('locales.js');

更新

サービス ワーカーを更新するには、拡張機能の新しいバージョンを公開して Chrome ウェブストアに登録します。サーバーから拡張機能を読み込んでも、この制限を回避することはできません。セキュリティ上の理由から、Manifest V3 ではリモートでホストされるコードはサポートされていません。サービス ワーカーは拡張機能パッケージの一部である必要があります。