이 페이지는 Cloud Translation API를 통해 번역되었습니다.

최신 서비스 워커(기본)

Jeff Posnick

요약 정리

Chrome 68부터 서비스 워커 스크립트에 대한 업데이트를 확인하는 HTTP 요청은 HTTP 캐시에 의해 더 이상 처리되지 않을 수 있습니다. 기본적으로 제공됩니다 이는 개발자가 흔히 겪는 문제를 해결하는 것입니다. 서비스 워커 스크립트에 의도치 않은 Cache-Control 헤더를 설정하면 업데이트 지연에 영향을 줍니다

이미 /service-worker.js 스크립트를 제공하여 HTTP 캐싱을 거부한 경우 Cache-Control: max-age=0가 있는 경우 새 기본값으로 인해 변경사항이 표시되지 않을 것입니다. 있습니다.

또한 Chrome 78부터 바이트 단위 비교가 서비스 워커에 로드된 스크립트에 importScripts() 가져온 스크립트를 변경하면 서비스 워커 업데이트 흐름 최상위 서비스 워커를 변경하는 것과 똑같습니다.

배경

서비스 워커 범위 내에 있는 새 페이지로 이동할 때마다 registration.update()를 명시적으로 호출합니다. 또는 서비스 워커의 절전 모드가 해제될 때 push 또는 sync 이벤트를 통해 브라우저 동시에 navigator.serviceWorker.register() 호출을 사용하여 서비스 워커 스크립트에 대한 업데이트를 찾습니다.

이 도움말에서는 URL이 /service-worker.js이고 importScripts()에 대한 단일 호출을 포함합니다. 이는 서비스 워커 내에서 실행되는 추가 코드를 로드합니다.

// Inside our /service-worker.js file:
importScripts('path/to/import.js');

// Other top-level code goes here.

변경되는 사항

Chrome 68 이전에는 /service-worker.js의 업데이트 요청이 HTTP 캐시를 통해 이루어졌습니다. (대부분의 가져오기와 같음). 즉, 스크립트가 원래 Cache-Control: max-age=600로 전송된 경우 다음 600초 (10분) 내의 업데이트는 네트워크로 이동하지 않으므로 가장 최신 버전의 서비스 워커를 받지 못할 수도 있습니다. 하지만 max-age가 다음과 같다면 86,400 (24시간)보다 크면 사용자가 중단되는 것을 방지하기 위해 86400인 것처럼 처리됩니다. 특정 버전으로 영구히 가져올 수 있습니다

68부터 서비스 워커에 업데이트를 요청할 때 HTTP 캐시가 무시됩니다. 기존 웹 응용 프로그램에 대한 요청 빈도가 증가할 수 서비스 워커 스크립트를 지원합니다. importScripts 요청은 계속 HTTP 캐시를 통해 진행됩니다. 하지만 이것은 기본값으로만 설정되어 있습니다. 새로운 등록 옵션인 updateViaCache를 사용하면 확인할 수 있습니다

updateViaCache

이제 개발자는 navigator.serviceWorker.register()를 호출할 때 새 옵션인 updateViaCache 매개변수를 전달할 수 있습니다. 'imports', 'all', 'none'의 세 가지 값 중 하나를 사용합니다.

이 값은 브라우저의 표준 HTTP 캐시인지 여부와 그 방법을 결정합니다. 가 업데이트된 서비스 워커 리소스를 확인하기 위해 HTTP 요청을 할 때 작동합니다.

'imports'로 설정하면 /service-worker.js 스크립트이지만 가져온 스크립트를 가져올 때 참조됩니다. (이 예에서는 path/to/import.js) 이는 기본값이며 Chrome 68에서 지원됩니다.
'all'로 설정하면 최상위 /service-worker.js 스크립트 및 서비스 내부에서 가져온 모든 스크립트 작업자(예: path/to/import.js) 이 옵션은 Chrome의 이전 동작에 해당합니다. Chrome 68 이전 버전입니다.
'none'로 설정하면 최상위 /service-worker.js 또는 가져온 스크립트(예: path/to/import.js입니다.

예를 들어, 다음 코드는 서비스 워커를 등록하고 HTTP 캐시가 /service-worker.js 스크립트에 대한 업데이트를 확인할 때 /service-worker.js 내부의 importScripts()를 통해 참조되는 스크립트는 다음과 같습니다.

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js', {
    updateViaCache: 'none',
    // Optionally, set 'scope' here, if needed.
  });
}

