Angular PWA не работает, если переключиться на OFFLINE и нажать Refresh (F5)

Question

Я использую angular для создания приложения PWA.

• Угловой : 12

Что происходит:

• Я перехожу в свое приложение (онлайн-режим) -> Веб-приложение может отображаться правильно
• Включите консоль разработчика и измените подключение на ОФЛАЙН.
• Нажмите 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. В моей папке есть один файл.

Тем не менее 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": [
    {
        "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.

В заключение, теперь я должен найти обходной путь, скопировав файл с кешированными URL-адресами в assetGroups, после создания приложения я копирую это ngsw.json к dist папка.