有時部署發生錯誤的服務工作站會發生問題。舉例來說,系統可能會在註冊時剖析 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 來解決問題,請在事後花一些時間找出確切問題。日後,請確保服務工作處理程序只處理預期預期的要求。 在測試中頻繁測試,並只在有信心時部署更新。