ServiceWorkerGlobalScope: activate イベント

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2018.

安全なコンテキスト用: この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。

メモ: この機能はサービスワーカー内でのみ利用可能です。

activate は ServiceWorkerGlobalScope インターフェイスのイベントで、ServiceWorkerRegistration が新しいアクティブワーカー（ServiceWorkerRegistration.active worker）を取得すると発生します。

このイベントはキャンセル不可で、バブリングしません。

構文

このイベント名を addEventListener() などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。

js
addEventListener("activate", (event) => {});

onactivate = (event) => {};

イベント型

ExtendableEvent です。 Event を継承しています。

Event ExtendableEvent

イベントプロパティ

固有のプロパティは実装していませんが、親である Event からプロパティを継承しています。

例

次のスニペットは、activate イベントハンドラーを使用してキャッシュをアップグレードする方法を示しています。

js
self.addEventListener("activate", (event) => {
  const cacheAllowlist = ["v2"];

  event.waitUntil(
    caches.forEach((cache, cacheName) => {
      if (!cacheAllowlist.includes(cacheName)) {
        return caches.delete(cacheName);
      }
    }),
  );
});

次のように onactivate プロパティを使用してイベントハンドラーを設定することもできます。

js
self.onactivate = (event) => {
  // ...
};

仕様書

Specification
Service Workers
# service-worker-global-scope-activate-event
Service Workers
# dom-serviceworkerglobalscope-onactivate

ブラウザーの互換性

BCD tables only load in the browser

関連情報