서비스워커 예제

서비스 작업자에 대한 코드는 당사 웹 사이트에서 주기적으로 다운로드되며 전체 수명 주기 관리 프로세스가 있습니다. 서비스 워커의 이 초기 활성화는 불일치의 가능성을 가져온다: 서비스 워커 v5에 의해 가로채는 런타임 HTTP 요청을 가지고 버전 v4에서 제공하는 페이지로 끝날 수 있습니다. 타이밍 조건에 따라 HTML/CSS/JS 아티팩트의 예측할 수 없는 조합으로 인해 페이지가 끊어지는 상황을 재현하기 어렵고, 일부는 네트워크에서 나오고 일부는 캐시에서 나올 수 있기 때문입니다. 서비스 작업자가 사용하고 있는지 를 우리가 볼 수 있듯이, 이번에는 브라우저가 이전에 백그라운드에서 설치 한 서비스 워커 v2를 활성화하고 v2는이 페이지에서 모든 네트워크 요청을 가로 채서 V2가 이제 활성화되었습니다! 브라우저가 지정된 범위에 대한 서비스 워커의 새 버전을 식별하면 설치 단계가 트리거되어 설치 수명 주기 이벤트가 방출됩니다. 오늘, ServiceWorker는 구글 크롬에서 브라우저 지원, 오페라, 그리고 구성 플래그 뒤에 파이어 폭스에서. 마이크로 소프트는 곧 그것에 작동 할 가능성이 높습니다. 아직 애플의 사파리에서 공식 단어가 없습니다. 버전 V4의 설치를 트리거하기 위해 가장 먼저 해야 할 일은 서비스 워커에 대한 작은 변경(예: 버전 번호 증분)을 수행하는 것입니다. 을 사용하면 이미 HTTPS를 구현한 것입니다.

이 시점에서 지원 브라우저 /service-worker.js에 대 한 요청을 발급 하 고 작업자를 설치 하려고 합니다. 레시피는 빠른 응답을 제공하기 위해 캐시에서 응답하는 서비스 작업자를 제공하고 네트워크에서 캐시 항목을 업데이트합니다. 네트워크 응답이 준비되면 UI가 자동으로 업데이트됩니다. WindowClient.navigate() 사용 – 서비스 작업자가 제어하는 웹 페이지 클라이언트가 지정된 URL로 이동하도록 하는 방법을 보여 주었습니다. 서비스 작업자의 디버깅은 초보자에게는 다소 까다롭습니다. 여전히 실험이기 때문에 활성화해야 합니다. 이렇게 하려면 다음 단계를 따르십시오: 서비스 작업자가 이전에 설치되었지만 새로 고침 또는 페이지 로드에서 새 버전의 작업자를 사용할 수 있는 경우 새 버전은 백그라운드에서 설치되지만 아직 활성화되지 는 않습니다. 이전 서비스 작업자를 여전히 사용 중인 로드된 페이지가 더 이상 없는 경우에만 활성화됩니다. 이러한 페이지가 아직 로드되지 않는 즉시 새 서비스 작업자가 활성화됩니다. 핵심은 다운로드 및 설치를 수행하는 서비스 작업자의 경우 사용자 환경의 저하를 방지하기 위해 가능한 한 늦게 등록하려는 것을 이해하는 것입니다.

서비스 작업자의 경우 설치 단계에서 이미지를 캐시하려는 경우 몇 가지 옵션이 있습니다.