Начало работы с обслуживающими работниками

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

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

Чтобы настроить Angular Service worker в вашем проекте, используйте команду CLI

  `` ng add @ angular/pwa ``.  

Он позаботится о настройке вашего приложения для использования сервис-воркеров, добавив пакет сервис-воркера вместе с настройкой необходимых файлов поддержки.

  `` ng add @ angular/pwa  --project * project-name * ``  

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

  1. Добавляет @angular /service-worker в ваш проект.
  2. Позволяет сервис-воркеру создавать поддержку в CLI.
  3. Импортирует и регистрирует сервис-воркера в модуле приложения.
  4. Обновляет файл index.html:
  • Включает ссылку для добавления файла manifest.json.
  • Добавляет метатеги для theme-color.
  • Устанавливает файлы значков для поддержки остановленное прогрессивное веб-приложение (PWA).
  • Создает файл конфигурации сервис-воркера с именем ngsw-config.json, который определяет поведение кэширования и другие параметры.
  • Теперь, построить проект:

      `` ng build –prod``  

    Теперь проект CLI настроен для использования сервисный воркер Angular.

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

    В этом разделе демонстрируется сервисный воркер в действии с использованием пример приложения.

    Обслуживание с http-сервером

    Поскольку ng serve не работает с сервис-воркерами, вы должны использовать отдельный HTTP-сервер для локального тестирования вашего проекта. Вы можете использовать любой HTTP-сервер. В приведенном ниже примере используется пакет http-server от npm. Чтобы уменьшить вероятность конфликтов и избежать обслуживания устаревшего содержимого, проверьте выделенный порт и отключите кеширование.

    Чтобы обслуживать каталог, содержащий ваши веб-файлы, с помощью http-сервера, выполните следующую команду:

      http-server -p 8080 -c-1 dist/  

    Начальный load

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

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

    Имитация сетевой проблемы

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

    1. Выберите «Инструменты»> «Инструменты разработчика» (в меню Chrome, расположенном в правом верхнем углу).
    2. Перейдите на вкладку «Сеть».
    3. Установите флажок «Автономный».

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

    Для приложений, которые не используют Angular Service worker, при обновлении сейчас Интернет Chrome будет отключен страница с сообщением «Нет подключения к Интернету».

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

    Если вы посмотрите на вкладку «Сеть», вы можете убедиться, что сервис-воркер активен.

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

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

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

    1. index.html.
    2. favicon.ico.
    3. Артефакты сборки (пакеты JS и CSS).
    4. Все, что находится под активами.
    5. Изображения и шрифты непосредственно под сконфигурированный outputPath (по умолчанию ./dist//) или resourcesOutputPath.

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

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

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

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

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

    1. Если вы тестируете в окне инкогнито, откройте вторую пустую вкладку. Это сохранит инкогнито и состояние кеша во время вашего теста.
    2. Закройте вкладку приложения, но не окно. При этом также должны быть закрыты Инструменты разработчика.
    3. Выключите http-сервер.
    4. Затем внесите изменения в приложение и посмотрите, как сервисный работник установит обновление.
    5. Откройте src/app/app.component.html для редактирования.
    6. Измените текст Добро пожаловать в {{title}}! to Nnoo na {{title}}!
    7. Скомпилируйте и снова запустите сервер:
      `` ng build -  -prodhttp-server -p 8080 -c-1 dist/ ``  

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

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

    Снова откройте http://localhost: 8080 в том же окне. Что случилось?

    Что пошло не так? Собственно, ничего. Сервисный воркер Angular выполняет свою работу и обслуживает ту версию приложения, которую он установил, даже если доступно обновление.. В интересах скорости служебный воркер не дожидается проверки обновлений, прежде чем он обслуживает кэшированное приложение.

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

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

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

    Оцените статью
    nanomode.ru
    Добавить комментарий