Прежде всего, давайте зададимся вопросом, почему название этой статьи именно такое? Ну, чтобы ответить, мы должны знать, каковы требования для создания прогрессивных веб-приложений. И к этому моменту, просматривая заголовок и вопрос вперед и назад, вы, вероятно, правильно догадались, да, это сервисный работник.
Если вы не знаете, что такое сервис-воркер, вы по какой-то причине не сможете сделать PWA, а если вам все же удастся его сделать, то это хорошо для вас. Но в чем прикол делать что-то, на самом деле не зная, что происходит на заднем плане или простыми словами, не зная, что они делают.
Если вы такой человек и прямо сейчас хотите узнать об одном из самых важных требований к созданию PWA, вы попали в нужную статью, мой друг…
Итак, без лишних слов, давайте начнем пачкать руки.
Определение сервисного работника
В MDN сервис-воркеры по сути действуют как прокси-серверы, которые находятся между веб-приложениями, браузером и сетью (если они доступны).
Они предназначены, среди прочего, для обеспечения эффективного автономного взаимодействия, перехвата сетевых запросов и выполнения соответствующих действий в зависимости от доступности сети, а также для обновления активов, находящихся на сервере. Они также предоставят доступ к push-уведомлениям и API фоновой синхронизации.
Сервисный работник запускается в рабочем контексте: поэтому он не имеет доступа к DOM и работает в потоке, отличном от основного потока JavaScript, на котором работает ваше приложение, поэтому он не блокирует. Он разработан, чтобы быть полностью асинхронным; как следствие, такие API, как синхронный XHR и Web Storage, не могут использоваться внутри сервис-воркера.
Каковы особенности сервисных работников?
Сервисные работники — это специализированные активы JavaScript, которые действуют как прокси-серверы между веб-браузерами и веб-серверами. Они стремятся повысить надежность, предоставляя автономный доступ, а также повышая производительность страницы.
Жизненный цикл нового сервис-воркера
Для того чтобы сервис-воркер мог управлять страницей, она должна быть, так сказать, сначала создана. Давайте начнем с того, что происходит, когда новый сервис-воркер развертывается для веб-сайта без активного сервис-воркера.
Постановка на учет
Регистрация — это начальный этап жизненного цикла сервис-воркера:
<!-- In index.html, for example: -->
<script>
// Don't register the service worker
// until the page has fully loaded
window.addEventListener('load', () => {
// Is service worker available?
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw.js').then(() => {
console.log('Service worker registered!');
}).catch((error) => {
console.warn('Error registering service worker:');
console.warn(error);
});
}
});
</script>
Монтаж
Сервисный работник запускает свое событие install
после регистрации. install
вызывается только один раз для каждого сервисного работника и не будет запускаться снова, пока не будет обновлено. Обратный вызов для события install
можно зарегистрировать в рабочей области с помощью addEventListener
:
// /sw.js self.addEventListener('install', (event) => { const cacheKey = 'CacheName_v1'; event.waitUntil(caches.open(cacheKey).then((cache) => { // Add all the assets in the array to the 'CacheName_v1' // `Cache` instance for later use. return cache.addAll([ '/src/index.html', '/src/css/style.css'
]); }));
Это создает новый экземпляр Cache
и предварительно кэширует ресурсы. Позже у нас будет много возможностей поговорить о предварительном кэшировании, так что давайте сосредоточимся на роли event.waitUntil
. event.waitUntil
принимает обещание и ждет, пока это обещание не будет разрешено. В этом примере обещание выполняет две асинхронные операции:
- Создает новый экземпляр
Cache
с именем'MyFancyCache_v1'
. - После создания кеша массив URL-адресов активов предварительно кэшируется с использованием его асинхронного метода
addAll
.
Установка завершится ошибкой, если обещания, переданные event.waitUntil
, будут отклонены. В этом случае сервис-воркер отбрасывается.
Если обещано разрешить, установка пройдет успешно, и состояние сервис-воркера изменится на 'installed'
, а затем активируется.
И это все для этой статьи, вы можете просмотреть подробную документацию, предоставленную в chrome и mdn.
Спасибо!!