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

デフォルトでより鮮度の高い Service Worker

Jeff Posnick

要約

Chrome 68 以降では、Service Worker スクリプトの更新を確認する HTTP リクエストは HTTP キャッシュによって処理されなくなるできます。これにより、デベロッパーが抱える共通の課題を回避できます。 Service Worker スクリプトに誤って Cache-Control ヘッダーを設定すると、更新の遅れが生じます

/service-worker.js スクリプトの配信によって HTTP キャッシュをすでにオプトアウトしている場合 Cache-Control: max-age=0 を使用している場合、新しいデフォルトによる変更はありません。確認します。

また、Chrome 78 以降では、バイト単位の比較が Service Worker に読み込まれたスクリプトに適用される importScripts()。インポートしたスクリプトに変更を加えると、 Service Worker のアップデートフロー最上位の Service Worker に対する変更と同様です。

背景

Service Worker のスコープ内にある新しいページに移動するたびに、registration.update() を明示的に呼び出します Service Worker の「ウェイクアップ」時にブラウザは push イベントまたは sync イベント経由これと並行して、 navigator.serviceWorker.register() 呼び出しを実行して、Service Worker スクリプトの更新を確認します。

この記事では、その URL が /service-worker.js であり、 importScripts() への 1 回の呼び出しが含まれている。これにより、Service Worker 内で実行される追加のコードが読み込まれます。

// Inside our /service-worker.js file:
importScripts('path/to/import.js');

// Other top-level code goes here.

変更内容

Chrome 68 より前のバージョンでは、/service-worker.js の更新リクエストは HTTP キャッシュ経由で行われていました。（ほとんどの取得がそうです）。つまり、スクリプトが最初に Cache-Control: max-age=600 で送信された場合、次の 600 秒（10 分）以内の更新はネットワークに送信されないため、最新バージョンの Service Worker を受け取れない可能性があります。ただし、max-age が 86,400（24 時間）を超える場合は、ユーザーが操作不能にならないように、86, 400 のように扱われます。永続的に保持できます

68 以降では、Service Worker に更新をリクエストする際に HTTP キャッシュが無視される変更されるため、既存のウェブアプリケーションでは、ウェブアプリケーションに対するリクエストの頻度が Service Worker スクリプト。importScripts のリクエストは、引き続き HTTP キャッシュ経由で送信されます。しかし、これはデフォルトのみです。新しい登録オプション updateViaCache を使用すると、できます。

updateViaCache

デベロッパーは、navigator.serviceWorker.register() を呼び出すときに新しいオプション updateViaCache パラメータを渡すことができるようになりました。 'imports'、'all'、'none' の 3 つの値のいずれかを取ります。

この値により、ブラウザの標準の HTTP キャッシュが有効かどうか、またどのように保存されるかが決まります。これは、HTTP リクエストを実行して Service Worker リソースの更新を確認する際に関与します。

'imports' に設定すると、HTTP キャッシュは、 /service-worker.js スクリプト（ただし、インポートされたスクリプトを取得する際に参照されます）（この例では path/to/import.js）。これがデフォルトであり、。
'all' に設定すると、両方のリクエストを作成するときに HTTP キャッシュが参照されます。最上位の /service-worker.js スクリプトと、サービス内にインポートされたすべてのスクリプトワーカー（path/to/import.js など）。このオプションは、Chrome の以前の動作に対応しています。 Chrome 68 より前のバージョンです。
'none' に設定すると、どちらかのリクエスト時に HTTP キャッシュは参照されません。最上位の /service-worker.js またはインポートされたスクリプト（仮の path/to/import.js。

たとえば、次のコードは、Service Worker を登録して、HTTP キャッシュが /service-worker.js スクリプトの更新を確認する際、または /service-worker.js 内の importScripts() を介して参照されるスクリプト:

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js', {
    updateViaCache: 'none',
    // Optionally, set 'scope' here, if needed.
  });
}

インポートしたスクリプトの更新を確認する

Chrome 78 より前のバージョンでは、 importScripts() 一度だけ取得されます（最初に HTTP キャッシュに対してチェックするか、（updateViaCache 構成によって異なります）。そのイニシャルの後ブラウザによって内部的に保存され、再取得されることはありません。

すでにインストールされている Service Worker に強制的に変更をインポートされたスクリプトがスクリプトの URL を変更するというものでした。通常は semver 値（例: importScripts('https://example.com/v1.1.0/index.js') など）のハッシュを含めるか、コンテンツ（例: importScripts('https://example.com/index.abcd1234.js')）。インポートした URL の変更による副作用として、トップレベルの Service Worker が変更されると、 Service Worker の更新フローをご覧ください。

Chrome 78 以降では、最上位レベルのアップデートチェックが実行されるたびに、同時にチェックが行われ、インポートされたスクリプトの内容が変更されていないか確認できます。影響 Cache-Control ヘッダーが使用されている場合、これらのインポートされたスクリプトチェックは updateViaCache が 'all' または 'imports' に設定されている場合の HTTP キャッシュ（チェックがネットワークに対して直接実行される場合もありますが、 updateViaCache は 'none' に設定されています。

インポートしたスクリプトの更新チェックでバイト単位の差異が発生した場合 Service Worker によって以前に格納されたものと比較し、更新フローをトリガーすれば、トップレベルの Service Worker がワーカーファイルは変わりません

Chrome 78 の動作は Firefox がimplementedしたものと一致数年前の Firefox 56 です。Safari には、この動作がすでに実装されているため、あります

デベロッパーは何をする必要がありますか？

/service-worker.js スクリプトを提供して HTTP キャッシュを効果的にオプトアウトしている場合 Cache-Control: max-age=0（または同様の値）を使用した場合、変更することもできます。

HTTP キャッシュを有効にして /service-worker.js スクリプトを提供する場合、ホスティング環境のデフォルトであるためです。 /service-worker.js に対する HTTP リクエストが増加する可能性があります。リクエストとは、以前は HTTP キャッシュで処理されていたリクエストです。目標 Cache-Control ヘッダー値が広告の鮮度に影響を与えることを許可する /service-worker.js の場合は、次の場合に明示的に updateViaCache: 'all' の設定を開始する必要があります Service Worker の登録も行います

古いバージョンのブラウザを使用しているユーザーが多数いる可能性があることを踏まえると、ただし、Service Worker スクリプトで Cache-Control: max-age=0 HTTP ヘッダーの設定が継続される新しいブラウザでは無視される可能性があります。

デベロッパーはこの機会を利用して、インポートされたコンテンツを明示的にオプトインするかどうかを決定できます。スクリプトを HTTP キャッシュから取り出し、updateViaCache: 'none' を Service Worker に追加登録してください。

インポートしたスクリプトの提供

Chrome 78 以降、 importScripts() を介して読み込まれたリソース。これらは次の目的でチェックされるためあります。

このような追加の HTTP トラフィックが発生しないようにするには、long-lived を semver またはハッシュを含むスクリプトを提供する場合の Cache-Control ヘッダーまた、'imports' のデフォルトの updateViaCache 動作が適用されます。

または、インポートしたスクリプトを頻繁にチェックする場合 Cache-Control: max-age=0 を指定して配信するか、 updateViaCache: 'none' を使用します。