# 觀察到的現象

部署 SSR 伺服器，瀏覽器端發起請求，請求10次，發現只有第一次請求被 SSR 伺服器處理了。其他 9 次請求沒有落到 SSR 伺服器上。

# 結論

第一個頁面訪問是由源站（SSR/CDN）渲染的。

然後 - 由於 PWA 功能（或者更準確地說：Service Worker），所有主要 assets（如 shell index.html、javascript 檔案等）都由瀏覽器中的 Service Worker 快取。

因此，對於後續頁面訪問（重新整理），請求被瀏覽器中的 Service Worker 攔截並立即返回，而無需離開瀏覽器。

這就是為什麼我們在隨後的 9 個頁面訪問中看不到任何流量的原因。

Service Workers 非常適合提升 Web 應用的使用者體驗，因為它使得頁面載入速度更快。但是對於開發人員來說，Service Worker 有時給開發人員的除錯帶來了麻煩。

有時我們可能需要手動 uninstall 在第一個頁面訪問期間 `install` 的 Service Worker。

例如當我們在重新載入頁面時故意想要訪問原始伺服器（SSR）時。

以下是從站點解除安裝 Service Worker 的方法：
開啟 Chrome 開發工具 -> 頂部選項卡 [應用程式] -> 左側選單 [儲存] -> 在右側皮膚中單擊按鈕 [清除站點資料]
順便提一句。 在單擊 [清除站點資料] 之前，請確保選中下面的核取方塊：

![](https://img-blog.csdnimg.cn/img_convert/31297162f7e33c59bae9d3bc36551a32.png)

另一個選項是在瀏覽器中[禁用 Javascript](https://developer.chrome.com/docs/devtools/javascript/disable/).

這樣就不會發生 CSR，也不會發生 Service Worker 註冊。

然後重新整理頁面後，總是會命中 SSR 伺服器。

ngsw-worker.js 是 Angular Service Worker 的核心檔案，用於實現離線快取、預快取、動態更新和推送通知等功能。

具體來說，ngsw-worker.js 主要有以下功能：

離線快取：使用 CacheStorage API 將應用程式資源快取到客戶端，當應用程式處於離線狀態時，可以從快取中載入資源，以實現離線訪問。

預快取：在應用程式第一次載入時，將應用程式所需的所有資源快取到客戶端，以提高應用程式的效能和速度。

動態更新：在後臺更新應用程式時，使用 ServiceWorkerRegistration.update() 方法獲取更新的資源，並將它們快取到客戶端。當使用者重新訪問應用程式時，將使用更新的資源替換舊的資源。

推送通知：使用 Push API 和 Notification API 向客戶端傳送推送通知。

透過使用 ngsw-worker.js，可以將 Angular 應用程式轉換為漸進式 Web 應用程式（PWA），從而提高應用程式的效能、速度和可用性。當使用者第一次訪問應用程式時，瀏覽器會下載和快取 ngsw-worker.js 檔案，並在後續的訪問中使用快取資料來提高效能和速度。

Angular SSR 和 PWA 結合起來使用的一些現象觀察

相關文章