Я слишком долго держался подальше от сервис-воркеров, думая, что они будут сложными и довольно бесполезными для любого нормального сайта. Действительно, зачем мне вообще хотеть обрабатывать какие-то цифры в фоновом процессе?
Оказывается, они определенно очень полезны и могут использоваться практически на каждом сайте!
Что такое сервисный работник?
Это файл Javascript, который работает в фоновом режиме веб-страницы, полностью отдельно от любого другого javascript, работающего на странице. Сервис-воркер и главная страница могут взаимодействовать друг с другом, но между ними нужно явно отправлять сообщения.
Процесс Service Worker может взаимодействовать с вашим сервером, выполнять некоторые интенсивные вычисления вне основного потока javascript пользовательского интерфейса, кэшировать файлы и информацию и перехватывать все сетевые запросы с главной страницы.
Последние два аспекта используются, когда вы используете сервис-воркер, чтобы сделать свой сайт/приложение доступным в автономном режиме, что обычно является основной причиной использования сервис-воркера.
Пример базового сервисного работника
Файлы
Вот файл, который я использую, чтобы все работало в автономном режиме на моем сайте-портфолио:
Это должно быть инициализировано в HTML-коде веб-страницы следующим образом:
Сервисный работник (первый файл выше, sw.js) может получить доступ только к чему-либо в папке, в которой он находится, или под ней, поэтому он не может получить доступ к чему-либо в родительской папке. По этой причине он находится в корне веб-папки, а не в папке js/. Если бы это было так, он мог бы получить доступ только к чему-либо в папке js/ и ни к чему в папке images/ или css/ и т. д.
cache-polyfill.js, упомянутый в строке 1 sw.js, представляет собой полифилл кеша, который дает функциональность браузерам, которые еще не поддерживают кеш.
Инструменты разработки
Вы можете использовать инструменты разработчика Chrome, чтобы проверить, правильно ли установлен сервис-воркер, а также жестко обновить сервис-воркер, когда вы вносите изменения и хотите увидеть результаты.
Они очень, очень липкие, эти сервис-воркеры, и вам нужно быть осторожным при развертывании того, что вы загрузили правильную версию.
Работа в автономном режиме
Чтобы поручить сервис-воркеру сохранять файлы для последующего использования, вы добавляете их в cache.addAll() в sw.js. Это начинается в строке 7 вышеуказанного файла.
Вам нужно явно указать каждый файл, который вы хотите сохранить, что может оказаться больше, чем вы думаете. Я использую Google Fonts на своем сайте, который, в свою очередь, загружает файлы шрифтов, которые должны быть явно установлены в сервис-воркере.
Сохранение вещей бесполезно, если вы не сделаете что-то с сохраненными файлами, и именно здесь в игру вступает код, начинающийся в строке 23.
Это перехватывает все запросы трафика, поступающие с вашей страницы на сервер. Кэш проверяется на совпадение с event.request в строке 26, затем, если есть ответ, он возвращается, а если нет, то на ваш сервер выполняется вызов fetch() для ресурса.
Возможные проблемы
Основная проблема заключается в количестве файлов, которые вы должны хранить и отслеживать. Страница, для которой я использую это, действительно очень проста и даже не содержит изображений. Создание системы для управления вашими веб-страницами в автономном режиме потребуется для чего-то большего, чем тривиальная страница.
Еще одна проблема, с которой я столкнулся, заключалась в том, что встроенный скрипт нарушал Политику безопасности контента (CSP) моих серверов. Он запрещал любые теги сценариев на странице, что мешало установке работника службы. Я хотел сохранить эту часть CSP, поэтому мне пришлось создать хэш SHA-256 кода в теге сценария и явно добавить его в мой CSP.
Заворачивать
Запустить и создать базового работника службы очень просто. Однако в реальной жизни вещи могут очень быстро стать большими и громоздкими. Это только самое основное из сервис-воркеров, но оно показывает основные автономные концепции кэширования файлов, а затем их повторного обслуживания, когда это необходимо.
Если вам нужна дополнительная порция информации о сервисных работниках, это сообщение в блоге Джереми Кейта отлично подойдет. Это дает вам минимально жизнеспособного работника службы, который отслеживает все запросы с вашего веб-сайта и автоматически кэширует их. Затем они воспроизводятся пользователю, когда он снова запрашивает страницу в автономном режиме, что дает вам возможности автономной работы с минимальной настройкой.
