Angular 5 и Service Worker: как исключить определенный путь из ngsw-config.json

Question

Я имею ngsw-config.json (взято из документов):

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

На моем сайте есть ссылка на RSS канал /api/rss, который должен открываться в новой вкладке браузера без загрузки приложения Angular. Как я могу исключить его из списка ресурсов, чей запрос перенаправлен на index.html?

UPD: я пытался, но не работает следующий конфиг (см. !/api/rss):

{
  "index": "/index.html",
  "assetGroups": [{
    "name": "app",
    "installMode": "prefetch",
    "patterns": ["!/api/rss"],
    "resources": {
      "files": [
        "/favicon.ico",
        "/index.html",
        "!/api/rss"
      ],
      "versionedFiles": [
        "/*.bundle.css",
        "/*.bundle.js",
        "/*.chunk.js"
      ]
    }
  }, {
    "name": "assets",
    "installMode": "lazy",
    "updateMode": "prefetch",
    "resources": {
      "files": [
        "/assets/**"
      ]
    }
  }]
}

Answer 1

Благодаря совету Педро Арантеса, я достиг следующего рабочего конфига (см. dataGroups а также "maxAge": "0u"):

{
  "index": "/index.html",
  "dataGroups":
  [
    {
      "name": "api",
      "urls": ["/api"],
      "cacheConfig": {
        "maxSize": 0,
        "maxAge": "0u",
        "strategy": "freshness"
      }
    }
  ],
  "assetGroups":
  [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": [
          "/favicon.ico",
          "/index.html"
        ],
        "versionedFiles": [
          "/*.bundle.css",
          "/*.bundle.js",
          "/*.chunk.js"
        ]
      }
    },
    {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/assets/**"
        ]
      }
    }
  ]
}

Answer 2

Вы уже пытались создать группы данных? dataGroups используются для запроса данных, таких как assetGroups к активам (которые являются файлами).

Группы данных

В отличие от ресурсов ресурсов, запросы данных не версионируются вместе с приложением. Они кэшируются в соответствии с настроенными вручную политиками, которые более полезны для таких ситуаций, как запросы API и другие зависимости данных.

Интерфейс группы данных:

export interface DataGroup {
  name: string;
  urls: string[];
  version?: number;
  cacheConfig: {
    maxSize: number;
    maxAge: string;
    timeout?: string;
    strategy?: 'freshness' | 'performance';
  };
}

Вы можете создать группу данных, которая исключает /api/rss (если "!/api/rss" не работает, вы можете добавить все остальные API в urls": ["/api/user", "/api/admin"]:

{
  "index": "/index.html",
  "assetGroups": [{
    "name": "assetGroup1",
    ...
  }, {
    "name": "assetGroup1",
    ...
  }],
  "dataGroups": [{
    "name": "dataGroup1";
    "urls": ["!/api/rss"];
    cacheConfig: {
      maxSize: 50;
      maxAge: "3d12h";
    }
  }, {
    "name": "dataGroup2";
    "urls": ["/api/user"];
    cacheConfig: {
      maxSize: 40;
      maxAge: "3d12h";
    }
  }]
}

Answer 3

Теперь это стало проще, вы можете обходить URL-адреса от рабочих служб angular с помощью ngsw-bypass. Из документов:

Чтобы обойти сервис-воркер, вы можете установить ngsw-bypass как заголовок запроса или как параметр запроса. (Значение заголовка или параметра запроса игнорируется и может быть пустым или опущенным.)

Я использую строку запроса для обхода определенного URL-адреса от работника службы следующим образом:

https://mydomain.report-uri.com/r/d/csp/enforce?ngsw-bypass=true

Answer 4

Правильный способ сделать это - исключить конечные точки из перенаправления индекса. Итак, ваш ngsw-config.json должен выглядеть так с добавленнымnavigationUrlsи отрицание части URL, которую вы хотите пропустить. Таким образом, URL-адрес будет просто перенаправлен и полностью обойдёт ngSW.

    {
      "index": "/index.html",
      "assetGroups": [{
        "name": "app",
        "installMode": "prefetch",
        "resources": {
          "files": [
            "/favicon.ico",
            "/index.html"
          ],
          "versionedFiles": [
            "/*.bundle.css",
            "/*.bundle.js",
            "/*.chunk.js"
          ]
        }
      }, {
        "name": "assets",
        "installMode": "lazy",
        "updateMode": "prefetch",
        "resources": {
          "files": [
            "/assets/**"
          ]
        }
      }],
      "navigationUrls": [
        "!/api/rss"
      ]
    }

Обратите внимание, что !/api/rssконкретно. Если вы хотите опустить весьapi использование папки !/api/** вместо.

Документация здесь https://angular.io/guide/service-worker-config

Обратите внимание, что отрицание (!) НЕ работает под "resources": "urls": согласно документам.

Answer 5

ngsw-configuration.json файл использует формат glob для путей сопоставления с образцом.

Patterns use a limited glob format:

** matches 0 or more path segments.
* matches exactly one path segment or filename segment.
The ! prefix marks the pattern as being negative, meaning that only files that don't match the pattern will be included.

Что здесь важно, так это ! префикс, который можно использовать для исключения пути. Например, шаблон глобуса !/api/rss следует исключить этот путь.

Чтобы исключить путь из файла nags-configuration.json, просто добавьте ! характер для этого шаблона пути.

Answer 6

В файле ngsw-config.json { "index": "/index.html", "dataGroups": [ { "name": "api", "urls": ["!/**/*profileimageupload*"], "cacheConfig": { "maxSize": 0, "maxAge": "0u", "strategy": "freshness" } } ]
}

например. Если ваш API похож на https://api.example.com/profileimageupload/ то добавьте последний сегмент из Сервиса /API

Я добавляю profileimageupload, который хочу исключить (удалить) вызов от сервисного работника, поэтому я добавил! / ** /yourService / Api фамилия,

Answer 7

Вы можете отключить сервис-воркера для определенного запроса с помощью заголовков или строки запроса.

Более детально;

Идите по github, пожалуйста

Answer 8

Пожалуйста, дайте мне знать, если это поможет:

    { 
   "exclude": [ 
     "test.ts", 
     "**/*.spec.ts" 
   ] 
   }