移除發生錯誤的服務工作者

有時部署發生錯誤的服務工作站會發生問題。舉例來說,系統可能會在註冊時剖析 Service Worker,並順利完成安裝。 但是,fetch 事件中的錯誤程式碼可能會導致系統無法回應要求,進而產生空白頁面。另一個可能的原因是網頁標記是積極快取,而服務工作站只會針對後續造訪的 Cache 例項傳回過時的標記回應。

服務工作人員可透過多種方式恢復運作,這在實際運作網站上會有可怕的問題。 即便如此,您也不會失去一切。你可以透過多種方式解決問題並恢復正常使用。

部署免人工管理 Service Worker

通常要處理發生錯誤的服務工作站,只需部署基本的 no-op Service 工作站,就能在沒有 fetch 事件處理常式的情況下,立即安裝並啟用該服務:

// sw.js

self.addEventListener('install', () => {
  // Skip over the "waiting" lifecycle state, to ensure that our
  // new service worker is activated immediately, even if there's
  // another tab open controlled by our older service worker code.
  self.skipWaiting();
});

self.addEventListener('activate', () => {
  // Optional: Get a list of all the current open windows/tabs under
  // our service worker's control, and force them to reload.
  // This can "unbreak" any open windows/tabs as soon as the new
  // service worker activates, rather than users having to manually reload.
  self.clients.matchAll({
    type: 'window'
  }).then(windowClients => {
    windowClients.forEach((windowClient) => {
      windowClient.navigate(windowClient.url);
    });
  });
});

這個 Service Worker 會透過在 install 事件呼叫 self.skipWaiting(),立即安裝並啟用。如有需要,您也可以在 activate 事件中部署其他程式碼,以強制重新載入任何其他開啟的分頁,其中含有服務工作站控制的 WindowClient

免人工管理 Service Worker 未包含 fetch 事件處理常式非常重要,當 Service Worker 未處理要求時,這些要求會視為並不存在 Service Worker,會傳遞到瀏覽器。部署免人工管理 Service Worker 後,即可修正錯誤服務工作站,並在之後以更新的形式部署。

該做法部分原因在於瀏覽器已加強把 Service Worker 放在 HTTP 快取中,而且會對 Service Worker 內容執行位元組對位元組檢查,藉此更新作業。這些預設值可讓您為錯誤的服務工作站部署免人工管理取代項目,以便快速修正問題。

應採取的其他措施

部署免人工管理的 Service Worker 應足以中和錯誤的服務工作人員,但如有必要,也可採取其他措施。

如果您不知道舊 Service Worker 的網址,該怎麼辦?

先前安裝的 Service Worker 網址有時會不明。原因可能是檔案已建立版本 (例如檔案名稱中包含雜湊)。在這種情況下,部署免人工管理的 Service Worker 可能會與每個可能註冊的舊 Service Worker 網址相符,因此相當困難。 這是符合最佳做法的行為,因為開發人員可能不會記得每個已部署服務工作站版本的所有雜湊。

幸好,系統會傳送實用的 HTTP 要求標頭,並搭配以下 Service Worker 指令碼的要求:Service-Worker。在網路伺服器上,查看這個標頭,並攔截改為提供免人工管理 Service Worker 的要求。 要完成這項步驟需視使用的網路伺服器和後端堆疊而定,因此請參閱相關語言的說明文件,瞭解操作方法。

日後進行 Service Worker 部署作業時,請保留未版本化的資產名稱 (例如 sw.js)。這之後會大幅簡化後續作業。

設定 Clear-Site-Data 標頭

如果將 Clear-Site-Data 回應標頭的值設為 'storage',部分瀏覽器會取消註冊來源的所有 Service Worker。不過,使用這種做法時,需要注意下列幾點:

  • 提醒您,這會清除相關來源的「所有」儲存空間。包括 localStorage、IndexedDB、sessionStorage 和其他儲存空間 (但不包含來源的 HTTP 快取)。
  • 部分瀏覽器不支援這個標頭

這個標頭的支援情況並非完全支援,因此無法僅仰賴這項功能來修正問題。 因此,除了部署免人工管理 Service Worker 外,最好將 Clear-Site-Data 視為評估方式。

損壞並非永久性

使用者體驗或服務人員 (尤其是知名網站規模較大) 幹擾使用者體驗時,可能會令人感到可怕,但傷害只是暫時性的,而且可以復原!

如果必須部署免人工管理服務 Worker 來解決問題,請在事後花一些時間找出確切問題。日後,請確保服務工作處理程序只處理預期預期的要求。 在測試中頻繁測試,並只在有信心時部署更新。