๋ทฐ CLI์˜ PWA ํ”Œ๋Ÿฌ๊ทธ์ธ

๋ทฐ CLI์—์„œ ์ œ๊ณตํ•˜๋Š” ํ”„๋กœ๊ทธ๋ ˆ์‹œ๋ธŒ ์›น ์•ฑ(Progressive Web Apps: PWA) ํ”Œ๋Ÿฌ๊ทธ์ธ์€ ๊ตฌ๊ธ€์˜ ์›Œํฌ ๋ฐ•์Šค(Workbox) ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœ ๊ตฌ์„ฑ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ๋ทฐ CLI์˜ PWA ํ”Œ๋Ÿฌ๊ทธ์ธ ํŠน์ง•์€ ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค.

  • ํ”Œ๋Ÿฌ๊ทธ์ธ์—์„œ ๋‹ค๋ฃจ๋Š” ์„œ๋น„์Šค ์›Œ์ปค ํŒŒ์ผ์€ ํ”„๋กœ๋•์…˜ ๋ชจ๋“œ(npm run build)์—์„œ๋งŒ ์‚ฌ์šฉ ๊ฐ€๋Šฅ
  • ์„œ๋น„์Šค์›Œ์ปค ํŒŒ์ผ์„ ๋กœ์ปฌ์—์„œ ํ…Œ์ŠคํŠธ ํ•˜๋Š” ๊ฒฝ์šฐ npm ๋นŒ๋“œ ํ›„ serve์™€ ๊ฐ™์€ HTTP ์„œ๋ฒ„๋กœ ์‹คํ–‰

PWA ๊ด€๋ จ ์„ค์ • ๋ฐฉ๋ฒ•

๋ทฐ CLI์˜ PWA ํ”Œ๋Ÿฌ๊ทธ์ธ์—์„œ ์ œ๊ณตํ•˜๋Š” ๊ธฐ๋Šฅ์ด๋‚˜ ์„ค์ •์„ ๋ณ€๊ฒฝํ•˜๊ณ  ์‹ถ๋‹ค๋ฉด ๋‹ค์Œ ๋‘˜ ์ค‘ ํ•œ ๊ฐœ์˜ ํŒŒ์ผ์„ ๋ณ€๊ฒฝํ•ฉ๋‹ˆ๋‹ค.

  • vue.config.js
  • package.json์˜ vue ์†์„ฑ

PWA ํ”Œ๋Ÿฌ๊ทธ์ธ์—์„œ ์ œ๊ณตํ•˜๋Š” ์„ค์ •

PWA ํ”Œ๋Ÿฌ๊ทธ์ธ์œผ๋กœ ์„ค์ •ํ•  ์ˆ˜ ์žˆ๋Š” ์˜ต์…˜์€ ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค.

pwa.workboxPluginMode

์›Œํฌ ๋ฐ•์Šค์˜ ์›นํŒฉ ํ”Œ๋Ÿฌ๊ทธ์ธ์— ์˜ํ•ด ๋‹ค์Œ 2๊ฐ€์ง€ ๋ชจ๋“œ๊ฐ€ ์ง€์›๋ฉ๋‹ˆ๋‹ค.

  • GenerateSW : ๊ธฐ๋ณธ ๊ฐ’. ์ƒˆ๋กœ ๋นŒ๋“œํ•  ๋•Œ๋งˆ๋‹ค ์ƒˆ๋กœ์šด ์„œ๋น„์Šค์›Œ์ปค ํŒŒ์ผ ์ƒ์„ฑ
  • InjectManifest : ํ”„๋กœ์ ํŠธ ์•ˆ์— ์„œ๋น„์Šค ์›Œ์ปค ํŒŒ์ผ์ด ์žˆ๋Š” ๊ฒฝ์šฐ ํ”„๋ฆฌ ์บ์‹ฑ(Precaching)๋œ ์ฝ”๋“œ๋ฅผ ์ถ”๊ฐ€ํ•˜์—ฌ ์‚ฌ์šฉ ๊ฐ€๋Šฅ. ์›น ํ‘ธ์‹œ์™€ ๊ฐ™์€ ๊ธฐํƒ€ ์„œ๋น„์Šค ์›Œ์ปค ๊ธฐ๋Šฅ์„ ์‚ฌ์šฉํ•  ๋•Œ ์œ ์šฉ

๊ฐ ๋ชจ๋“œ์— ๋Œ€ํ•ด ๋” ์ž์„ธํžˆ ์•Œ๊ณ  ์‹ถ๋‹ค๋ฉด ๋‹ค์Œ ๋งํฌ๋ฅผ ์ฐธ๊ณ ํ•˜์„ธ์š”. ์›Œํฌ๋ฐ•์Šค ํ”Œ๋Ÿฌ๊ทธ์ธ ๋ชจ๋“œ

pwa.workboxOptions

์›Œํฌ๋ฐ•์Šค ์›นํŒฉ ํ”Œ๋Ÿฌ๊ทธ์ธ์—์„œ ์ง€์›ํ•˜๋Š” ์†์„ฑ ์˜ต์…˜๊ณผ ๋™์ผํ•˜๊ฒŒ ์ง€์›๋ฉ๋‹ˆ๋‹ค. ex) swSrc, skipWaiting ๋“ฑ

pwa.iconPaths

PWA ์•„์ด์ฝ˜ ๊ฒฝ๋กœ๋ฅผ ์„ค์ •ํ•˜๋Š” ์˜ต์…˜์ž…๋‹ˆ๋‹ค. ๊ธฐ๋ณธ ๊ฐ’์€ ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค.

{
  "favicon32": "img/icons/favicon-32x32.png",
  "favicon16": "img/icons/favicon-16x16.png",
  "appleTouchIcon": "img/icons/apple-touch-icon-152x152.png",
  "maskIcon": "img/icons/safari-pinned-tab.svg",
  "msTileImage": "img/icons/msapplication-icon-144x144.png"
}