μ›Œν¬λ°•μŠ€(Workbox)λž€?

PWA의 캐싱(caching) κΈ°λŠ₯을 νŽΈν•˜κ²Œ κ΅¬ν˜„ν•  수 μžˆλ„λ‘ μ§€μ›λ˜λŠ” ν‘œμ€€ PWA 라이브러리. [sw-precaching], [sw-toolbox] λΌμ΄λΈŒλŸ¬λ¦¬κ°€ μ§€μ›ν•˜λ˜ κΈ°λŠ₯듀을 ν†΅ν•©ν•˜μ—¬ μ œκ³΅ν•œλ‹€.

CLI둜 μ›Œν¬λ°•μŠ€ μ‹œμž‘ν•˜κΈ°

μ›Œν¬λ°•μŠ€ 라이브러리의 μ‚¬μš© 방법을 읡히기 μœ„ν•΄μ„œ CLI둜 κ°„λ‹¨ν•˜κ²Œ νŒŒμΌμ„ μΊμ‹±ν•΄λ³΄κ² μŠ΅λ‹ˆλ‹€. λ¨Όμ € CLIλ₯Ό μ•„λž˜ λͺ…λ Ήμ–΄λ‘œ μ„€μΉ˜ν•©λ‹ˆλ‹€.

npm install workbox-cli --global

μ •μƒμ μœΌλ‘œ μ„€μΉ˜κ°€ λ˜μ—ˆμœΌλ©΄ workbox --help λͺ…λ Ήμ–΄κ°€ 인식될 κ²ƒμž…λ‹ˆλ‹€.

μ›Œν¬λ°•μŠ€ CLI둜 μ„œλΉ„μŠ€ μ›Œμ»€ μƒμ„±ν•˜κΈ°

PWAλ₯Ό μ μš©ν•˜κ³  싢은 μ›Ή μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ˜ ν”„λ‘œμ νŠΈμ—μ„œ μ•„λž˜μ™€ 같이 μ›Œν¬λ°•μŠ€ μœ„μ €λ“œ λͺ…λ Ήμ–΄λ₯Ό μž…λ ₯ν•©λ‹ˆλ‹€.

workbox wizard

μœ„ λͺ…λ Ήμ–΄λ₯Ό μž…λ ₯ν•˜λ©΄ μ•„λž˜μ™€ 같이 λͺ‡ κ°€μ§€μ˜ 질문이 λ‚˜μ˜΅λ‹ˆλ‹€. κ·Έ μ§ˆλ¬Έμ—” μ•„λž˜μ™€ 같이 λŒ€λ‹΅ν•©λ‹ˆλ‹€.

  • μ›Ή μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ˜ λ£¨νŠΈκ°€ 어디인지? app/
  • μ–΄λ–€ 파일 μœ ν˜•λ“€μ„ 프리캐싱(pre-caching)ν•  것인지? html, css, js, jpg, png
  • μœ„ μ˜΅μ…˜λ“€μ΄ 적용된 μ„œλΉ„μŠ€ μ›Œμ»€ 파일이 생성될 μœ„μΉ˜? dist/sw.js
  • μœ„ ꡬ성 정보듀을 어디에 μ €μž₯ν•  것인가? workbox-config.js

μ›Œν¬λ°•μŠ€ CLI의 generateSW λͺ¨λ“œ

μ•žμ˜ μœ„μ €λ“œλ‘œ μƒμ„±ν•œ μ›Œν¬ λ°•μŠ€μ˜ ꡬ성 μ •λ³΄λŠ” workbox-config.js에 λ‹΄κΈ°κ²Œ λ©λ‹ˆλ‹€. 이 λ•Œ λ‹€μŒ λͺ…λ Ήμ–΄λ₯Ό μž…λ ₯ν•˜λ©΄ μœ„ ꡬ성 정보가 λ‹΄κΈ΄ μ„œλΉ„μŠ€ μ›Œμ»€ νŒŒμΌμ„ 생성할 수 μžˆμŠ΅λ‹ˆλ‹€.

workbox generateSW ./workbox-config.js

μ΄λ ‡κ²Œ μƒμ„±λœ μ„œλΉ„μŠ€ μ›Œμ»€ νŒŒμΌμ—λŠ” μ›Œν¬λ°•μŠ€μ˜ 프리 캐싱과 λŸ°νƒ€μž„ 캐싱 κΈ°λŠ₯이 ν¬ν•¨λ˜μ–΄ μžˆμŠ΅λ‹ˆλ‹€.

λ‹€λ§Œ, μ›Ή ν‘Έμ‹œ κΈ°λŠ₯이 ν•„μš”ν•œ κ²½μš°μ—λŠ” μ ν•©ν•˜μ§€ μ•Šμ€ μ˜΅μ…˜μž…λ‹ˆλ‹€. μ›Ή ν‘Έμ‹œλŠ” injectManifest μ˜΅μ…˜μ„ ν™œμš©ν•˜μ„Έμš”.

μ›Œν¬λ°•μŠ€ CLI의 injectManifest λͺ¨λ“œ

μ›Œν¬λ°•μŠ€ injectManifest λͺ¨λ“œλŠ” generateSW λͺ¨λ“œμ™€λŠ” λ‹€λ₯΄κ²Œ κ°œλ°œμžκ°€ μ’€ 더 μ„œλΉ„μŠ€μ›Œμ»€ νŒŒμΌμ„ 직접 μ‘°μž‘ν•˜κ±°λ‚˜ λ‚΄μš©μ„ μˆ˜μ •ν•  수 μžˆμŠ΅λ‹ˆλ‹€. 파일 캐싱 이외에 μ›Ή ν‘Έμ‹œ API와 같은 λ„€μ΄ν‹°λΈŒ API κΈ°λŠ₯을 κ΅¬ν˜„ν•˜κ³  싢을 λ•Œ μ ν•©ν•œ λͺ¨λ“œμž…λ‹ˆλ‹€.

κ°œλ°œμžκ°€ κ΅¬ν˜„ν•΄λ†“μ€ μ„œλΉ„μŠ€ μ›Œμ»€ νŒŒμΌμ„ 읽어 μ„€μ • 파일(workbox-config.js)에 μ„€μ •λœ 캐싱 정보λ₯Ό μΆ”κ°€ν•˜κ³  μƒˆ μ„œλΉ„μŠ€ μ›Œμ»€ νŒŒμΌμ„ μƒμ„±ν•΄μ€λ‹ˆλ‹€. λͺ…λ Ήμ–΄λŠ” λ‹€μŒκ³Ό κ°™μŠ΅λ‹ˆλ‹€.

workbox injectManifest ./workbox-config.js