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

서비스 워커의 ES 모듈

importScripts()의 최신 대안

Jeff Posnick

배경

ES 모듈 한동안 개발자가 즐겨 사용한 앱이었습니다. 또한 다양한 혜택 공유 코드를 쉽게 읽고 쓸 수 있는 범용 모듈 형식을 브라우저 및 대체 런타임(예: Node.js 동안 모든 최신 브라우저와 일부 ES 모듈 지원은 제공하지만 모두가 모든 위치를 지원하는 것은 아닙니다. 실행할 수 있습니다 특히 포드 내부에서 ES 모듈을 가져오도록 브라우저의 서비스 워커 널리 보급되기 시작했습니다.

이 문서에서는 서비스 워커에서 ES 모듈 지원의 현재 상태를 자세히 설명합니다. 일반적인 브라우저에서 발생하는 문제 외에도 피해야 할 몇 가지 문제 및 이전 버전과 호환되는 서비스 워커 코드를 제공합니다.

사용 사례

서비스 워커 내부의 ES 모듈에 대한 이상적인 사용 사례는 구성 코드를 포함하는 최신 라이브러리 또는 구성 코드를 ES 모듈을 지원해야 합니다.

이전 버전을 사용하여 수반되는 ES 모듈 이전에 이러한 방식으로 코드 공유 시도 '보편적' UMD와 같은 모듈 형식을 코드를 작성하고, 전역으로 노출된 변수로 사용할 수 있습니다.

ES 모듈을 통해 가져온 스크립트는 서비스 워커를 트리거할 수 있습니다. 업데이트 흐름이 변경되어도 행동 / importScripts()입니다.

현재 제한사항

정적 가져오기만

ES 모듈은 다음 두 가지 방법 중 하나로 가져올 수 있습니다. 정적으로 import ... from '...' 문법 사용 동적으로 import() 메서드 사용 서비스 워커 내부에서는 구문이 현재 지원됩니다

이 제한사항은 유사한 제한 사항 importScripts() 사용에 적용됩니다. importScripts()에 대한 동적 호출은 다음을 수행하지 않습니다. 모든 importScripts() 호출(서비스 워커 내에서 작업)을 서비스 워커가 작업을 완료하기 전에 완료되어야 하며, install 단계. 이 제한을 통해 브라우저가 알 수 있고 암시적으로 캐시할 수 있는 상태이므로 서비스 워커의 구현하지 않습니다.

결국 이러한 제한이 해제될 수 있으며, 모듈 가져오기 허용될 수 있습니다. 지금은 서비스 워커를 지원합니다

다른 직원은 어떤가요?

지원 대상: '전용'의 ES 모듈 작업자: new Worker('...', {type: 'module'})로 구성되는 기법이 더 널리 사용되고 있으며 2017년부터 Chrome과 Edge에서 지원되고 있으며 버전 80, Safari 최신 버전 정적 및 동적 ES 모듈 가져오기 모두 전용 작업자에서 지원됩니다.

Chrome과 Edge는 공유 작업자 버전 83부터 다른 브라우저에서도 현재 지원을 제공하고 있습니다.

맵 가져오기에 대한 지원 없음

지도 가져오기는 예를 들어 ES 모듈을 로드할 수 있는 기본 CDN의 URL입니다.

Chrome과 Edge는 버전 89 이상 가져오기가 지원되지만 서비스와 함께 사용할 수 없음 있습니다

브라우저 지원

서비스 워커의 ES 모듈은 Chrome 및 Edge에서 지원되며, 버전 91.

Safari는 기술 미리보기 122 출시, 이 기능이 안정화 버전 지원될 것입니다.

예시 코드

다음은 웹 앱의 window에서 공유 ES 모듈을 사용하는 기본적인 예입니다. 같은 ES 모듈을 사용하는 서비스 워커를 등록합니다.

// Inside config.js:
export const cacheName = 'my-cache';

// Inside your web app:
<script type="module">
  import {cacheName} from './config.js';
  // Do something with cacheName.

  await navigator.serviceWorker.register('es-module-sw.js', {
    type: 'module',
  });
</script>

// Inside es-module-sw.js:
import {cacheName} from './config.js';

self.addEventListener('install', (event) => {
  event.waitUntil((async () => {
    const cache = await caches.open(cacheName);
    // ...
  })());
});

이전 버전과의 호환성

위의 예는 모든 브라우저가 그러나 이 문서를 작성하는 시점에서는 그렇지 않습니다.

기본 지원 기능이 없는 브라우저를 수용하려면 서비스 워커 스크립트를 ES 모듈 호환 번들러를 사용해 서비스 워커를 포함하고 모든 모듈 코드를 인라인으로 포함하고 이전 브라우저와는 다릅니다. 또는 가져오려는 모듈이 이미 번들로 제공됨 IIFE 또는 UMD 형식의 경우 importScripts()입니다.

ES를 사용하는 서비스 워커의 두 가지 버전을 사용할 수 있게 되면 다른 모듈은 그렇지 않은 것으로 파악됩니다. 현재 애플리케이션이 무엇인지 확인하고 해당 서비스 워커 스크립트를 등록합니다. 최고 지원 감지를 위한 관행은 현재 수시로 변하고 있지만 개의 토론 주제: GitHub 문제 추천을 제공합니다

_사진 제공: Vlado 파우노비치(Unsplash_)