Конфигурация сервисного работника

Последнее обновление 17 июля 2019 08:10:55 (UTC / GMT +8 часов)

script1adsense2code

script1adsense3code

Файл конфигурации src / ngsw-config.json указывает, какие файлы и URL-адреса данных должен кэшировать работник службы Angular и как он должен обновлять кэшированные файлы и данные. Angular CLI обрабатывает файл конфигурации во время ng build --prod. Вручную вы можете обработать его с помощью инструмента ngsw-config:

```ngsw-config dist src/ngsw-config.json /base/href```

Файл конфигурации использует формат JSON. Все пути к файлам должны начинаться с /, который является каталогом развертывания - обычно это dist в проектах CLI.

Если не указано иное, шаблоны используют ограниченный формат глобуса:

** соответствует 0 или более сегментам пути.
соответствует 0 или более символам, исключая /.
? соответствует ровно одному символу, исключая /.
! Префикс помечает шаблон как отрицательный, что означает, что будут включены только файлы, которые не соответствуют шаблону.

Примеры шаблонов:

/**/*.html указывает все файлы HTML.
/*.html указывает только файлы HTML в корне.
! / ** / *. map исключить все исходные карты.

Каждый раздел файла конфигурации описан ниже.

данные приложения

Этот раздел позволяет передавать любые данные, которые вы хотите, которые описывают эту конкретную версию приложения. Служба SwUpdate включает эти данные в уведомления об обновлениях. Многие приложения используют этот раздел, чтобы предоставить дополнительную информацию для отображения всплывающих окон пользовательского интерфейса, уведомляя пользователей о доступном обновлении.

индекс

Указывает файл, который служит страницей индекса для удовлетворения запросов навигации. Обычно это /index.html.

assetGroups

Активы - это ресурсы, являющиеся частью версии приложения, которые обновляются вместе с приложением. Они могут включать ресурсы, загруженные из источника страницы, а также сторонние ресурсы, загруженные из CDN и других внешних URL-адресов. Поскольку не все такие внешние URL-адреса могут быть известны во время сборки, шаблоны URL-адресов могут быть сопоставлены.

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

{
  "assetGroups": [{
    ...
  }, {
    ...
  }]
}

Демонстрация в реальном времени:

Посмотрите ресурсы ресурса Pen по w3resource ( @ w3resource ) на CodePen .

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

Группы активов следуют интерфейсу Typescript, показанному здесь:

название

Имя обязательно. Он идентифицирует эту конкретную группу активов между версиями конфигурации.

installMode

InstallMode определяет, как эти ресурсы изначально кэшируются.

interface AssetGroup {
  name: string;
  installMode?: 'prefetch' | 'lazy';
  updateMode?: 'prefetch' | 'lazy';
  resources: {
    files?: string[];
    /** @deprecated As of v6 `versionedFiles` and `files` options have the same behavior. Use `files` instead. */
    versionedFiles?: string[];
    urls?: string[];
  };
}

Демонстрация в реальном времени:

См. Группу ресурсов Pen по w3resource ( @ w3resource ) на CodePen .

InstallMode может иметь одно из двух значений:

Функция prefetch сообщает работнику службы Angular о необходимости извлечения каждого из перечисленных ресурсов во время кэширования текущей версии приложения. Это интенсивно использует пропускную способность, но обеспечивает доступность ресурсов, когда они запрашиваются, даже если браузер в данный момент отключен.
Ленивый не кеширует любые ресурсы заранее. Вместо этого работник службы Angular кэширует только те ресурсы, к которым он получает запросы. Это режим кэширования по требованию. Ресурсы, которые никогда не запрашиваются, не будут кэшироваться. Это полезно для таких вещей, как изображения с различным разрешением, поэтому работник службы кэширует только правильные ресурсы для определенного экрана и ориентации.

По умолчанию предварительная выборка.

UpdateMode

Для ресурсов, уже находящихся в кэше, updateMode определяет поведение кэширования при обнаружении новой версии приложения. Любые ресурсы в группе, которые изменились с предыдущей версии, обновляются в соответствии с updateMode.

prefetch сообщает сервисному работнику немедленно загрузить и кэшировать измененные ресурсы.
Ленивый говорит сервисному работнику не кэшировать эти ресурсы. Вместо этого он обрабатывает их как незапрошенные и ждет, пока их не запросят снова, прежде чем обновлять их. UpdateMode для lazy действителен, только если installMode также является lazy.

По умолчанию установлено значение installMode.

Ресурсы

В этом разделе описываются ресурсы для кэширования, разбитые на три группы.

В файлах перечислены шаблоны, соответствующие файлам в каталоге распространения. Это могут быть отдельные файлы или глобальные шаблоны, которые соответствуют нескольким файлам.
versionedFiles устарел. Начиная с версии v6 версии файлов и файлов имеют одинаковое поведение. Используйте файлы вместо.
URL-адреса включают в себя как URL-адреса, так и шаблоны URL, которые будут сопоставляться во время выполнения. Эти ресурсы не извлекаются напрямую и не содержат хэшей контента, но они будут кэшироваться в соответствии с их заголовками HTTP. Это наиболее полезно для CDN, таких как сервис Google Fonts.

