InstallEvent: метод addRoutes()

Метод addRoutes() интерфейса InstallEvent определяет один или несколько статических маршрутов, которые задают правила для получения определённых ресурсов, которые будут использоваться даже до запуска сервисного работника. Это позволяет, например, обойти сервисный работник в случаях, когда вам всегда нужно получать ресурс из сети или браузерного Cache, и избегает накладных расходов на ненужные циклы сервисного работника.

routerRules

Один объект или массив из одного или нескольких объектов, представляющих правила того, как следует получать определенные ресурсы. Каждый routerRules объект содержит следующие свойства:

condition

Объект, определяющий один или несколько условий, которые указывают, какие ресурсы должны соответствовать этому правилу. Можно включить следующие свойства; если используются несколько свойств, ресурс должен удовлетворять всем указанным условиям для соответствия правилу.

not Необязательно

Объект condition , определяющий условия, которым явно не должно соответствовать правило. Условия, определенные внутри условия not, взаимоисключающие с другими условиями.

or Необязательно

Массив объектов condition. Для соответствия правилу должно быть выполнено одно из набора определенных условий. Условия, определенные в условии or, взаимоисключающие с другими условиями.

requestMethod Необязательно

Строка, представляющая HTTP-метод, который должен быть отправлен запросом для соответствия правилу, например "get", "put", или "head".

requestMode Необязательно

Строка, представляющая режим запроса, который должен соответствовать правилу, например "same-origin", "no-cors", или "cors".

requestDestination Необязательно

Строка, представляющая назначение запроса, т. е. какой тип контента должен быть запрошен для соответствия правилу. Примеры включают "audio", "document", "script", и "worker".

runningStatus Необязательно

Перечисление, представляющее требуемый рабочий статус сервисного работника для соответствия запроса правилу. Значения могут быть "running" или "not-running".

urlPattern Необязательно

Экземпляр URLPattern или шаблон конструктора URLPattern() input, представляющий URL-адреса, которые соответствуют правилу.

source

Значение перечисления или объект, определяющий источник, из которого будут загружаться соответствующие ресурсы. Возможные значения перечисления:

"cache"

Ресурсы будут загружаться из браузерного Cache.

"fetch-event"

Ресурсы будут загружаться через обработчик события fetch сервисного работника. Это можно комбинировать с условием "runningStatus" для загрузки ресурсов из сервисного работника, если он запущен, и переходить на статический маршрут в сети, если он не запущен.

"network"

Ресурсы будут загружаться из сети.

"race-network-and-fetch-handler"

Попытки загрузки ресурсов из сети и обработчика события fetch сервисного работника одновременно. Используется тот, который завершится первым.

Значение source также может быть установлено в объект, содержащий единственное свойство cacheName, значение которого — строка, представляющая имя браузерного Cache. Соответствующие ресурсы будут загружаться из этого конкретного кэша с именем, если он существует.

Объект Promise, который выполняется со значением undefined.

TypeError DOMException

Выбрасывается, если один или несколько объектов правил внутри routerRules некорректны или имеют значение source "fetch-event", когда связанный сервисный работник не имеет обработчика события fetch. Также выбрасывается, если вы попытаетесь комбинировать or с другим типом условия.

В следующем примере URL-адреса, начинающиеся с /articles , направляются в сеть, если сервисный работник в данный момент не запущен:

addEventListener("install", (event) => {
  event.addRoutes({
    condition: {
      urlPattern: "/articles/*",
      runningStatus: "not-running",
    },
    source: "network",
  });
});

В следующем примере POST-запросы к форме отправляются напрямую в сеть и опускают сервисный работник:

addEventListener("install", (event) => {
  event.addRoutes({
    condition: {
      urlPattern: "/form/*",
      requestMethod: "post",
    },
    source: "network",
  });
});

В следующем примере браузерный Cache с именем "pictures" используется для получения файлов с расширениями .png или .jpg:

addEventListener("install", (event) => {
  event.addRoutes({
    condition: {
      or: [{ urlPattern: "*.png" }, { urlPattern: "*.jpg" }],
    },
    source: {
      cacheName: "pictures",
    },
  });
});

Вы не можете комбинировать or с другим условием — это приводит к TypeError. Если, например, вам нужно соответствовать файлам с расширениями .png или .jpg , но только когда requestMethod имеет значение get , вам необходимо указать два отдельных условия:

addEventListener("install", (event) => {
  event.addRoutes(
    {
      condition: {
        urlPattern: "*.png",
        requestMethod: "get",
      },
      source: {
        cacheName: "pictures",
      },
    },
    {
      condition: {
        urlPattern: "*.jpg",
        requestMethod: "get",
      },
      source: {
        cacheName: "pictures",
      },
    },
  );
});

• InstallEvent
• событие install
• API сервисных работников
• Используйте API статических маршрутов сервисных рабочих для обхода сервисного работника для определённых путей на developer.chrome.com (2024)