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

Chrome 71에서 제공되는 cache.addAll() 및 importScripts()의 미세 조정

Jeff Posnick

서비스 워커와 Cache Storage API를 사용하는 개발자는 Chrome 71에서 출시될 예정입니다 두 가지 변경사항 모두 사양 및 기타 브라우저에 적용됩니다.

비동기 importScripts() 허용 안함

importScripts() 드림 기본 서비스 워커 스크립트에 현재 실행을 일시 중지하고, 현재 전역 범위에서 완료될 때까지 실행합니다. 이 과정을 완료하면 기본 서비스 워커 스크립트가 실행을 재개합니다. importScripts()는 다음과 같은 경우 유용합니다. 조직상의 이유로 기본 서비스 워커 스크립트를 작은 조각으로 나누는 것이 좋습니다. 타사 코드를 가져와 서비스 워커에 기능을 추가할 수 있습니다.

브라우저는 '다운로드 및 동기식 실행' 시 발생할 수 있는 성능 문제를 완화하려고 합니다. 코드' importScripts()를 통해 가져온 모든 항목을 자동으로 캐시합니다. 즉, 가져올 때, 가져온 코드를 실행하는 데 필요한 오버헤드가 거의 없습니다.

하지만 이 기능이 작동하려면 브라우저에서 코드 가져옴 서비스 워커의 첫 번째 설치를 참조하세요. 서비스 워커 사양에 따라, importScripts() 호출은 최상위 수준 동기 실행 중에만 작동해야 합니다. 서비스 워커 스크립트를 사용하거나 필요한 경우 install 핸들러 내에서 비동기식으로 처리합니다.

Chrome 71 이전에는 install 핸들러 외부에서 importScripts()를 비동기식으로 호출하면 다음과 같았습니다. 있습니다 Chrome 71부터 런타임 예외가 발생합니다 (이전에 install 핸들러에 동일한 URL을 가져온 경우 제외). 다른 브라우저의 동작과 일치하는지 확인합니다.

다음과 같은 코드 대신:

// This only works in Chrome 70 and below.
self.addEventListener('fetch', event => {
  importScripts('my-fetch-logic.js');
  event.respondWith(self.customFetchLogic(event));
});

서비스 워커 코드는 다음과 같습니다.

// Move the importScripts() to the top-level scope.
// (Alternatively, import the same URL in the install handler.)
importScripts('my-fetch-logic.js');
self.addEventListener('fetch', event => {
  event.respondWith(self.customFetchLogic(event));
});

cache.addAll()에 전달되는 반복 URL 지원 중단

서비스 워커와 함께 Cache Storage API를 사용하는 경우 관련 사양을 준수하는 Chrome 71 동일한 URL이 여러 번 전달됩니다. cache.addAll(), 호출에서 반환된 프라미스를 거부해야 한다고 지정합니다.

Chrome 71 이전에는 이러한 기능이 감지되지 않아 중복 URL이 사실상 무시되었습니다.

Chrome 콘솔의 경고 메시지 스크린샷 — </ph> Chrome 71부터 콘솔에 로깅된 경고 메시지가 표시됩니다.

이 로깅은 Chrome 72의 전신으로, 단순히 로깅된 경고 대신 중복 URL이 cache.addAll()가 거부됩니다. 프로미스 체인의 일부로 cache.addAll()를 호출하는 경우 전달 대상 InstallEvent.waitUntil(), 일반적인 관행처럼, 거부하면 서비스 워커가 설치되지 않을 수 있습니다.

다음과 같은 문제가 발생할 수 있습니다.

const urlsToCache = [
  '/index.html',
  '/main.css',
  '/app.js',
  '/index.html', // Oops! This is listed twice and should be removed.
];

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open('my-cache').then(cache => cache.addAll(urlsToCache))
  );
});

이 제한사항은 cache.addAll()에 전달되는 실제 URL에만 적용되며 결국 '/' 및 '/index.html'와 같이 URL이 다른 두 개의 동등한 응답이 됩니다. 거부가 트리거되지 않습니다.

광범위하게 서비스 워커 구현 테스트

서비스 워커는 폭넓게 구현됨 모든 주요 "evergreen" 브라우저( 확인할 수 있습니다. 여러 브라우저에서 프로그레시브 웹 앱을 정기적으로 테스트하거나 사용하지 않는 사용자가 많다면 이러한 앱은 이미 코드를 업데이트했습니다. 하지만 이 부분을 모르고 있을 가능성이 있는 경우 Chrome의 동작을 전환하기 전에 변경사항을 안내하고자 합니다.