В этой лаборатории кода показано, как зарегистрировать сервис-воркера в вашем веб-приложении и использовать 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 , который отвечает ресурсами, несовместимыми со старыми версиями вашего веб-приложения), он не вступит в силу до тех пор, пока пользователь не вступит в силу. закрыл все предыдущие экземпляры вашего веб-приложения.
Подведение итогов
Теперь вы должны освоиться с процессом регистрации сервисного работника и наблюдением за его поведением с помощью Chrome DevTools.
Теперь вы можете приступить к реализации стратегий кэширования и всех полезных вещей, которые помогут вашему веб-приложению загружаться надежно и быстро.