Работа с работниками сервиса

Jeff Posnick

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

Ознакомьтесь с примером проекта

Файлы в примере проекта, наиболее подходящие для этой лаборатории кода:

• В начале файл register-sw.js будет пустым, но он будет содержать код, используемый для регистрации сервисного работника. Он уже загружается через тег <script> внутри index.html проекта.
• service-worker.js также пуст. Это файл, который будет содержать сервис-воркера для этого проекта.

Добавьте регистрационный код сервисного работника.

Сервис-воркер (даже пустой, например текущий файл service-worker.js ) не будет использоваться, пока он не будет предварительно зарегистрирован . Вы можете сделать это, позвонив по адресу:

navigator.serviceWorker.register(
  '/service-worker.js'
)

внутри вашего файла register-sw.js .

Однако прежде чем добавлять этот код, необходимо принять во внимание несколько моментов.

Во-первых, не каждый браузер поддерживает сервис-воркеров. Это особенно актуально для старых версий браузеров, которые не обновляются автоматически. Поэтому рекомендуется вызывать navigator.serviceWorker.register() условно, после проверки того, поддерживается ли navigator.serviceWorker .

Во-вторых, когда вы регистрируете сервис-воркера, браузер запускает код из вашего файла service-worker.js и потенциально может начать загрузку URL-адресов для заполнения кешей, в зависимости от кода в обработчиках install и activate вашего сервис-воркера.

Запуск дополнительного кода и загрузка ресурсов могут использовать ценные ресурсы, которые в противном случае ваш браузер мог бы использовать для отображения текущей веб-страницы. Чтобы избежать этого вмешательства, рекомендуется отложить регистрацию работника службы до тех пор, пока браузер не завершит отрисовку текущей страницы. Удобный способ добиться этого — подождать, пока не будет запущено событие window.load .

Объединив эти два пункта, добавьте этот регистрационный код сервисного работника общего назначения в файл register-sw.js :

if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/service-worker.js');
  });
}

Добавьте код регистрации сервисного работника

В файле service-worker.js обычно находится вся логика реализации вашего сервис-воркера. Вы можете использовать сочетание событий жизненного цикла сервис-воркера, Cache Storage API и знаний о сетевом трафике вашего веб-приложения, чтобы создать идеально созданный сервис-воркер, готовый обрабатывать все запросы вашего веб-приложения.

Но… это все, чему можно научиться позже. На этом этапе основное внимание уделяется наблюдению за различными событиями сервис-воркера и освоению инструментов разработчика Chrome для отладки состояния вашего сервис-воркера.

Для этого добавьте следующий код в service-worker.js , который будет регистрировать сообщения в консоли DevTools в ответ на различные события (но не делать ничего другого):

self.addEventListener('install', (event) => {
  console.log('Inside the install handler:', event);
});

self.addEventListener('activate', (event) => {
  console.log('Inside the activate handler:', event);
});

self.addEventListener(fetch, (event) => {
  console.log('Inside the fetch handler:', event);
});

Ознакомьтесь с панелью Service Workers в DevTools.

Теперь, когда вы добавили код в файлы register-sw.js и service-worker.js , пришло время посетить Live-версию вашего примера проекта и понаблюдать за сервис-воркером в действии.

• Чтобы просмотреть сайт, нажмите «Просмотреть приложение» . Затем нажмите Полноэкранный режим .
• Нажмите «Control+Shift+J» (или «Command+Option+J» на Mac), чтобы открыть DevTools.
• Откройте вкладку Консоль .

Вы должны увидеть что-то вроде следующих сообщений журнала, показывающих, что сервисный работник установлен и активирован:

Затем перейдите на вкладку «Приложения» и выберите панель «Service Workers» . Вы должны увидеть что-то вроде следующего:

Это позволит вам узнать, что существует сервисный работник с исходным URL-адресом service-worker.js для веб-приложения solar-donkey.glitch.me , которое в данный момент активировано и работает. Он также сообщает вам, что в настоящее время существует один клиент (открытая вкладка), который контролируется сервисным работником.

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

Запуск потока обновления Service Worker

Одной из ключевых концепций, которые следует понимать при разработке с использованием сервис-воркеров, является идея потока обновлений .

После того как ваши пользователи посетят веб-приложение, которое регистрирует сервис-воркера, они получат код текущей копии service-worker.js установленной в их локальном браузере. Но что произойдет, если вы обновите версию service-worker.js, хранящуюся на вашем веб-сервере?

Когда повторный посетитель возвращается на URL-адрес, находящийся в области действия Service Worker, браузер автоматически запрашивает последнюю версию service-worker.js и проверяет наличие каких-либо изменений. Если что-то в сценарии сервисного работника отличается, новый сервисный работник получит возможность установить, активировать и, в конечном итоге, взять на себя управление.

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

self.addEventListener('install', (event) => {
  console.log('Inside the install handler:', event);
});

с

self.addEventListener('install', (event) => {
  console.log('Inside the UPDATED install handler:', event);
});

После внесения этого изменения вернитесь к Live-версии примера приложения и перезагрузите страницу, оставив вкладку DevTools Application открытой. Вы должны увидеть что-то вроде следующего:

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

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

Подведение итогов

Теперь вы должны освоиться с процессом регистрации сервисного работника и наблюдением за его поведением с помощью DevTools Chrome.

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