source

react js의 서비스 워커가 뭐죠?

factcode 2023. 4. 4. 22:29
반응형

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에 따르면 앱 생성-리액트-

Service workers를 통해 create-module-app과 함께 도입됩니다.SWPrecacheWebpackPlugin.

캐시 우선 전략으로 서버 워커를 사용하면 네트워크가 네비게이션 요구를 충족하기 위한 병목현상이 아니므로 퍼포먼스가 향상됩니다.단, 이전에 캐시된 리소스는 백그라운드에서 업데이트되므로 개발자(및 사용자)는 "N+1" 페이지를 방문했을 때만 배포된 업데이트를 볼 수 있습니다.

문의처register service worker새 앱에서는 기본적으로 활성화되어 있지만 언제든지 제거할 수 있습니다. 그런 다음 일반 동작으로 돌아갑니다.

간단히 말하면 브라우저가 백그라운드에서 실행되며 웹 페이지나 DOM과는 전혀 관련이 없으며 즉시 사용할 수 있는 기능을 제공하는 스크립트입니다.또한 자산 및 기타 파일을 캐시하여 사용자가 오프라인 상태이거나 네트워크 속도가 느린 경우에도 캐시할 수 있습니다.

이러한 기능에는 네트워크 요청 프록시, 푸시 알림 및 백그라운드 동기 등이 있습니다.서비스 워커는 사용자가 풍부한 오프라인 경험을 할 수 있도록 합니다.

서비스 워커는 클라이언트와 서버 사이에 있으며 서버에 대한 모든 요구는 서비스 워커를 통과하는 것으로 간주할 수 있습니다.기본적으로는 중개인입니다.모든 요구는 서비스 워커를 통과하기 때문에 이러한 요구를 즉시 대행 수신할 수 있습니다.

여기에 이미지 설명 입력

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

  1. HTTPS 를 로 합니다. 로컬테스트를 하게 하기 이 은 「HTTPS」, 「HTTPS」, 「HTTPS」, 「HTTPS」, 「HTPS」, 「HTPS」에는 되지 않습니다.localhost이는 서비스 워커가 웹 어플리케이션과 서버의 중간에서 사람처럼 행동하기 때문에 보안상의 이유로 발생합니다.

  2. With React App Service Worker가 실행 중인 경우와 같이 운영 환경에서만 사용되도록 설정됨npm run build.

서비스 워커는 프로그레시브 개발을 지원합니다.Create React App과 관련된 유용한 리소스는 웹 사이트에서 찾을 수 있습니다.

언급URL : https://stackoverflow.com/questions/49314386/what-is-service-worker-in-react-js

반응형