Перейти к содержанию

Начало работы с рабочими службами

📅 28.02.2022

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

Предварительные условия

Базовое понимание информации в Introduction to Angular service workers.

Добавление сервисного работника в ваш проект

Чтобы установить Angular service worker в свой проект, используйте команду CLI ng add @angular/pwa. Она позаботится о настройке вашего приложения на использование работников сервисов, добавив пакет @angular/service-worker вместе с

с установкой необходимых файлов поддержки.

1
ng add @angular/pwa --project <project-name>

Предыдущая команда выполняет следующие действия:

  1. Добавляет пакет @angular/service-worker в ваш проект.

  2. Включает поддержку сборки service worker в CLI.

  3. Импортирует и регистрирует сервисный работник в модуле приложения.

  4. Обновляет файл index.html:

    • Включает ссылку для добавления файла manifest.webmanifest.
    • Добавляет мета-тег для theme-color.

  5. Устанавливает файлы иконок для поддержки установленного Progressive Web App (PWA).

  6. Создает файл конфигурации рабочего сервиса под названием ngsw-config.json, который определяет поведение кэширования и другие настройки.

Теперь соберите проект:

1
ng build

Теперь проект CLI настроен на использование Angular service worker.

Сервисный работник в действии: экскурсия

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

Начальная загрузка

Когда сервер запущен, направьте браузер на http://localhost:8080. Ваше приложение должно загрузиться нормально.

При тестировании рабочих служб Angular рекомендуется использовать инкогнито или приватное окно в браузере, чтобы убедиться, что рабочая служба не считывает данные из предыдущего состояния, что может привести к неожиданному поведению.

Если вы не используете HTTPS, рабочий сервис будет зарегистрирован только при доступе к приложению на localhost.

Моделирование сетевой проблемы

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

В Chrome:

  1. Выберите Инструменты > Инструменты разработчика (в меню Chrome, расположенном в правом верхнем углу).

  2. Перейдите на вкладку Сеть.

  3. Выберите Offline в выпадающем меню Throttling.

The offline option in the Network tab is selected

Теперь приложение не имеет доступа к сетевому взаимодействию.

Для приложений, не использующих Angular service worker, при обновлении теперь отображается страница Chrome "Internet disconnected" с надписью "There is no Internet connection".

С добавлением Angular service worker поведение приложения меняется. При обновлении страница загружается нормально.

Посмотрите на вкладку "Сеть", чтобы убедиться, что работник службы активен.

Requests are marked as from ServiceWorker

В столбце "Размер" состояние запросов — (ServiceWorker). Это означает, что ресурсы не загружаются из сети.

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

Что кэшируется?

Обратите внимание, что все файлы, необходимые браузеру для рендеринга этого приложения, кэшируются. Шаблонная конфигурация ngsw-config.json настроена на кэширование специфических ресурсов, используемых CLI:

  • index.html
  • favicon.ico
  • Сборка артефактов (JS и CSS bundles).
  • Все, что находится под assets.

  • Изображения и шрифты непосредственно под настроенным outputPath (по умолчанию ./dist/<project-name>/) или resourcesOutputPath.

    Более подробную информацию об этих опциях смотрите в ng build.

Обратите внимание на два ключевых момента:

  1. Сгенерированный ngsw-config.json включает ограниченный список кэшируемых шрифтов и расширений изображений.

    В некоторых случаях вам может понадобиться изменить шаблон glob в соответствии с вашими потребностями.

  2. Если пути resourcesOutputPath или assets изменены после генерации конфигурационного файла, вам необходимо вручную изменить пути в ngsw-config.json.

Внесение изменений в ваше приложение

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

  1. Если вы тестируете в окне инкогнито, откройте вторую пустую вкладку.

    Это позволит сохранить состояние инкогнито и кэша во время тестирования.

  2. Закройте вкладку приложения, но не окно.

    Это также приведет к закрытию инструментов разработчика.

  3. Выключите http-server.

  4. Откройте src/app/app.component.html для редактирования.

  5. Измените текст Welcome to {{title}}! на Bienvenue à {{title}}!.

  6. Соберите и запустите сервер снова:

    1
2
    ng build
http-server -p 8080 -c-1 dist/<project-name>

Обновление приложения в браузере

Теперь посмотрим, как браузер и сервисный работник обрабатывают обновленное приложение.

  1. Откройте http://localhost:8080 снова в том же окне. Что происходит?

    По-прежнему написано Welcome to Service Workers!

    Что пошло не так?

    На самом деле, ничего.

    Angular service worker выполняет свою работу и обслуживает ту версию приложения, которая у него установлена, даже если доступно обновление.

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

    Посмотрите на журналы http-server, чтобы увидеть, как работник службы запрашивает /ngsw.json.

    Так работник службы проверяет наличие обновлений.

  2. Обновите страницу.

    Текст изменился на Bienvenue à app!

    Работник службы установил обновленную версию вашего приложения в фоновом режиме, и при следующей загрузке или перезагрузке страницы работник службы переключается на последнюю версию.

Подробнее о рабочих службах Angular

Вам также может быть интересно следующее:

📅 28.02.2022

Комментарии