esbuild를 사용하는 모든 앱의 사용자 지정 서비스 작업자

최근에 저는 웹 앱에서 서비스 워커를 사용하는 방법을 탐색하고 있습니다. 사용 사례에는 prefetching content at scale , speeding up your website , handling failovers 등이 포함됩니다. 내가 지속적으로 직면하는 문제 중 하나는 서비스 워커를 프레임워크에 따라 조정할 필요가 있다는 것입니다. 아래에서 지난주에 어떤 금을 캐냈는지 봅시다 👇🏻

어디에서 시작 했습니까?

Angular 11로 커스텀 서비스 워커를 설정하려고 하는데 가이드https://angular.io/guide/service-worker-getting-started에서 Angular/pwa 모듈을 설치하고 https://angular.io/guide/service-worker-communications을 읽은 다음 Angular의 서비스 워커 생성 방식에 적응하라고 했습니다. 글쎄요, 제게는 많은 일처럼 보였기 때문에 커스텀 서비스 워커를 추가하기 위한 프레임워크에 구애받지 않는 프로세스를 만들기 시작했습니다. 돌이켜 생각해보면 fairly easier with Vue 2 and 3 이었던 것 같은데 엉뚱한 방식으로 느껴졌습니다.

솔루션을 보여주세요!

0단계. 설치esbuild

1단계. workbox-config.js를 생성합니다.
여기에서 workbox 구성에 무엇이 있는지 자세히 알아보세요.

module.exports = {
  globDirectory: "dist/",
  globPatterns: [
    "**/*.{css,eot,html,ico,jpg,js,json,png,svg,ttf,txt,webmanifest,woff,woff2,webm,xml}",
  ],
  globFollow: true,
  globStrict: true,
  globIgnores: [
    "**/*-es5.*.js",
    "3rdpartylicenses.txt",
    "assets/images/icons/icon-*.png",
  ],
  dontCacheBustURLsMatching: new RegExp(".+.[a-f0-9]{20}..+"),
  maximumFileSizeToCacheInBytes: 5000000,
  swSrc: "dist/service-worker.js",
  swDest: "dist/service-worker.js",
};

2단계. compile_sw.js 만들기:

const { build } = require("esbuild")

build({
  entryPoints: ["./path/to/service-worker.js"],
  outfile: "./dist/service-worker.js",
  minify: true,
  bundle: true,
  define: {
    'process.env.NODE_ENV': '"production"',
    'process.env.SOME_VARIABLE': '"SOME_VALUE"'
  },
}).catch(() => process.exit(1))

3단계. 컴파일 및 주입:

npx workbox-cli injectManifest && node compile_sw.js

4단계. 서비스 워커 등록 ✨

<script>
// Check that service workers are supported
if ('serviceWorker' in navigator) {
  // Use the window load event to keep the page load performant
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/service-worker.js');
  });
}
</script>

그게 다야, 즐기세요! 이게 도움이 되길 바란다!