От автора: этот пост полностью посвящен Service Worker, как он работает, где мы можем его использовать, как мы можем удалить это, где он не будет работать и многое другое.
Service Worker
Service Worker — это файл скрипта Java, который запускается в браузере пользователя как фоновый процесс.
Как работает Service Worker
Он перехватывает сетевые запросы, кэширует или извлекает ресурсы из кэша, а также доставляет push-уведомления. К Service Worker может одновременно обращаться множество вкладок в браузере, поскольку только один Service Worker может существовать в каждой области, а его существование не зависит от основного потока.
Чтобы установить Service Worker в проекте, сначала необходимо зарегистрировать Service Worker.
Регистрация Service Worker
Чтобы зарегистрировать Service Worker, нам нужно проверить, поддерживает ли его браузер, используя Объект navigator. Объект navigator содержит информацию о браузере. Ваш первый Service Worker загружается, когда вы вызываете функцию register().
if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/ServiceWorker.js') .then(function(response) { // Service worker registration done console.log('Registration Successful', response); }, function(error) { // Service worker registration failed console.log('Registration Failed', error);
})
}Service Worker может получить доступ только к папкам, расположенным ниже, поэтому, вероятно, лучше хранить его в корне проекта (самая верхняя папка).
Функция регистрации Service Worker загружает скрипт Service Worker с предоставленного URL-адреса и выполняет его.
В приведенном выше коде ответ содержит информацию о состоянии Service Worker, а также о его объеме. В файле ServiceWorker.js мы можем написать код для установки, обновления, отправки и т. д.
Если Service Worker не удается зарегистрировать, промис регистрации отклоняется, и Service Worker отбрасывается.
Как добавить Service Worker
После успешной регистрации Service Worker может выполняться установка. Установка Service Worker:
Если Service Worker новый или обновленный, начнется процесс установки. На этом этапе вы можете кэшировать статический контент или файл.
Это событие срабатывает только в том случае, если «ServiceWorker.js» не существует или файл более новой версии (обновлен).
self.addEventListener('install', cach => { event.waitUntil( caches.open('v1').then(cache => { return cache.addAll([ '/favicon.ico', ]); }) ); });Service Worker не устанавливается, если какой-либо файл не удалось перехватить, что предусмотрено функцией cache.addAll().
С помощью event.waitUntil() Service Worker не завершает работу, пока промис, переданный методу waitUntil(), не будет разрешен или отклонено. После успешной установки запускается событие активации Service Worker.
self.addEventListener('activate', event => { console.log('v1 now ready to handle fetches'); })Как очистить кэш Service Worker
В случае активации мы можем удалить существующий кэшированный элемент с помощью метода cache.delete().
self.addEventListener('activate', function(event) { event.waitUntil( caches.keys().then(function(cacheNames) { cacheNames.forEach(function(cacheName) { caches.delete(cacheName); }); }); )
}Метод caches.keys() предоставляет имена всех доступных кэшей. Каждый раз, когда пользователь делает запрос на странице, запускаются события кэширования Service Worker. В этом случае мы решаем, хотим ли мы, чтобы этот запрос был передан в сеть или был представлен элемент из кэша.
self.addEventListener('fetch', event => { const url = new URL(event.request.url); //serve the image from catch if the request is same origin if(url.origin === location.origin) { //image which is stored at the time of installation //respond with cached event.respondWith(caches.match('/favicon.ico')); } })Предоставляем ответ с помощью сетевого вызова.
self.addEventListener('fetch', event => { event.respondWith(fetch(event.request)); })Метод responseWith() позволяет вам предоставить промис на Response самостоятельно.
Обновление Service Worker
Если мы внесем изменения в файл скрипта Service Worker, то браузер будет считать его новым Service Worker, и будет запущено новое событие установки.
Когда мы обновляем Service Worker, новый Service Worker не контролирует клиенты, потому что клиентов обрабатывает старый Service Worker. Когда мы закрываем браузер, старый Service Worker уничтожается, а новый заменяет старый Service Worker.
Если мы хотим использовать нового Service Worker, как только установка будет завершена, мы можем использовать метод self.skipWaiting().
Этот метод активирует Service Worker после завершения установки. Если новый Service Worker не удается установить, клиентов (страницы) продолжает обрабатывать старый. В режиме разработки установите флажок обновления при перезагрузке, тогда Service Worker будет обновляться при обновлении страницы.
Отладка Service Worker
Service Worker доступны только для «безопасных источников» (HTTPS-сайты, в основном). Чтобы проверить Service Worker в Chrome:
Перейдите к инструментам разработчика (F12) или кликните правой кнопкой мыши на странице и выберите «Просмотреть». Перейти на вкладку приложения, а кликните на Service Worker в боковой панели. В боковой панели будет отображен список зарегистрированных Service Worker.
Как проверить Service Worker на localhost:
Для разработки Вы можете использовать localhost, так как localhost также считается «безопасным источником». Или настройте локальный сервер, используя http-сервер npm и обслуживая пакет.
Отменить регистрацию Service Worker / Удалить Service Worker / Отключить Service Worker
Для отмены регистрации Service Worker:
if ('serviceWorker' in navigator) { navigator.serviceWorker.getRegistration().then( function(registrations) { for(let registration of registrations) { registration.unregister(); } } ) }Service Worker может не быть удален сразу. Если Service Worker в настоящее время выполняет какие-либо задачи для клиента, они будут завершены до его официального удаления. Service Worker будет удален только после перезагрузки или закрытия страницы.
Из-за этого вы можете создать новых фиктивных Service Worker и использовать их вместо работающих в настоящее время, поместив метод unregister() Service Worker в событие активации Service Worker и заставив браузер каждого клиента перезагрузить страницу.
Как вручную отменить регистрацию Service Worker из Chrome
Перейдите к инструментам разработчика (F12) или кликните правой кнопкой мыши на странице и выберите «Просмотреть». Перейдите на вкладку приложения, а затем кликните на Service Worker в боковой панели.
В боковой панели отобразится список зарегистрированных Service Worker. Здесь вы можете вручную отменить регистрацию Service Worker, нажав на ссылку «Отменить регистрацию».
Автор: Nishant Contractor
Источник: https://dev.to
Редакция: Команда webformyself.