(Отрицательные шаблоны глобуса не поддерживаются и «будут сопоставлены буквально; т. Е. Он не будет соответствовать никаким символам, кроме».)

dataGroups

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

Группы данных следуют этому интерфейсу Typescript:

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

Демонстрация в реальном времени:

Смотрите интерфейс Pen от w3resource ( @ w3resource ) на CodePen .

название

Подобно assetGroups, каждая группа данных имеет имя, которое однозначно идентифицирует его.

URLs

Список шаблонов URL. URL-адреса, соответствующие этим шаблонам, будут кэшироваться в соответствии с политикой этой группы данных.

версия

Иногда API меняют форматы способом, который не является обратно совместимым. Новая версия приложения может быть несовместима со старым форматом API и, следовательно, может быть несовместима с существующими кэшированными ресурсами этого API.

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

Версия является целочисленным полем и по умолчанию равна 1.

cacheConfig

Этот раздел определяет политику, по которой соответствующие запросы будут кэшироваться.

MaxSize

(обязательно) Максимальное количество записей или ответов в кеше. Открытые кэши могут расти неограниченным образом и в конечном итоге превышать квоты хранилища, требуя выселения.

MaxAge

(обязательно) Параметр maxAge указывает, как долго ответы могут оставаться в кэше до того, как они будут считаться недействительными и исключенными. maxAge - строка продолжительности, использующая следующие суффиксы единиц:

д: дни
ч: часы
м: минуты
с: секунды
U: миллисекунды

Например, строка 3d12h будет кэшировать контент на срок до трех с половиной дней.

Тайм - аут

Эта строка длительности указывает время ожидания сети. Время ожидания сети - это время, в течение которого работник службы Angular будет ждать ответа от сети, прежде чем использовать кэшированный ответ, если он настроен для этого. timeout - строка продолжительности, использующая следующие суффиксы единиц:

д: дни
ч: часы
м: минуты
с: секунды
U: миллисекунды

Например, строка 5s30u преобразуется в пять секунд и 30 миллисекунд тайм-аута сети.

стратегия

Работник службы Angular может использовать любую из двух стратегий кэширования для ресурсов данных.

производительность по умолчанию оптимизируется для максимально быстрых ответов. Если ресурс существует в кэше, используется кэшированная версия, и сетевой запрос не выполняется. Это учитывает некоторую стабильность, в зависимости от maxAge, в обмен на лучшую производительность. Это подходит для ресурсов, которые не меняются часто; например, изображения аватара пользователя.
свежесть оптимизируется для валюты данных, преимущественно выбирая запрошенные данные из сети. Только в случае тайм-аута сети, согласно тайм-ауту, запрос возвращается к кешу. Это полезно для ресурсов, которые часто меняются; например, остатки на счетах.

navigationUrls

Этот необязательный раздел позволяет указать пользовательский список URL-адресов, которые будут перенаправлены в индексный файл.

Обработка запросов навигации

ServiceWorker перенаправит запросы навигации, которые не соответствуют ни одному активу или группе данных, к указанному файлу индекса. Запрос считается навигационным запросом, если:

Его режим - навигация.
Он принимает текстовый / html ответ (который определяется значением заголовка Accept).
Его URL соответствует определенным критериям (см. Ниже).

По умолчанию используются следующие критерии:

URL не должен содержать расширение файла (т. Е.) В последнем сегменте пути.
URL не должен содержать __.

Соответствующие URL запроса навигации

Хотя эти критерии по умолчанию подходят в большинстве случаев, иногда желательно настроить другие правила. Например, вы можете игнорировать определенные маршруты (которые не являются частью приложения Angular) и передавать их на сервер.

Это поле содержит массив URL-адресов и глобальные шаблоны URL-адресов, которые будут сопоставляться во время выполнения. Он может содержать как негативные шаблоны (т. Е. Шаблоны, начинающиеся с!), Так и неотрицательные шаблоны и URL-адреса.

Только запросы, URL-адреса которых соответствуют любому из неотрицательных URL / шаблонов и ни один из отрицательных, не будут считаться навигационными запросами. URL-запрос будет игнорироваться при сопоставлении.

Если поле опущено, оно по умолчанию:

[
  '/**',           // Include all URLs.
  '!/**/*.*',      // Exclude URLs to files.
  '!/**/*__*',     // Exclude URLs containing `__` in the last segment.
  '!/**/*__*/**',  // Exclude URLs containing `__` in any other segment.
]

Демонстрация в реальном времени:

См. Сопоставление URL- адреса пера по w3resource ( @ w3resource ) в CodePen .

Предыдущий: Служба связи
Далее: Сервисный работник на производстве