угловое приложение с сервис-воркером (pwa) не работает должным образом

Question

Работая с офлайн-angular с сервис-воркерами, получите ссылку на https://angular.io/guide/service-worker-config

Приложение работает нормально в автономном режиме, единственная проблема связана с механизмом обновления кеша, если я использую "installMode": "prefetch"приложение отлично работает в автономном режиме, но файлы в кеше никогда не обновляются при обновлении файлов на сервере. Если я использую "installMode": приложение "lazy" не работает в автономном режиме.

ниже 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",
          "/*.css",
          "/*.js",
          "/*.manifest",
           "/assets/**"
        ]
      }
    } 
  ]
}

также пробовал updateMode но файлы кеша не обновляются при изменениях

  "installMode": "prefetch",
  "updateMode": "prefetch",

Answer 1

С помощью lazy за index.htmlи другие небольшие файлы обычно не нужны, так как эти файлы очень легкие. Я бы рекомендовал разделить активы и другие тяжелые файлы в отдельную группу в файле конфигурации сервис-воркера и использоватьlazy только для них:

  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": [
          "/favicon.ico",
          "/index.html",
          "/*.css",
          "/*.js"
        ]
      }
    },
    {
      "name": "app2",
      "installMode": "lazy",
      "resources": {
        "files": [
           "/assets/**"
        ]
      }
    }
  ]
}

Тогда посмотрите на distпапка после сборки приложения. В нем будет файл конфигурации сервис-воркера, созданный на основе правил, которые вы написали вngsw-config.json(он будет содержать список всех кешированных файлов с хеш-ключами). Попробуйте исключить этот файл из кеша, добавив в начале пометку объяснения:

  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": [
          "!/some-file-not-to-cache.js"
        ]
      }
    },