가져온 스크립트의 업데이트 확인

Chrome 78 이전에는 모든 서비스 워커 스크립트가 importScripts() 드림 한 번만 검색될 것입니다 (먼저 HTTP 캐시에 대해 확인하거나 네트워크(updateViaCache 구성에 따라 다름) 초기 브라우저에서 내부적으로 저장하고 다시 가져오지 않습니다.

이미 설치된 서비스 워커가 변경 사항을 선택하도록 강제하는 유일한 방법은 가져온 스크립트는 일반적으로 semver 값 (예: importScripts('https://example.com/v1.1.0/index.js')) 또는 콘텐츠 (예: importScripts('https://example.com/index.abcd1234.js')) 가 가져온 URL을 변경하면 최상위 서비스 워커가 스크립트 내용이 변경되어 서비스 워커 업데이트 흐름

Chrome 78부터 최상위 조직에 대해 업데이트 검사가 수행될 때마다 서비스 워커 파일을 사용할 경우 동시에 실행되는지 여부를 판단하기 위한 가져온 스크립트의 콘텐츠가 변경되지 않았는지 확인하세요. 사용 가능 여부에 따라 Cache-Control 헤더가 사용되었습니다. 가져온 스크립트 검사는 updateViaCache가 'all' 또는 'imports'( 기본 값을 그대로 유지한 경우)하거나 updateViaCache가 'none'로 설정됩니다.

가져온 스크립트에 대한 업데이트 검사로 인해 바이트 단위 차이가 발생하는 경우 이전에 서비스 워커가 저장한 저장과 비교하여 전체 서비스 워커 업데이트 흐름을 트리거하기 때문에 작업자 파일은 동일하게 유지됩니다

Chrome 78 동작은 Firefox가 implemented한 것과 일치합니다. 클릭 몇 년 전 Firefox 56에서 실행되었습니다. Safari는 이미 다음과 같이 이 동작을 구현하고 있습니다. 있습니다.

개발자는 무엇을 해야 하나요?

/service-worker.js 스크립트를 제공하여 HTTP 캐싱을 효과적으로 거부한 경우 Cache-Control: max-age=0 (또는 유사한 값)이 있는 경우 새 기본 동작을 변경합니다.

HTTP 캐싱을 사용 설정한 상태에서 /service-worker.js 스크립트를 의도적으로 제공하는 경우 또는 호스팅 환경의 기본값이기 때문에 /service-worker.js에 대한 추가 HTTP 요청이 증가하기 시작할 수 있습니다. 이러한 요청은 HTTP 캐시에 의해 처리되곤 했습니다. 원하는 경우 Cache-Control 헤더 값이 /service-worker.js이므로 다음과 같은 경우 updateViaCache: 'all'를 명시적으로 설정해야 합니다. 서비스 워커를 등록할 수 있습니다.

이전 브라우저 버전에는 롱테일 사용자가 있을 수 있으므로, 사용 중이더라도 서비스 워커 스크립트에서 Cache-Control: max-age=0 HTTP 헤더를 계속 최신 브라우저에서 무시될 수도 있습니다.

개발자는 이 기회를 사용하여 가져온 이제 스크립트를 HTTP 캐싱에서 제거하고 updateViaCache: 'none'를 서비스 워커에 추가합니다. 등록할 수 있습니다.

가져온 스크립트 제공

Chrome 78부터 개발자는 이제 리소스가 확인되므로 importScripts()를 통해 로드된 리소스 업데이트.

추가 HTTP 트래픽을 피하려면 장기 지속 시간을 설정하세요. semver 또는 해시가 포함된 스크립트를 제공할 때 Cache-Control 헤더 URL을 대체하고 'imports'의 기본 updateViaCache 동작을 사용합니다.

또는 가져온 스크립트를 빈번하게 확인하려는 경우 Cache-Control: max-age=0와 함께 제공해야 합니다. 또는 updateViaCache: 'none'를 사용하는 것입니다.

추가 자료

'서비스 워커 수명 주기' 및 "캐싱 모범 사례 및 max-age 문제", 모두 웹에 배포하는 모든 개발자에게 권장됩니다.