Angular PWA 在更改為 OFFLINE 並按 Refresh (F5) 時不起作用

Question

我正在使用 angular 制作 PWA 應用程序。

• Angular ：12

發生了什么是：

• 我 go 到我的應用程序（在線模式）-> web 應用程序可以正常顯示
• 打開開發者控制台並將連接更改為離線
• 按 F5 重新加載應用程序

怎么了：

• 下圖是我點擊重新加載時屏幕上顯示的內容：

這是我的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.json",
          "/*.css",
          "/*.js"
        ]
      }
    },
    {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/assets/**",
          "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
        ]
      }
    }
  ]
}

• manifest.json

{
  "name": "ng-main",
  "short_name": "ng-main",
  "theme_color": "#1976d2",
  "background_color": "#fafafa",
  "display": "standalone",
  "scope": "./",
  "start_url": "./",
  "icons": [
    {
      "src": "assets/icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "assets/icons/icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "assets/icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "assets/icons/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "assets/icons/icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "assets/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "assets/icons/icon-384x384.png",
      "sizes": "384x384",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "assets/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable any"
    }
  ]
}

Answer 1

在花了幾個小時尋找解決方案后，我注意到當我使用ng build --configuration production構建我的應用程序時。 我的dist文件夾中有一個ngsw.json文件。

但是，生成的ngsw.json文件中的urls和patterns都是空的，如下所示：

"assetGroups": [
    {
        "name": "app",
        "installMode": "prefetch",
        "updateMode": "prefetch",
        "cacheQueryOptions": {
            "ignoreVary": true
        },
        "urls": [],
        "patterns": []
    },
    {
        "name": "assets",
        "installMode": "lazy",
        "updateMode": "prefetch",
        "cacheQueryOptions": {
            "ignoreVary": true
        },
        "urls": [],
        "patterns": []
    }
]

當我將 url 添加到assetGroups中緩存並再次嘗試時，應用程序運行順利。 （請看下面的內容）

"assetGroups": [
    {
        "name": "app",
        "installMode": "prefetch",
        "updateMode": "prefetch",
        "cacheQueryOptions": {
            "ignoreVary": true
        },
        "urls": [
            "/login",
            "/dashboard"
        ],
        "patterns": [
            "/*.css",
            "/*.js"
        ]
    },
    {
        "name": "assets",
        "installMode": "lazy",
        "updateMode": "prefetch",
        "cacheQueryOptions": {
            "ignoreVary": true
        },
        "urls": [
            "/favicon.ico",
            "/index.html",
            "/manifest.webmanifest",
            "/ngsw.json"
        ],
        "patterns": []
    }
]

我已經向 Angular 團隊報告了這個問題，並且它已被確認為Angular 12 中的一個錯誤。

總之，現在，我必須通過將ngsw.json文件與assetGroups 中的緩存網址復制來解決問題，在構建應用程序后，我將assetGroups ngsw.json到dist文件夾。