sw-precache 또는 sw-toolbox에서 이전

이전에 sw-precache 또는 sw-toolbox를 사용한 개발자는 Workbox 라이브러리 제품군으로 쉽게 업그레이드할 수 있습니다. Workbox로 업그레이드하면 디버깅 및 개발자 편의성이 개선된 확장 가능한 최신 서비스 워커 환경을 사용할 수 있습니다.

기존 구성 수정

다음 옵션 중 하나로 구성된 sw-precache를 사용하는 경우 Workbox로 이전할 때 다음 변경사항을 고려해야 합니다.

이름이 변경된 옵션

dynamicUrlToDependencies 구성 매개변수의 이름이 templatedURLs로 변경되었습니다.

staticFileGlobs 구성 매개변수의 이름이 globPatterns로 변경되었습니다.

runtimeCaching 구성 매개변수는 기본 Workbox 모듈에 사용된 이름에 해당하는 업데이트된 옵션 집합을 사용합니다. 이름이 변경된 항목을 보여주는 sw-precache 구성은 다음과 같습니다.

runtimeCaching: [{
  urlPattern: /api/,
  handler: 'fastest',
  options: {
    cache: {
      name: 'my-api-cache',
      maxEntries: 5,
      maxAgeSeconds: 60,
    },
  },
}],

다음 Workbox 구성과 동일합니다.

runtimeCaching: [{
  urlPattern: /api/,
  // 'fastest' is now 'StaleWhileRevalidate'
  handler: 'StaleWhileRevalidate',
  options: {
    // options.cache.name is now options.cacheName
    cacheName: 'my-api-cache',
    // options.cache is now options.expiration
    expiration: {
      maxEntries: 5,
      maxAgeSeconds: 60,
    },
  },
}],

지원 중단된 옵션

익스프레스 스타일 와일드 카드 경로는 더 이상 지원되지 않습니다. runtimeCaching 구성 또는 sw-toolbox에서 직접 Express 스타일 와일드 카드 경로를 사용했다면 Workbox를 사용할 때 이에 상응하는 정규 표현식 경로로 이전하세요.

sw-precache 마이그레이션

sw-precache CLI에서 workbox-cli로

sw-precache 명령줄 인터페이스를 사용하는 개발자는 명령어를 수동으로 실행하거나 npm scripts 기반 빌드 프로세스의 일부로 실행하는 경우 workbox-cli 모듈을 사용하는 것이 가장 쉬운 이전 방법입니다. workbox-cli를 설치하면 workbox라는 바이너리에 액세스할 수 있습니다.

sw-precache CLI에서는 명령줄 플래그 또는 구성 파일을 통한 구성을 지원하지만 workbox CLI에서는 CommonJS module.exports를 사용하여 구성 파일에 모든 구성 옵션을 제공해야 합니다.

workbox CLI는 여러 가지 모드를 지원합니다. workbox --help를 사용하여 모두 확인할 수 있습니다. 하지만 sw-precache의 기능과 가장 일치하는 모드는 generateSW입니다. 따라서

$ sw-precache --config='sw-precache-config.js'

로 표현될 수 있습니다

$ workbox generateSW workbox-config.js

sw-precache 노드 모듈에서 workbox-build 노드 모듈로

gulp/Grunt 워크플로의 일부로 또는 맞춤 node 빌드 스크립트 내에서 sw-precache용 node API를 사용하는 개발자는 workbox-build node 모듈로 전환하여 이전할 수 있습니다.

workbox-build 모듈의 generateSW() 함수가 sw-precache 모듈의 write() 함수와 가장 유사합니다. 한 가지 중요한 차이점은 generateSW()는 항상 Promise를 반환하는 반면 이전 write() 함수는 콜백과 Promise 기반 인터페이스를 모두 지원했다는 점입니다.

다음과 같은 gulp 사용

const swPrecache = require('sw-precache');
gulp.task('generate-service-worker', function () {
  return swPrecache.write('service-worker.js', {
    // Config options.
  });
});

다음으로 변경할 수 있습니다.

