В настоящее время разработка веб-страницы может включать в себя массу технологий, включая сложную логику JavaScript, множественные зависимости, выборку API, данные BLOB и многое другое. Все это может сказаться на производительности вашего любовно созданного веб-сайта. Однако существует несколько способов оптимизировать производительность веб-страницы, например, гидратация и отложенная загрузка. И вот здесь на помощь приходят сервис-воркеры с собственным интерфейсом кэширования, который немного упрощает эту оптимизацию.
Обзор :
Сервисные работники — это активы JavaScript, которые действуют как прокси между браузерами и серверами, предлагая невероятную полезность и решая сложные проблемы. Они могут повысить надежность вашего приложения, предоставив автономный доступ и повысив производительность страницы.
Сервисные работники используют подход прогрессивного улучшения, что означает, что процесс повышения происходит в несколько этапов. При самом первом посещении вашей веб-страницы они устанавливаются со своими базовыми функциями. После первоначальной установки они работают в фоновом режиме для повышения надежности и скорости.
Более того, сервис-воркеры являются усовершенствованием существующих веб-сайтов, а это означает, что если браузер, который не поддерживает сервис-воркеров, посещает страницу, базовая функциональность веб-страницы не сломается.
Пример: подумайте, что происходит, когда вы заходите в магазин и загружаете приложение.
- Делается запрос на загрузку приложения.
- Приложение скачивается и устанавливается.
- Приложение готово к использованию и может быть запущено.
- Приложение обновляется для новых выпусков.
Точно так же эта служба устанавливается при первом посещении и постепенно улучшается благодаря интерфейсу кеша.
Неотъемлемым аспектом технологии сервис-воркеров является интерфейс кэширования, представляющий собой механизм кэширования, полностью отдельный от кэша HTTP. Доступ к этому интерфейсу кеша можно получить как в рамках сервисного работника, так и в рамках основного потока, и его можно программировать с помощью JavaScript, что открывает массу возможностей. Это означает, что вы можете использовать его на основе любой логики, которая лучше всего подходит для данного веб-сайта. Например:
- Обновляйте устаревшие или старые данные в фоновом режиме, перехватывая пользовательский опыт.
- Сохраняйте разметку страницы в кэше, чтобы пользователь мог иметь доступ в автономном режиме
- Храните статические ресурсы в кэше и обслуживайте их при каждом последующем запросе.
- Потоковое частичное содержимое из сети и сборка его с помощью оболочки приложения.
Это некоторые из примеров стратегий кэширования, которые делают возможным работу в автономном режиме и могут обеспечить более высокую производительность без каких-либо проверок повторной проверки с высокой задержкой.
Сервисные работники управляются событиями, они зависят от обратных вызовов, а передача данных по сети по своей природе асинхронна. Требуется время, чтобы запросить актив, чтобы сервер ответил и загрузил сервисные работники, которые компенсируют эту асинхронность через API, управляемый событиями, используя обратные вызовы для событий. такой как:
- Когда сервис-воркер устанавливает
- Когда сервис-воркер активируется
- Когда сервис-воркер обнаруживает сетевой запрос.
Эти события можно зарегистрировать с помощью знакомого API addEventListener.
Предварительное кэширование и кэширование во время выполнения
Интерфейс кэширования сервис-воркеров имеет две концепции кэширования: предварительное кэширование и кэширование во время выполнения. Каждый из них является центральным для преимуществ, которые может предоставить сервисный работник.
Предварительное кэширование — это процесс предварительного кэширования ресурсов, обычно во время установки сервис-воркера. Во время этого процесса ключевые статические активы и материалы, необходимые для автономного доступа, могут быть загружены и сохранены в экземпляре кэша. Это также может помочь повысить скорость страницы для последующих страниц, требующих предварительно кэшированных ресурсов.
С другой стороны, кэширование во время выполнения — это когда стратегия кэширования применяется к ресурсам по мере их запроса из сети во время выполнения. Это помогает гарантировать автономный доступ к страницам и ресурсам, которые пользователь уже посетил, что делает его похожим на приложение.
В сочетании эти подходы к использованию интерфейса кеша в сервис-воркере обеспечивают огромные преимущества для пользователя и могут обеспечить поведение, подобное приложению, для обычной веб-страницы.
Сервисные работники изолированы от основного потока в постоянно меняющейся проблеме для Интернета, и с точки зрения пользователя это зависит от устройства и его высокоскоростного интернета. Трудно сделать высокопроизводительный веб-сайт, а сервисные работники ориентированы на пользователя, что означает, что они не основной поток для снижения производительности, которую они выполняют в фоновом режиме, не забирая ресурсы у JS.
Объем и жизненный цикл:
Область действия сервис-воркеров зависит от их местоположения в директории, если она выполняется в '/subdir/index.html' и находится в '/subdir/sw.js'. тогда его областью действия является «/subdir/» и последующие папки.
чтобы увидеть это в действии:
- Перейдите к https://service-worker-scope-viewer.glitch.me/subdir/index.html. Появится сообщение о том, что сервис-воркер не контролирует страницу. Однако на этой странице регистрируется сервис-воркер из
https://service-worker-scope-viewer.glitch.me/subdir/sw.js. - Перезагрузите страницу. Поскольку сервис-воркер был зарегистрирован и теперь активен, он контролирует страницу. Будет видна форма, содержащая область действия сервис-воркера, текущее состояние и его URL-адрес. Примечание: необходимость перезагрузки страницы не имеет ничего общего с областью действия, а скорее с жизненным циклом сервис-воркера, который будет объяснен позже.
Независимо от области действия сервис-воркер, контролирующий страницу, может перехватывать любые сетевые запросы, в том числе запросы на ресурсы из разных источников. Область действия ограничивает, какие страницы контролируются сервис-воркером, а не запросы, которые он может перехватывать.
жизненный цикл:
- регистр
Регистрация — это начальный этап жизненного цикла сервис-воркера. Когда регистрация начинается, сервис-воркеру присваивается состояние «установка». После завершения регистрации начинается установка.
- Монтаж
Сервисный работник запускает событие установки после регистрации. install вызывается только один раз для каждого работника службы и не будет запускаться снова, пока он не будет обновлен.
- Активация
Если регистрация и установка прошли успешно, сервис-воркер активируется, и его состояние становится активным. Работа может выполняться во время активации в событии активации сервис-воркера. Типичная задача в этом событии — удалить старые кэши.
- Обновлять
Предполагая, что URL-адрес или область действия сервис-воркера не изменились, текущий установленный сервис-воркер обновляется до новой версии только в том случае, если его содержимое изменилось.
Тем не менее, одно исключение может быть, если сеансы на веб-сайте продолжительны. Это может произойти в одностраничных приложениях, где запросы навигации возникают редко. В таких ситуациях в основном потоке может быть запущено ручное обновление.
- Монтаж
Следует отметить, что обновленный сервис-воркер устанавливается вместе с предыдущим. Это означает, что старый сервис-воркер по-прежнему контролирует все открытые страницы, а после установки новый переходит в состояние ожидания, пока не будет активирован.
- Активация
Когда обновленный сервис-воркер установлен и заканчивается фаза ожидания, он активируется, а старый сервис-воркер отбрасывается. Обычная задача, выполняемая в обновленном событии активации сервисного работника, — это удаление старых кешей.
И этот жизненный цикл продолжается. Я надеюсь, что было чему поучиться, пожалуйста, поделитесь своими мыслями и поправьте меня в комментарии, если я ошибаюсь.
