Service Worker と Cache Storage API を使用するデベロッパーは、次の 2 つに注意する必要があります。 Chrome 71 で細かな変更を行いますどちらの変更でも、Chrome の実装は 仕様やその他のブラウザを使用していることを確認します。
非同期 importScripts() を許可しない
importScripts()
現在の実行を一時停止し、そこから追加のコードをダウンロードするようにメインの Service Worker スクリプトに指示します
現在のグローバル スコープで完了するまで実行します。それが完了したら、
メインの Service Worker スクリプトが実行を再開します。importScripts() は、
組織上の理由から、メインの Service Worker スクリプトを小さく分割する必要がある。
サードパーティのコードを pull して Service Worker に機能を追加します。
ブラウザは、「ダウンロードと同期の実行時に発生する可能性のある、パフォーマンス上の問題を軽減しようとします」
コードを使用する」importScripts() を介して pull されたすべてのものを自動的にキャッシュに保存することで、
初回ダウンロードでは、インポートしたコードの実行に伴うオーバーヘッドはほとんどありません。
ただし、これを行うには、ブラウザが「驚き」がないことを認識している必要があります。インポートされたコード
Service Worker に自動的に移行
インストールできます。
Service Worker の仕様に従って、
importScripts() の呼び出しは、トップレベルの
Service Worker スクリプトを実行するか、必要に応じて install ハンドラ内で非同期に実行します。
Chrome 71 より前では、install ハンドラの外部で非同期に importScripts() を呼び出すと、
説明します。Chrome 71 以降、これらの呼び出しは
ランタイム例外をスローする（以前に同じ URL が install ハンドラにインポートされている場合を除く）。
他のブラウザの動作と一致することを確認します。
次のようなコードではなく、
// This only works in Chrome 70 and below.
self.addEventListener('fetch', event => {
importScripts('my-fetch-logic.js');
event.respondWith(self.customFetchLogic(event));
});
Service Worker コードは次のようになります。
// Move the importScripts() to the top-level scope.
// (Alternatively, import the same URL in the install handler.)
importScripts('my-fetch-logic.js');
self.addEventListener('fetch', event => {
event.respondWith(self.customFetchLogic(event));
});
cache.addAll() に渡される繰り返し URL のサポート終了
Cache Storage API を Service Worker と併用している場合、
関連する仕様に合わせた Chrome 71同じ URL が
1 回の呼び出しに複数回渡され、
cache.addAll()、
仕様には、呼び出しによって返される Promise を拒否するよう指定されています。
Chrome 71 より前ではこの URL は検出されず、重複する URL は実質的に無視されていました。
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">このロギングは Chrome 72 の前半で、単なる警告ではなく重複する URL で
cache.addAll() は拒否されます。cache.addAll() を Promise チェーンの一部として呼び出す場合
渡される
InstallEvent.waitUntil(),
拒否された場合、Service Worker のインストールに失敗する可能性があります。
次のような問題が発生する可能性があります。
const urlsToCache = [
'/index.html',
'/main.css',
'/app.js',
'/index.html', // Oops! This is listed twice and should be removed.
];
self.addEventListener('install', event => {
event.waitUntil(
caches.open('my-cache').then(cache => cache.addAll(urlsToCache))
);
});
この制限は、cache.addAll() に渡され、何を
URL が異なる 2 つの同等のレスポンス（'/' と '/index.html' など）が返された場合、
不承認とならないようにしましょう
Service Worker の実装を幅広くテストする
Service Worker は幅広く実装 主要な「エバーグリーン」ブラウザ 見てみましょう複数のブラウザでプログレッシブ ウェブアプリを定期的にテストする場合や、 Chrome を使用していないユーザーがかなり多くいる場合、 コードを更新しましたお気づきでないかもしれませんが 他のブラウザでの動作については、Chrome の動作を切り替える前に変更点についてお知らせしたいと考えました。