서비스 워커 예제

대신 서비스 워커가 가로챌 수 있는 HTTP 요청의 최대 범위는 스크립트가 있는 폴더인 /service-worker로 시작하는 모든 요청입니다. 브라우저가 서비스 워커를 지원하는 것을 감지하더라도, 우리는 여전히 즉시 SW를 등록하지 않을 것입니다! 이 경우 페이지 로드 이벤트를 기다리고 있습니다. 참고: localStorage는 서비스 작업자 캐시와 유사한 방식으로 작동하지만 동기식이므로 서비스 작업자에서는 허용되지 않습니다. 그런 다음 응용 프로그램 다운로드, 설치 및 응용 프로그램 버전 관리 중 하나의 주요 사용 사례 중 하나인 A에서 Z까지 구현을 수행하여 PWA를 예제로 학습해 보겠습니다. 네트워크 프록시인 서비스 워커의 설치를 트리거할 스크립트 sw-register.js를 확인합니다. 다음이 등록 스크립트를 살펴 보자: 이 응답에 전달 된 응답With() 다음 응용 프로그램에 전달 될 것입니다! 우리가 볼 수 있듯이이 서비스 작업자는 로깅 프록시 역할을 합니다. 서비스 작업자에 가져오기 이벤트 리스너를 연결한 다음 event의 respondWith() 메서드를 호출하여 HTTP 응답을 하이재킹하고 자신의 마법으로 업데이트할 수 있습니다. 이 문서에서는 서비스 작업자가 오프라인 웹 응용 프로그램을 만드는 데 사용하는 것을 보여 주는 웹 사이트를 만들었습니다. 또한 서비스 근로자에 대한 몇 가지 개념과 디버깅 방법에 대해서도 설명했습니다.

난 정말 당신이 자습서를 즐길 바랍니다. 소스 코드를 가지고 플레이하려면 여기에서 찾을 수 있습니다. 이러한 모든 시나리오에서: 초기 페이지 로드 및 서비스 작업자 활성화, 새 탭 열기 또는 원래 탭 새로 고침, 모든 시나리오에 공통적인 일이 발생 합니다: 서버에서 서비스 작업자의 새 버전을 사용할 수 있는 경우 업데이트 호출() 을 통해 새 백그라운드 설치가 트리거됩니다. 설치 이벤트 리스너에서는 제공된 이벤트 개체의 waitUntil() 메서드를 사용하여 서비스 작업자의 설치 프로세스가 완료되면 브라우저에 약속을 알려줍니다. 제공된 약속은 `app-v1`이라는 이름으로 캐시를 여는 caches.open() 메서드의 반환 값입니다. 사람들이 모바일 응용 프로그램에 푸시 알림의 사용을 관련 하는 시간이 있었다. 다행히도, 그 시간이 지났습니다. 이제 데스크톱 응용 프로그램에서 푸시 알림을 구현하고 오프라인 경우에도 웹 사이트를 여는 데 도움이 되는 서비스 워커가 있습니다. 핵심은 다운로드 및 설치를 수행하는 서비스 작업자의 경우 사용자 환경의 저하를 방지하기 위해 가능한 한 늦게 등록하려는 것을 이해하는 것입니다. 브라우저는 동시에 제한된 양의 HTTP 요청만 수행하며 네트워크 용량은 너무 많습니다. 서비스 작업자는 사용자에게 초기 콘텐츠를 표시하는 데 필요한 요청을 방해할 수 있는 별도의 네트워크 요청을 수행하거나 하지 않을 수 있습니다. 당신이 붙어 얻을 경우 StackOverflow에 질문을 게시하고 우리가 문제를 추적하고 시도하고 가능한 한 많은 도움을 할 수 있도록 `서비스 노동자`태그를 사용하십시오.

즉, 라이브러리없이 ServiceWorker를 구현하는 데 걸리는 정도에 관한 것입니다, 당신은 기본 (폴리머를 사용하는 사이트뿐만 아니라) 선택적 캐싱을 배우면 어디서나 구현할 수 있습니다 – 서비스 워커가 “즉석에서”자원을 캐시 할 수있는 방법의 샘플, 리소스가 특정 기준(MIME 유형, 도메인 등)을 충족했다고 가정합니다. 캐시가 제대로 열리면 에셋을 추가합니다. 설치 방법은 자산이 저장된 후에만 완료됩니다.