React js의 서비스 워커 란?

반응 앱을 만들 때 서비스 워커가 기본적으로 호출됩니다. 서비스 워커가 사용되는 이유는 무엇입니까? 기본 호출의 이유는 무엇입니까?

애플리케이션에 서비스 워커가 필요하지 않을 수 있습니다. create-react-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에 따르면 create-react-app

Service workers를 통해 create-react-app에 도입되었습니다 SWPrecacheWebpackPlugin.

캐시 우선 전략과 함께 서버 작업자를 사용하면 네트워크가 더 이상 탐색 요청을 수행하는 데 병목 현상이 발생하지 않기 때문에 성능상의 이점이 있습니다. 그러나 이전에 캐시 된 리소스가 백그라운드에서 업데이트되므로 개발자 (및 사용자)는 페이지에 대한 "N + 1"방문시 배포 된 업데이트 만 볼 수 있습니다.

에 대한 호출 register service worker은 새 앱에서 기본적으로 활성화되어 있지만 언제든지 제거 할 수 있으며 일반 동작으로 돌아갑니다.

간단하고 평이한 말로 브라우저가 백그라운드에서 실행되고 웹 페이지 또는 DOM과 아무런 관련이 없으며 즉시 사용 가능한 기능을 제공하는 스크립트입니다. 또한 사용자가 오프라인이거나 느린 네트워크에있을 때 자산 및 기타 파일을 캐시하는 데 도움이됩니다.

이러한 기능 중 일부는 프록시 네트워크 요청, 푸시 알림 및 백그라운드 동기화입니다. 서비스 워커는 사용자에게 풍부한 오프라인 경험을 제공합니다.

서비스 워커는 클라이언트와 서버 사이에있는 사람으로 생각할 수 있으며 서버에 대한 모든 요청은 서비스 워커를 통과합니다. 기본적으로 중개인입니다. 모든 요청이 서비스 워커를 통과하므로 이러한 요청을 즉석에서 가로 챌 수 있습니다.

고려해야 할 서비스 워커에 대한 두 가지 중요한 고려 사항을 추가하고 싶습니다.

1. 서비스 워커에는 HTTPS가 필요합니다. 하지만 로컬 테스트를 사용하려면이 제한이 localhost. 이는 서비스 워커가 웹 애플리케이션과 서버 사이의 중간에 있는 사람 처럼 행동하기 때문에 보안상의 이유 입니다.

2. 으로는 앱 반작용 만들기 실행하는 경우, 예를 들어, 서비스 노동자는 생산 환경에서 사용할 수 있습니다 npm run build.

Service Worker는 프로그레시브 웹 앱 개발을 돕기 위해 여기에 있습니다. Create React App의 맥락에서 이에 대한 좋은 리소스는 여기 웹 사이트 에서 찾을 수 있습니다 .