Кто ты такой, Service Worker?
Перевод статьи Mariko Kosaka “Service Worker, what are you ?” Опубликован под лицензией CC BY-NC-SA 4.0.
Я: Ты кто такой, Service worker?
Service Worker: Я программируемый сетевой проксификатор.
Я: Чего?..
Service Worker звучит круто, но я не очень то понимаю что это
В июле 2015 я участвовала в конференции по JavaScript, проходившей в городе Остин, штат Техас. На сцене — Джейк Арчибальд, которого тогда я знала как забавного британского парня, любителя пошутить на “туалетную тему” 🚽. Уже потом я поняла, что он вполне себе “важный чувак” и является одним из разработчиков спецификации Service Worker’ов.
И вот по ходу истории об UX-откровении, настигнувшем его в общественном туалете, Джейк рассказал залу о новой штуке, названной Service Worker. Штуке, позволяющей вашему веб-сайту вести себя как нативное приложение (по крайней мере тогда я поняла его именно так).
То, о чем он говорил, звучало невероятно, и мне захотелось попробовать технологию на своем проекте. Сначала было немного трудно понять что это… Это не библиотека, не новый HTML элемент и даже не новый JavaScript синтаксис, а такие термины как “кэш” или “прокси” всегда приводили меня в замешательство. Пытаясь разобраться в принципах работы Service Worker’а, я делала пометки на бумаге, и мне в голову пришла идея сравнить его с “пришельцем, которого вы приглашаете пожить в вашем браузере”. Звучит странно? Тогда давайте попробуем разобраться.
Service Worker — пришелец во вселенной веб-браузера.
Представьте: ваш браузер — это планета (наподобие Земли), частица большой галактики вашего компьютера. Люди на этой планете разговаривают на своих языках, таких как HTML, CSS и JavaScript, благодаря которым они формируют сообщества — веб страницы.
И если вы веб-разработчик, вы должны хорошо разбираться как функционируют эти сообщества: начиная от их разнообразных элементов и DOM дерева и заканчивая режимами обновления данных на вашем сайте.
На этой планете (в браузере) был придуман способ общения с внешним миром, который позволил запрашивать информацию из других галактик (серверов). Его назвали Hyper Text Transfer Protocol. Именно так ваша планета-браузер превратилась в копилку милых картинок с котятами и ненужных твитов. И именно так она смогла привлечь к себе миллионы постоянных пользователей.
HTTP похож на невероятную волшебную вещицу, однако, чтобы она работала, вам нужен Интернет. Представим его как длинный многоколенчатый трубопровод. Интернет обеспечивает нам необходимое сообщение с удаленными серверами-галактиками. Длина такого трубопровода зависит от того, сколько вы платите обслуживающей организации (интернет-провайдеру), и от качества инфраструктуры в вашем регионе. Если ваша труба узкая или слишком длинная, то и данные из других галактик поступают на вашу планету дольше.
Но дело в том, что Интернет порой оказывается и вовсе недоступным для вашего браузера. В такие периоды ваша планета возвращается в доисторическую эпоху, и никакие из современных вещей вам не доступны, а ваш браузер показывает картинки динозавров, как напоминание о “старых добрых”.
Но подождите! Service Worker уже здесь, чтобы помочь!
Service Worker — это нечто, что находится между вашей планетой и трубой -Интернетом. Вместо того, чтобы делать запросы напрямую в удаленные галактики, вы отправляете их Service Worker’у с просьбой немного поработать на вас. Лично мне это напомнило пришельца, сидящего внутри летающей тарелки.
Три вещи, которые следует знать о вашем новом приятеле.
- Вы должны “позвать” Service Worker, чтобы он начал работать. До тех пор, пока вы этого не сделали, нет никакого Service Worker’a в вашем общении с сетью. Но как только вы “попросили” его участия, он будет работать до тех пор, пока не решит, что больше ему нечем вам помочь. И нет никакого .terminate(), которому вы возможно привыкли, работая с Web Worker’ами, чтобы вручную отключить его.
- Service Worker существует отдельно от веб-страницы. Обычно, при закрытии браузера любая активность заканчивается: вы не скачаете видео, не прочитаете новую главу книги… Но по какому-то волшебству, даже когда браузер закрыт и “отдыхает”, ваш новый приятель может включаться и выключаться самостоятельно, если это необходимо! И даже вы (разработчик, способный делать множество классных вещей на вашей планете-браузере) не можете контролировать жизненный цикл Service Worker’а. И это вторая причина, почему он напоминает мне пришельца.
- Как было сказано выше, Service Worker существует вне браузера, а значит не может изменять или использовать элементы внутри последнего. Вы, со своей стороны, не имеете доступа ни к window, ни к document внутри его кода.
Итак, какого типа работу может выполнить для вас Service Worker?
1. Взаимодействие с кэшем
Вы можете попросить Service Worker отслеживать fetch events и сохранять определенные ресурсы в кэше. Позже, когда эти ресурсы понадобятся, он передаст их вашему сайту, а делать внешний HTTP-запрос будет уже не нужно. Таким образом, если необходимые данные предварительно закэшированы, браузер сможет показывать контент веб-страниц даже при отсутствии интернет-подключения.
2. Push-уведомления
Благодаря магии, по которой Service Worker работает даже при выключенном браузере, вы можете всегда быть в курсе, получая push-уведомления.
3. Фоновая синхронизация
Активность при закрытом браузере означает еще и то, что Service Worker будет работать, не отвлекая внимания пользователя на текущие процессы. Скажем, вы используете веб-страницу, будучи offline, но вам необходимо отправить файл. Так вот, Service Worker сам отправит файл на сервер, когда интернет станет доступен снова.
Надеюсь, что данная статья пролила немного света на тему Service Worker’ов. Те, кто желают погрузиться в код, смотрите руководство Джейка Арчибальда Offline-cookbook.
