Chrome 71 版即將對 cache.addAll() 和 importScripts() 做出調整

開發人員若使用服務 WorkerCache Storage API,應留意 Chrome 71 版的小幅異動這兩項變更都讓 Chrome 的實作方式更加熟悉 規格和其他瀏覽器。

不允許非同步 importScripts()

importScripts()敬上 告訴主要 Service Worker 指令碼,暫停目前的執行作業、從 某個特定網址,並在目前的全域範圍中將其執行,直到完成為止。完成後 由主 Service Worker 指令碼繼續執行。importScripts()可派上用場的時機 您想要基於組織理由將主要 Service Worker 指令碼細分為較小的片段,或 導入第三方程式碼,以便為 Service Worker 新增功能。

瀏覽器會嘗試緩解「下載及執行部分同步程序」可能產生的效能問題 程式碼」自動快取透過 importScripts() 提取的任何項目,也就是在 執行匯入的程式碼時,執行匯入的程式碼會很少。

但是,如果要讓這項功能順利運作,瀏覽器就必須知道不會發生任何「意外」程式碼匯入完成 初始化為 Service Worker 安裝。 根據服務工作站規格, 呼叫 importScripts() 只有在執行頂層的同步執行期間才有作用 Service Worker 指令碼,或視需要在 install 處理常式內,以非同步方式執行。

在 Chrome 71 以下版本中,在 install 處理常式外以非同步方式呼叫 importScripts() 會 這些研究有助於我們找出 能引導後續作業的標準自 Chrome 71 起,這類呼叫 擲回執行階段例外狀況 (除非先前已在 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() 的重複網址

如果您在 Service Worker 中使用 Cache Storage API, Chrome 71 會配合相關規格。使用相同的網址 並多次傳遞至單一呼叫, cache.addAll()、 表示呼叫傳回的承諾會遭到拒絕。

在 Chrome 71 以下版本中,系統並未偵測到上述版本,並會忽略重複的網址。

Chrome 控制台警告訊息的螢幕截圖
從 Chrome 71 版開始,您會在控制台記錄一則警告訊息。

Chrome 72 會因應這項機制,重複提供網址的警告,而非只記錄警告, 導致cache.addAll()拒絕。如果您在承諾鏈中呼叫 cache.addAll() 已傳遞至 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() 的實際網址, 而是兩個具有不同網址 (例如 '/''/index.html') 的兩個對等回應 使用者不會觸發拒絕動作

廣泛測試 Service Worker 實作項目

Service Worker 會廣泛導入 在所有主要「長期放送」策略中瀏覽器 這個點。如果您會定期在多種瀏覽器中測試漸進式網頁應用程式,或 您可能已經偵測到大量未使用 Chrome 的使用者 並更新程式碼但現在您還沒注意到 我們要先指出變更,再切換 Chrome 的行為。