Angular 注銷后 Service Worker 卡在 Safari

Question

我們有一個用 Angular 14 開發的 WebApp。它部署在 Azure Blob 存儲（靜態網站）上。 身份驗證是使用 javascript 的msal 庫完成的。 Azure AD B2C 用作身份提供者。

當我們注銷時，我們調用msalService.logoutRedirect()它適用於所有設備，但使用 Safari 瀏覽器的 iPhone 除外。 在 iPhone/Safari 上它有時會卡住（主要是當我們先將手機鎖定幾分鍾時）。 Safari 然后顯示一個“neverending”.network 請求——但我確信實際問題出在 service worker 中的一些代碼，因為 Safari 被完全凍結，你甚至無法在控制台中輸入任何內容。

我們正在使用Angular Service Worker來提供 PWA，如果我們在沒有 Service Workers 的情況下提供應用程序，一切都可以正常工作。

我試着查看ngsw/state （通常有效），但一旦出現錯誤，就無法訪問該站點（我假設是因為 Safari 被卡住了）。

對我來說，這看起來像是 service worker 代碼卡在了某個循環中（控制台中沒有顯示任何錯誤）。 當我然后手動嘗試重新加載頁面時，我們在控制台中收到以下錯誤： .

我怎樣才能找出導致問題的原因？ 我嘗試調試ngsw-worker.js文件，但它幾乎有 2k 行，所以並不容易。 有沒有更簡單的調試方法？

更新：這是ngsw-config.json樣子：

{
  "$schema": "./node_modules/@angular/service-worker/config/schema.json",
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": [
          "/favicon.ico",
          "/index.html",
          "/manifest.webmanifest",
          "/*.css",
          "/*.js"
        ]
      }
    }, {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/assets/**",
          "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
        ]
      }
    }
  ]
}

我們正在使用谷歌字體並從fonts.googleapis.com獲取它。 當我們注銷並且錯誤發生時，瀏覽器顯示它試圖加載谷歌 fonts - 它被卡在那里。 是否有可能它以某種方式認為 google-fonts 文件應該在緩存中並嘗試獲取它但由於它不存在，它會無休止地加載？

更新：我發現一個論壇帖子聽起來與我們遇到的問題非常相似，不幸的是，他們似乎從未找到解決方案： apple forum

Answer 1

您可以嘗試克隆 msal 庫並將導航客戶端中的代碼更改為始終使用替換而不是分配。 值得一試，因為它在我使用的 React oidc 庫中幫助了我。