const workboxBuild = require('workbox-build');
gulp.task('generate-service-worker', function () {
  return workboxBuild.generateSW({
    // Config options.
  });
});

sw-precache-webpack-plugin에서 Workbox webpack 플러그인으로

webpack 빌드 프로세스의 일부로 sw-precache-webpack-plugin를 사용하는 개발자는 workbox-webpack-plugin 모듈 내에서 GenerateSW 클래스로 전환하여 이전할 수 있습니다.

workbox-webpack-plugin는 webpack 빌드 프로세스와 직접 통합되며 지정된 컴파일에서 생성된 모든 애셋에 관해 '알고' 있습니다. 즉, 많은 사용 사례에서 추가 구성 없이 workbox-webpack-plugin의 기본 동작을 사용하고 sw-precache-webpack-plugin에서 제공하는 것과 동등한 서비스 워커를 가져올 수 있습니다.

const SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin');
const webpackConfig = {
  // ...
  plugins: [
    new SWPrecacheWebpackPlugin({
      dontCacheBustUrlsMatching: /\.\w{8}\./,
      filename: 'service-worker.js',
    }),
  ],
};

다음으로 변경할 수 있습니다.

const {GenerateSW} = require('workbox-webpack-plugin');
const webpackConfig = {
  // ...
  plugins: [
    new GenerateSW({
      // Config options, if needed.
    }),
  ],
};

sw-toolbox 이전

수동으로 작성된 sw-toolbox에서 workbox-sw로 마이그레이션

sw-precache의 runtimeCaching 옵션을 통해 암시적으로 사용하는 대신 sw-toolbox를 직접 사용하고 있다면 Workbox로 이전할 때 동등한 동작을 얻으려면 수동으로 조정해야 합니다. 자세한 내용은 workbox-routing 및 workbox-strategies 모듈에 관한 문서를 참고하세요.

다음은 이전을 안내하는 데 도움이 되는 몇 가지 코드 스니펫입니다. 이 sw-toolbox 코드는 다음과 같습니다.

importScripts('path/to/sw-toolbox.js');

// Set up a route that matches HTTP 'GET' requests.
toolbox.router.get(
  // Match any URL that contains 'ytimg.com', regardless of
  // where in the URL that match occurs.
  /\.ytimg\.com\//,

  // Apply a cache-first strategy to anything that matches.
  toolbox.cacheFirst,

  {
    // Configure a custom cache name and expiration policy.
    cache: {
      name: 'youtube-thumbnails',
      maxEntries: 10,
      maxAgeSeconds: 30,
    },
  }
);

// Set a default network-first strategy to use when
// there is no explicit matching route:
toolbox.router.default = toolbox.networkFirst;

다음 Workbox 코드와 같습니다.

importScripts('path/to/workbox-sw.js');

workbox.routing.registerRoute(
  // Match any URL that contains 'ytimg.com'.
  // Unlike in sw-toolbox, in Workbox, a RegExp that matches
  // a cross-origin URL needs to include the initial 'https://'
  // as part of the match.
  new RegExp('^https://.*.ytimg.com'),

  // Apply a cache-first strategy to anything that matches.
  new workbox.strategies.CacheFirst({
    // Configuration options are passed in to the strategy.
    cacheName: 'youtube-thumbnails',
    plugins: [
      new workbox.expiration.ExpirationPlugin({
        maxEntries: 10,
        maxAgeSeconds: 30,
      }),
      // In Workbox, you must explicitly opt-in to caching
      // responses with a status of 0 when using the
      // cache-first strategy.
      new workbox.cacheableResponse.CacheableResponsePlugin({
        statuses: [0, 200],
      }),
    ],
  })
);

// Set a default network-first strategy to use when
// there is no explicit matching route:
workbox.routing.setDefaultHandler(new workbox.strategies.NetworkFirst());

도움 받기

Workbox로의 대부분의 이전은 간단할 것으로 예상됩니다. 이 가이드에서 다루지 않은 문제가 발생하면 GitHub에서 문제를 열어 알려주세요.