Что такое сервис-воркер в React JS

93

При создании реагирующего приложения по умолчанию вызывается сервисный работник. Почему используется сервис воркер? В чем причина вызова по умолчанию?

javascript reactjs service-worker юзеры
источник

Ответы:

105

Возможно, вам не понадобится сервисный работник для вашего приложения. Если вы создаете проект с помощью приложения create-response-app, оно вызывается по умолчанию.

Сервисные работники хорошо объяснены в этой статье. Подводя итог

A service worker- это скрипт, который ваш браузер запускает в фоновом режиме, отдельно от веб-страницы, открывая доступ к функциям, которым не нужны веб-страница или взаимодействие с пользователем. Сегодня они уже включают в себя такие функции , как push notificationsи background syncи есть ability to intercept and handle network requests, в том числе programmatically managing a cache of responses.

В будущем сервис-воркеры могут поддерживать другие вещи, такие как periodic syncили geofencing.

Согласно этому PR создать-реагировать-приложение

Service workersвводятся с помощью create-response-app через SWPrecacheWebpackPlugin.

Использование рабочего сервера со стратегией «сначала кэш» дает преимущества в производительности, поскольку сеть больше не является узким местом для выполнения запросов навигации. Однако это означает, что разработчики (и пользователи) будут видеть развернутые обновления только при «N + 1» посещении страницы, поскольку ранее кэшированные ресурсы обновляются в фоновом режиме.

Вызов register service workerвключен по умолчанию в новых приложениях, но вы всегда можете удалить его, и тогда вы вернетесь к обычному поведению.

Шубхам Хатри
источник
2
на данный момент сгенерированное приложение responsejs имеет код sw, но в комментарии говорится, что функция регистрации не вызывается. Итак, вопрос в том, где я могу это назвать?
Даниил Яицков
@ DaneelS.Yaitskov, вы можете вызвать его в файле index.js верхнего уровня или аналогичном.
Сиддхартха
1
@Siddhartha, не могли бы вы привести конкретный пример и, возможно, обновить ответ? Я нашел это очень полезным, но мне не хватает последних деталей. Спасибо.
Тед Стрезен-Рейтер,
17

Проще говоря, это сценарий, который браузер запускает в фоновом режиме и не имеет никакого отношения к веб-страницам или DOM, и предоставляет готовые функции. Это также помогает вам кэшировать ваши активы и другие файлы, когда пользователь находится в автономном режиме или в медленной сети.

Некоторые из этих функций - проксирование сетевых запросов, push-уведомления и фоновая синхронизация. Сервисные работники гарантируют, что у пользователя есть богатый опыт автономной работы.

Вы можете думать о сервис-воркере как о ком-то, кто сидит между клиентом и сервером, и все запросы, которые отправляются на сервер, проходят через сервис-воркер. В основном посредник. Поскольку все запросы проходят через сервис-воркер, он способен перехватывать эти запросы на лету.

введите описание изображения здесь

Nikz
источник
6

Я хотел бы добавить два важных момента, которые следует учитывать в отношении Service Workers:

  1. Сервисным работникам требуется HTTPS. Но для включения локального тестирования это ограничение не распространяется на localhost. Это сделано из соображений безопасности, поскольку Service Worker действует как человек посередине между веб-приложением и сервером.

  2. С Create React App Service Worker включается только в производственной среде, например, при запуске npm run build.

Сервисный работник здесь, чтобы помочь в разработке прогрессивного веб-приложения . Хороший ресурс об этом в контексте приложения Create React можно найти на их веб-сайте здесь .

Ануар
источник