web-dev-qa-db-ja.com

イベントハンドラーの外部のServiceWorkerのコードはいつ実行されますか？

（私はリッチハリスが「 サービスワーカーについてもっと早く知っていればよかったのに 」の要点で尋ねた質問を言い換えています。）

イベントハンドラーの外部で実行されるコードがServiceWorkerにある場合、いつ実行されますか？

そして、それに密接に関連して、installハンドラーの内部に配置することと、イベントハンドラーの外部に完全に配置することの違いは何ですか？

service-worker
30
Jeff Posnick

一般に、サービスワーカーのグローバルスコープの「トップレベル」にあるイベントハンドラーの外部にあるコードは、サービスワーカースレッド（/プロセス）が起動されるたびに実行されます。 Service Workerスレッドは任意の時間に開始（および停止）する可能性があり、制御するWebページの存続期間とは関係ありません。

（Service Workerスレッドを頻繁に開始/停止することは、パフォーマンス/バッテリーの最適化であり、たとえば、Service Workerを登録したページを参照したからといって、バックグラウンドで余分なアイドルスレッドが回転することはありません。 ）

その反面、Service Workerスレッドが停止するたびに、既存のグローバル状態がすべて破棄されます。したがって、複数のイベント間で共有することを期待して、開いているIndexedDB接続をグローバル状態で保存するなど、特定の最適化を行うことができますが、イベントハンドラーの呼び出しの間にスレッドが強制終了された場合は、それらを再初期化する準備が必要です。

この質問に密接に関連しているのは、installイベントハンドラーについて私が見た誤解です。一部の開発者は、installハンドラーを使用してグローバル状態を初期化し、それをfetchなどの他のイベントハンドラーで依存するのを見てきました。これは危険であり、本番環境でバグが発生する可能性があります。 installハンドラーは、Service Workerのバージョンごとに1回起動し、通常、そのバージョンで必要な新しいリソースや更新されたリソースのキャッシュなど、ServiceWorkerのバージョン管理に関連付けられているタスクに最適です。 installハンドラーが正常に完了すると、特定のバージョンのService Workerが「インストール済み」と見なされ、ServiceWorkerが処理を開始したときにinstallハンドラーが再度トリガーされることはありません。たとえば、fetchまたはmessageイベント。

したがって、fetchイベントなど、処理する前に初期化する必要のあるグローバル状態がある場合は、最上位のService Workerグローバルスコープでそれを行うことができます（オプションで、内部で解決するという約束を待つ） fetchイベントハンドラー。非同期操作が完了したことを確認します）。実行notinstallハンドラーに依存してグローバルスコープを設定してください！

これらのポイントのいくつかを説明する例を次に示します。

// Assume this code lives in service-worker.js

// This is top-level code, outside of an event handler.
// You can use it to manage global state.

// _db will cache an open IndexedDB connection.
let _db;
const dbPromise = () => {
  if (_db) {
    return Promise.resolve(_db);
  }

  // Assume we're using some Promise-friendly IndexedDB wrapper.
  // E.g., https://www.npmjs.com/package/idb
  return idb.open('my-db', 1, upgradeDB => {
    return upgradeDB.createObjectStore('key-val');
  }).then(db => {
    _db = db;
    return db;
  });
};

self.addEventListener('install', event => {
  // `install` is fired once per version of service-worker.js.
  // Do **not** use it to manage global state!
  // You can use it to, e.g., cache resources using the Cache Storage API.
});

self.addEventListener('fetch', event => {
  event.respondWith(
    // Wait on dbPromise to resolve. If _db is already set, because the
    // service worker hasn't been killed in between event handlers, the promise
    // will resolve right away and the open connection will be reused.
    // Otherwise, if the global state was reset, then a new IndexedDB
    // connection will be opened.
    dbPromise().then(db => {
      // Do something with IndexedDB, and eventually return a `Response`.
    });
  );
});
53
Jeff Posnick