๋ฉ”์ธ ์ปจํ…์ธ ๋กœ ์ด๋™
๋ฒ„์ „: ๋ถˆ์•ˆ์ • ๐Ÿšง

๐Ÿ“ฆ plugin-pwa

Workbox๋ฅผ ์‚ฌ์šฉํ•ด PWA ์ง€์›์„ ์ถ”๊ฐ€ํ•  ์ˆ˜ ์žˆ๋Š” ๋„ํ์‚ฌ์šฐ๋ฃจ์Šค ํ”Œ๋Ÿฌ๊ทธ์ธ์ž…๋‹ˆ๋‹ค. ์ œํ’ˆ ๋นŒ๋“œ์—๋งŒ ์„œ๋น„์Šค ์›Œ์ปค๋ฅผ ๋งŒ๋“ค์–ด์ฃผ๋Š” ํ”Œ๋Ÿฌ๊ทธ์ธ์ž…๋‹ˆ๋‹ค. ์ด๋ฅผ ํ†ตํ•ด ์˜คํ”„๋ผ์ธ์—์„œ ์‹คํ–‰ํ•  ์ˆ˜ ์žˆ๊ณ  ์„ค์น˜๋„ ์ง€์›ํ•˜๋Š” ์™„์ „ํ•œ PWA ํ˜ธํ™˜ ๋ฌธ์„œ๋ฅผ ๋งŒ๋“ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์„ค์น˜โ€‹

npm install --save @docusaurus/plugin-pwa

์„ค์ •โ€‹

./static/manifest.json ํŒŒ์ผ์— PWA ๋งค๋‹ˆํŽ˜์ŠคํŠธ๋ฅผ ์ž‘์„ฑํ•ฉ๋‹ˆ๋‹ค.

docusaurus.config.js์— ํ•„์š”ํ•œ PWA ์„ค์ •์„ ์ถ”๊ฐ€ํ•ฉ๋‹ˆ๋‹ค.

docusaurus.config.js
export default {
plugins: [
[
'@docusaurus/plugin-pwa',
{
debug: true,
offlineModeActivationStrategies: [
'appInstalled',
'standalone',
'queryString',
],
pwaHead: [
{
tagName: 'link',
rel: 'icon',
href: '/img/docusaurus.png',
},
{
tagName: 'link',
rel: 'manifest',
href: '/manifest.json', // your PWA manifest
},
{
tagName: 'meta',
name: 'theme-color',
content: 'rgb(37, 194, 160)',
},
],
},
],
],
};

ํ”„๋กœ๊ทธ๋ ˆ์‹œ๋ธŒ ์›น ์•ฑโ€‹

์„œ๋น„์Šค ์›Œ์ปค๋ฅผ ์„ค์น˜ํ•˜๋Š” ๊ฒƒ๋งŒ์œผ๋กœ ์—ฌ๋Ÿฌ๋ถ„์˜ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์ด PWA๊ฐ€ ๋˜๋Š” ๊ฑด ์•„๋‹™๋‹ˆ๋‹ค. ์ตœ์†Œํ•œ ์›น ์•ฑ ๋งค๋‹ˆํŽ˜์ŠคํŠธ๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ์–ด์•ผ ํ•˜๋ฉฐ <head> ํƒœ๊ทธ ์•ˆ์— ์ ์ ˆํ•œ ํƒœ๊ทธ๊ฐ€ ํฌํ•จ๋˜์–ด ์žˆ์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค (Options > pwaHead).

๋ฐฐํฌ ํ›„์—๋Š” Lighthouse๋ฅผ ์‚ฌ์šฉํ•ด ์—ฌ๋Ÿฌ๋ถ„์˜ ์‚ฌ์ดํŠธ๋ฅผ ์ ๊ฒ€ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์—ฌ๋Ÿฌ๋ถ„์˜ ์‚ฌ์ดํŠธ๊ฐ€ PWA๊ฐ€ ๋˜๊ธฐ ์œ„ํ•ด ํ•„์š”ํ•œ ์ข€ ๋” ์ž์„ธํ•œ ๋‚ด์šฉ์€ PWA ์ฒดํฌ๋ฆฌ์ŠคํŠธ๋ฅผ ์ฐธ๊ณ ํ•˜์„ธ์š”.

์•ฑ ์„ค์น˜ ์ง€์›โ€‹

์—ฌ๋Ÿฌ๋ถ„์˜ ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ์ง€์›ํ•œ๋‹ค๋ฉด ๋„ํ์‚ฌ์šฐ๋ฃจ์Šค ์‚ฌ์ดํŠธ๋ฅผ ์•ฑ์ฒ˜๋Ÿผ ์„ค์น˜ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์„ค์น˜ ๊ณผ์ •์„ ๋…นํ™”ํ•œ ์˜์ƒ์ž…๋‹ˆ๋‹ค. ๋ธŒ๋ผ์šฐ๏ฟฝ์ €์˜ ์ฃผ์†Œ ํ‘œ์‹œ์ค„์— ํ‘œ์‹œ๋œ ๋ฒ„ํŠผ์„ ํด๋ฆญํ•˜๋ฉด &quot;install this application?&quot;๋ผ๋Š” ๋Œ€ํ™” ์ƒ์ž๊ฐ€ ํ‘œ์‹œ๋ฉ๋‹ˆ๋‹ค. &quot;Install&quot; ๋ฒ„ํŠผ์„ ํด๋ฆญํ•˜๋ฉด ์šด์˜ ์ฒด์ œ์—์„œ ์ƒˆ ์‘์šฉ ํ”„๋กœ๊ทธ๋žจ์ด ์‹คํ–‰๋˜๊ณ  ๋„ํ์‚ฌ์šฐ๋ฃจ์Šค ํ™ˆํŽ˜์ด์ง€๊ฐ€ ์—ด๋ฆฝ๋‹ˆ๋‹ค.

์ฐธ๊ณ 

์•ฑ ์„ค์น˜๋ฅผ ์ง€์›ํ•˜๋ ค๋ฉด HTTPS ํ”„๋กœํ† ์ฝœ์„ ์‚ฌ์šฉํ•ด์•ผ ํ•˜๋ฉฐ ์œ ํšจํ•œ ๋งค๋‹ˆํŽ˜์ŠคํŠธ๊ฐ€ ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค.

์˜คํ”„๋ผ์ธ ๋ชจ๋“œ(precaching)โ€‹

์„œ๋น„์Šค ์›Œ์ปค ์‚ฌ์ „์บ์‹ฑ์„ ์‚ฌ์šฉํ•ด ๋„ํ์‚ฌ์šฐ๋ฃจ์Šค ์‚ฌ์ดํŠธ๋ฅผ ์˜คํ”„๋ผ์ธ์—์„œ ์‚ฌ์šฉ์ž๊ฐ€ ํƒ์ƒ‰ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

workbox-precaching ํŽ˜์ด์ง€์—์„œ ์•„๋ž˜์™€ ๊ฐ™์ด ์„ค๋ช…ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

์„œ๋น„์Šค ์›Œ์ปค์˜ ๊ธฐ๋Šฅ ์ค‘ ํ•˜๋‚˜๋กœ ์„œ๋น„์Šค ์›Œ์ปค ์„ค์น˜ ์‹œ ์บ์‹œ ์ฒ˜๋ฆฌํ•  ํŒŒ์ผ ๋ฌถ์Œ์„ ์ €์žฅํ•ด๋†“์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์„œ๋น„์Šค ์›Œ์ปค๊ฐ€ ์‚ฌ์šฉ๋˜๊ธฐ ์ „์— ์ฝ˜ํ…์ธ ๋ฅผ ์บ์‹œ ์ฒ˜๋ฆฌํ•˜๊ธฐ ๋•Œ๋ฌธ์— "์‚ฌ์ „์บ์‹ฑ"์ด๋ผ๊ณ  ๋ถ€๋ฆ…๋‹ˆ๋‹ค.

์ด๋ ‡๊ฒŒ ์ฒ˜๋ฆฌํ•˜๋Š” ์ด์œ ๋Š” ๊ฐœ๋ฐœ์ž์—๊ฒŒ ์บ์‹œ๋ฅผ ์ œ์–ดํ•  ์ˆ˜ ์žˆ๋Š” ๊ถŒํ•œ์„ ์ฃผ๊ธฐ ์œ„ํ•จ์ž…๋‹ˆ๋‹ค. ๊ฐœ๋ฐœ์ž๋Š” ์บ์‹œ๋ฅผ ์–ธ์ œ ๋งŒ๋“ค๊ณ  ์–ผ๋งˆ๋‚˜ ์˜ค๋ž˜ ๋ณด๊ด€ํ• ์ง€ ๊ฒฐ์ •ํ•  ์ˆ˜ ์žˆ์„ ๋ฟ ์•„๋‹ˆ๋ผ ๋„คํŠธ์›Œํฌ๋ฅผ ๊ฑฐ์น˜์ง€ ์•Š๊ณ  ๋ธŒ๋ผ์šฐ์ €์—์„œ ๋ฐ”๋กœ ์„œ๋น„์Šค๋ฅผ ์ œ๊ณตํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ฆ‰ ์˜คํ”„๋ผ์ธ์—์„œ ๋™์ž‘ํ•  ์ˆ˜ ์žˆ๋Š” ์›น ์•ฑ์„ ๋งŒ๋“ค ์ˆ˜ ์žˆ๋‹ค๋Š” ๊ฒ๋‹ˆ๋‹ค.

Workbox๋Š” API๋ฅผ ๋‹จ์ˆœํ™”ํ•˜๊ณ  ํšจ์œจ์ ์œผ๋กœ ํ•„์š”ํ•œ ํŒŒ์ผ์„ ๋‚ด๋ ค๋ฐ›์„ ์ˆ˜ ์žˆ๊ฒŒ ๋งŒ๋“ค์–ด ์‚ฌ์ „์บ์‹ฑ ์ž‘์—…์„ ์‰ฝ๊ฒŒ ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ๋„๋ก ์ง€์›ํ•ฉ๋‹ˆ๋‹ค.

๊ธฐ๋ณธ์ ์œผ๋กœ ์˜คํ”„๋ผ์ธ ๋ชจ๋“œ๋Š” ์‚ฌ์ดํŠธ๊ฐ€ ์•ฑ์œผ๋กœ ์„ค์น˜๋˜๋ฉด ํ™œ์„ฑํ™”๋ฉ๋‹ˆ๋‹ค. ์ž์„ธํ•œ ๋‚ด์šฉ์€ offlineModeActivationStrategies ์˜ต์…˜ ์„ค๋ช…์„ ์ฐธ๊ณ ํ•˜์„ธ์š”.

์‚ฌ์ดํŠธ ์‚ฌ์ „์บ์‹ฑ ์ดํ›„์— ์„œ๋น„์Šค ์›Œ์ปค๋Š” ๋ฐฉ๋ฌธ์ž์—๊ฒŒ ์บ์‹œ๋œ ์‘๋‹ต์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค. ์ƒˆ๋กœ์šด ๋นŒ๋“œ๊ฐ€ ์ƒˆ๋กœ์šด ์„œ๋น„์Šค ์›Œ์ปค์™€ ํ•จ๊ป˜ ๋ฐฐํฌ๋˜๋ฉด ์ƒˆ๋กœ์šด ์•ฑ์ด ์„ค์น˜๋˜๊ณ  ๋Œ€๊ธฐ ์ƒํƒœ๋กœ ์ด๋™ํ•˜๊ฒŒ ๋ฉ๋‹ˆ๋‹ค. ๋Œ€๊ธฐ ์ƒํƒœ์— ๋“ค์–ด๊ฐ€๋ฉด ๋ฆฌ๋กœ๋“œ ํŒ์—…์ด ํ‘œ์‹œ๋˜๊ณ  ์‚ฌ์šฉ์ž์—๊ฒŒ ์ƒˆ๋กœ์šด ์ฝ˜ํ…์ธ ๋ฅผ ์œ„ํ•ด ํŽ˜์ด์ง€๋ฅผ ๋ฆฌ๋กœ๋“œํ•  ๊ฒƒ์ธ์ง€ ๋ฌผ์–ด๋ด…๋‹ˆ๋‹ค. ์‚ฌ์šฉ์ž๊ฐ€ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ์บ์‹œ๋ฅผ ์‚ญ์ œํ•˜๊ฑฐ๋‚˜ ํŒ์—…์—์„œ reload ๋ฒ„ํŠผ์„ ํด๋ฆญํ•  ๋•Œ๊นŒ์ง€ ์„œ๋น„์Šค ์›Œ์ปค๋Š” ๊ธฐ์กด ์ฝ˜ํ…์ธ ๋ฅผ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค.

๊ฒฝ๊ณ 

์˜คํ”„๋ผ์ธ ๋ชจ๋“œ๋‚˜ ์‚ฌ์ „์บ์‹ฑ์€ ์‚ฌ์ดํŠธ์˜ ๋ชจ๋“  ์• ์…‹์„ ๋ฏธ๋ฆฌ ๋‚ด๋ ค๋ฐ›์•„์•ผ ํ•˜๋ฉฐ ๋ถˆํ•„์š”ํ•œ ๋Œ€์—ญํญ์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋ชจ๋“  ์ข…๋ฅ˜์˜ ์‚ฌ์ดํŠธ์—์„œ ๋ฌด์กฐ๊ฑด ํ•ด๋‹น ๊ธฐ๋Šฅ์„ ํ™œ์„ฑํ™”ํ•˜๋Š” ๊ฑด ์ข‹์€ ์ƒ๊ฐ์€ ์•„๋‹™๋‹ˆ๋‹ค.

์˜ต์…˜โ€‹

debugโ€‹

  • Type: boolean
  • Default: false

์•„๋ž˜์™€ ๊ฐ™์€ ๋””๋ฒ„๊ทธ ๋ชจ๋“œ๋ฅผ ์„ค์ •ํ•ฉ๋‹ˆ๋‹ค.

  • Workbox ๋กœ๊ทธ
  • ์ถ”๊ฐ€์ ์ธ ๋„ํ์‚ฌ์šฐ๋ฃจ์Šค ๋กœ๊ทธ
  • ์ตœ์ ํ™”๋˜์ง€ ๋ชปํ•œ SW ํŒŒ์ผ ์ถœ๋ ฅ
  • ์†Œ์Šค๋งต

offlineModeActivationStrategiesโ€‹

  • Type: ('appInstalled' | 'mobile' | 'saveData'| 'queryString' | 'always')[]
  • Default: ['appInstalled', 'queryString', 'standalone']

์˜คํ”„๋ผ์ธ ๋ชจ๋“œ๋ฅผ ์ ์šฉํ•  ์ƒํƒœ์— ๋Œ€ํ•œ ์˜ต์…˜์„ ์„ค์ •ํ•ฉ๋‹ˆ๋‹ค.

  • appInstalled: ์‚ฌ์šฉ์ž๊ฐ€ ์‚ฌ์ดํŠธ๋ฅผ ์•ฑ์œผ๋กœ ์„ค์น˜ํ•œ ๊ฒฝ์šฐ ํ™œ์„ฑํ™”(100% ์‹ ๋ขฐํ•  ์ˆ˜๋Š” ์—†์Šต๋‹ˆ๋‹ค)
  • standalone: ์‚ฌ์šฉ์ž๊ฐ€ ์•ฑ์„ ๋…๋ฆฝ์ ์œผ๋กœ ์‹คํ–‰ํ•œ ๊ฒฝ์šฐ ํ™œ์„ฑํ™”(PWA๊ฐ€ ์„ค์น˜๋œ ๊ฒฝ์šฐ)
  • queryString: queryString์— offlineMode=true๊ฐ€ ํฌํ•จ๋œ ๊ฒฝ์šฐ ํ™œ์„ฑํ™”(PWA ๋””๋ฒ„๊น… ์‹œ ์œ ์šฉํ•ฉ๋‹ˆ๋‹ค)
  • mobile: ๋ชจ๋ฐ”์ผ ์‚ฌ์šฉ์ž์ธ ๊ฒฝ์šฐ ํ™œ์„ฑํ™”(width <= 996px)
  • saveData: navigator.connection.saveData === true๋กœ ์„ค์ •ํ•œ ๊ฒฝ์šฐ ํ™œ์„ฑํ™”
  • always: ๋ชจ๋“  ์‚ฌ์šฉ์ž ํ™œ์„ฑํ™”
๊ฒฝ๊ณ 

์ฃผ์˜ํ•ด์„œ ์‚ฌ์šฉํ•ด์ฃผ์„ธ์š”. ์ผ๋ถ€ ์‚ฌ์šฉ์ž๋Š” ์˜คํ”„๋ผ์ธ ๋ชจ๋“œ๋กœ ์‚ฌ์šฉํ•˜๋„๋ก ๊ฐ•์ œ๋˜๋Š” ๊ฒƒ์„ ์‹ซ์–ดํ•  ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค.

์œ„ํ—˜

ํŽ˜์ด์ง€๊ฐ€ ์•ˆ์ •์ ์ธ ํ˜•ํƒœ๋กœ PWA ๋ Œ๋”๋ง์„ ์ฒ˜๋ฆฌํ–ˆ๋Š”์ง€ ์—ฌ๋ถ€๋ฅผ ํ™•์ธํ•  ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค.

appinstalled ์ด๋ฒคํŠธ๊ฐ€ ์ŠคํŽ™์—์„œ ์ œ๊ฑฐ๋˜๋ฉด์„œ ์ตœ์‹  ํฌ๋กฌ ๋ฒ„์ „์—์„œ๋Š” navigator.getInstalledRelatedApps() API๋งŒ ์ง€์›ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๋ฅผ ์‚ฌ์šฉํ•˜๋ ค๋ฉด ๋งค๋‹ˆํŽ˜์ŠคํŠธ์—์„œ related_applications๋ฅผ ์„ ์–ธํ•ด์ฃผ์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

standalone ์ „๋žต์„ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด ์˜คํ”„๋ผ์ธ ๋ชจ๋“œ๋ฅผ ํ™œ์„ฑํ™”ํ•˜๋Š” ์ข‹์€ ๋Œ€์•ˆ์ž…๋‹ˆ๋‹ค(์„ค์น˜๋œ ์•ฑ์„ ์‹คํ–‰ํ•˜๋Š” ๊ฒฝ์šฐ).

injectManifestConfigโ€‹

workbox.injectManifest()์— ์ „๋‹ฌํ•  Workbox ์˜ต์…˜์„ ์„ค์ •ํ•ฉ๋‹ˆ๋‹ค. ํ”„๋ฆฌ์บ์‹ฑ์„ ์ ์šฉํ•˜๊ณ  ์˜คํ”„๋ผ์ธ์—์„œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ์• ์…‹์„ ์ง์ ‘ ์„ค์ •ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

  • Type: InjectManifestOptions
  • Default: {}
docusaurus.config.js
export default {
plugins: [
[
'@docusaurus/plugin-pwa',
{
injectManifestConfig: {
manifestTransforms: [
//...
],
modifyURLPrefix: {
//...
},
// ์ผ๋ฐ˜์ ์œผ๋กœ ์‚ฌ์šฉํ•˜๋Š” ์ •์  ์• ์…‹(HTML, ์ด๋ฏธ์ง€ ๋“ฑ)์€ ์˜คํ”„๋ผ์ธ์—์„œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋„๋ก
// ๊ธฐ๋ณธ์ ์œผ๋กœ ์ถ”๊ฐ€ํ–ˆ์Šต๋‹ˆ๋‹ค. ์ถ”๊ฐ€๋กœ ํ•„์š”ํ•œ ํŒŒ์ผ๋งŒ ์„ค์ •ํ•ด์ค๋‹ˆ๋‹ค.
globPatterns: ['**/*.{pdf,docx,xlsx}'],
// ...
},
},
],
],
};

pwaHeadโ€‹

  • Type: ({ tagName: string; [attributeName: string]: string })[]
  • Default: []

<head> ํƒœ๊ทธ ๋‚ด์— ์‚ฝ์ž…ํ•  tagName๊ณผ ํ‚ค, ๊ฐ’ ์Œ์„ ํฌํ•จํ•˜๋Š” ์˜ค๋ธŒ์ ํŠธ ๋ฐฐ์—ด์„ ์„ค์ •ํ•ฉ๋‹ˆ๋‹ค. ๊ธฐ์ˆ ์ ์œผ๋กœ ์–ด๋–ค head ํƒœ๊ทธ ๋“  ์‚ฝ์ž…ํ•  ์ˆ˜ ์žˆ์ง€๋งŒ ์—ฌ๋Ÿฌ๋ถ„์˜ ์‚ฌ์ดํŠธ PWA์— ์ ํ•ฉํ•œ ํƒœ๊ทธ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด ์ด์ƒ์ ์ž…๋‹ˆ๋‹ค. ์•„๋ž˜ ๋ชฉ๋ก์€ ์—ฌ๋Ÿฌ๋ถ„์˜ ์•ฑ์— ์ ํ•ฉํ•œ ํƒœ๊ทธ ๋ชฉ๋ก์ž…๋‹ˆ๋‹ค.

export default {
plugins: [
[
'@docusaurus/plugin-pwa',
{
pwaHead: [
{
tagName: 'link',
rel: 'icon',
href: '/img/docusaurus.png',
},
{
tagName: 'link',
rel: 'manifest',
href: '/manifest.json',
},
{
tagName: 'meta',
name: 'theme-color',
content: 'rgb(37, 194, 160)',
},
{
tagName: 'meta',
name: 'apple-mobile-web-app-capable',
content: 'yes',
},
{
tagName: 'meta',
name: 'apple-mobile-web-app-status-bar-style',
content: '#000',
},
{
tagName: 'link',
rel: 'apple-touch-icon',
href: '/img/docusaurus.png',
},
{
tagName: 'link',
rel: 'mask-icon',
href: '/img/docusaurus.svg',
color: 'rgb(37, 194, 160)',
},
{
tagName: 'meta',
name: 'msapplication-TileImage',
content: '/img/docusaurus.png',
},
{
tagName: 'meta',
name: 'msapplication-TileColor',
content: '#000',
},
],
},
],
],
};

swCustomโ€‹

  • Type: string | undefined
  • Default: undefined

Workbox์— ์ ์šฉํ•  ๊ทœ์น™ ์ถ”๊ฐ€ ์‹œ ์œ ์šฉํ•œ ์„ค์ •์ž…๋‹ˆ๋‹ค. ์„œ๋น„์Šค ์›Œ์ปค์˜ ๋ชจ๋“  ๊ธฐ๋Šฅ๊ณผ ํ•จ๊ป˜ Workbox ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์˜ ๊ฐ•๋ ฅํ•œ ์ถ”๊ฐ€ ๊ธฐ๋Šฅ์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ํŠธ๋žœ์ŠคํŒŒ์ผ๋œ ์ฝ”๋“œ์ด๋ฉฐ ์ตœ์‹  ES6+ ๊ตฌ๋ฌธ์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์˜ˆ๋ฅผ ๋“ค์–ด ์™ธ๋ถ€ ๊ฒฝ๋กœ์— ์žˆ๋Š” ํŒŒ์ผ์„ ์บ์‹œํ•˜๋Š” ๊ฒฝ์šฐ์—๋Š” ์•„๋ž˜์™€ ๊ฐ™์ด ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.

import {registerRoute} from 'workbox-routing';
import {StaleWhileRevalidate} from 'workbox-strategies';

// default fn export receiving some useful params
export default function swCustom(params) {
const {
debug, // :boolean
offlineMode, // :boolean
} = params;

// Cache responses from external resources
registerRoute((context) => {
return [
/graph\.facebook\.com\/.*\/picture/,
/netlify\.com\/img/,
/avatars1\.githubusercontent/,
].some((regex) => context.url.href.match(regex));
}, new StaleWhileRevalidate());
}

๋ชจ๋“ˆ์€ default ๋‚ด๋ณด๋‚ด๊ธฐ ํ•จ์ˆ˜๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ์–ด์•ผ ํ•˜๋ฉฐ ์ผ๋ถ€ ๋งค๊ฐœ๋ณ€์ˆ˜๋ฅผ ๋ฐ›์•„์•ผ ํ•ฉ๋‹ˆ๋‹ค.

swRegisterโ€‹

  • Type: string | false
  • Default: 'docusaurus-plugin-pwa/src/registerSW.js'

์•ฑ์ด ์‹คํ–‰ํ•˜๊ธฐ ์ „์— ๋“ฑ๋ก์ด ์ฒ˜๋ฆฌ๋˜๋„๋ก ๋„ํ์‚ฌ์šฐ๋ฃจ์Šค ์•ฑ ์•ž์— ํ•ญ๋ชฉ์„ ์ถ”๊ฐ€ํ•ฉ๋‹ˆ๋‹ค. ๊ธฐ๋ณธ registerSW.js ํŒŒ์ผ์€ ๊ฐ„๋‹จํ•œ ๋“ฑ๋ก์„ ์œ„ํ•œ ์ถฉ๋ถ„ํ•œ ์„ค์ •์„ ํฌํ•จํ•ฉ๋‹ˆ๋‹ค.

false๋กœ ์„ค์ •ํ•˜๋ฉด ๋“ฑ๋ก์„ ์ฒ˜๋ฆฌํ•  ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค.

๋งค๋‹ˆํŽ˜์ŠคํŠธ ์˜ˆโ€‹

๋„ํ์‚ฌ์šฐ๋ฃจ์Šค ์‚ฌ์ดํŠธ ๋งค๋‹ˆํŽ˜์ŠคํŠธ๋ฅผ ์ฐธ๊ณ ํ•˜์„ธ์š”.

{
"name": "Docusaurus",
"short_name": "Docusaurus",
"theme_color": "#2196f3",
"background_color": "#424242",
"display": "standalone",
"scope": "./",
"start_url": "./index.html",
"related_applications": [
{
"platform": "webapp",
"url": "https://docusaurus.io/manifest.json"
}
],
"icons": [
{
"src": "img/icons/icon-72x72.png",
"sizes": "72x72",
"type": "image/png"
},
{
"src": "img/icons/icon-96x96.png",
"sizes": "96x96",
"type": "image/png"
},
{
"src": "img/icons/icon-128x128.png",
"sizes": "128x128",
"type": "image/png"
},
{
"src": "img/icons/icon-144x144.png",
"sizes": "144x144",
"type": "image/png"
},
{
"src": "img/icons/icon-152x152.png",
"sizes": "152x152",
"type": "image/png"
},
{
"src": "img/icons/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "img/icons/icon-384x384.png",
"sizes": "384x384",
"type": "image/png"
},
{
"src": "img/icons/icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}

์‚ฌ์šฉ์ž ์ง€์ • ์ƒˆ๋กœ๊ณ ์นจ ํŒ์—…โ€‹

์ƒˆ๋กœ์šด ์„œ๋น„์Šค ์›Œ์ปค๊ฐ€ ์„ค์น˜๋˜๊ธฐ๋ฅผ ๊ธฐ๋‹ค๋ฆด ๋•Œ @theme/PwaReloadPopup ์ปดํฌ๋„ŒํŠธ๊ฐ€ ํ‘œ์‹œ๋˜๋ฉฐ ์‚ฌ์šฉ์ž์—๊ฒŒ ๋ฆฌ๋กœ๋“œ๋ฅผ ์•ˆ๋‚ดํ•ฉ๋‹ˆ๋‹ค. ํ•ด๋‹น ์ปดํฌ๋„ŒํŠธ๋ฅผ ์Šค์œ„์ฆํ•ด์„œ ์—ฌ๋Ÿฌ๋ถ„๋งŒ์˜ UI๋ฅผ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. reload ๋ฒ„ํŠผ์„ ํด๋ฆญํ•  ๋•Œ ํ˜ธ์ถœ๋˜์–ด์•ผ ํ•˜๋Š” ์†์„ฑ์œผ๋กœ onReload ์ฝœ๋ฐฑ์„ ์ˆ˜์‹ ํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ๊ธฐ๋‹ค๋ฆฌ๊ณ  ์žˆ๋Š” ์„œ๋น„์Šค ์›Œ์ปค์—๊ฒŒ ์„ค์น˜๋ฅผ ์ง„ํ–‰ํ•˜๊ณ  ํŽ˜์ด์ง€๋ฅผ ๋ฆฌ๋กœ๋“œํ•˜๋„๋ก ์ „๋‹ฌํ•ฉ๋‹ˆ๋‹ค.

๊ธฐ๋ณธ ํ…Œ๋งˆ๋Š” ๋ฆฌ๋กœ๋“œ ํŒ์—…์ด ๊ตฌํ˜„๋˜์–ด ์žˆ์œผ๋ฉฐ Infima Alerts์„ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.

๋ฆฌ๋กœ๋“œ ๊ณผ์ •์„ ๋…นํ™”ํ•œ ์˜์ƒ์ž…๋‹ˆ๋‹ค. &quot;New content available&quot;.&quot;์ด๋ผ๋Š” ์•Œ๋ฆผ ์ƒ์ž๊ฐ€ ์ฐฝ ์˜ค๋ฅธ์ชฝ ํ•˜๋‹จ์— ํ‘œ์‹œ๋ฉ๋‹ˆ๋‹ค. &quot;Refresh&quot; ๋ฒ„ํŠผ์„ ํด๋ฆญํ•˜๋ฉด ํŽ˜์ด์ง€์˜ ๊ธฐ๋ณธ ์ œ๋ชฉ์ด &quot;Introduction&quot;์—์„œ &quot;PWA :))&quot;๋กœ ๋ณ€๊ฒฝ๋ฉ๋‹ˆ๋‹ค.

์—ฌ๋Ÿฌ๋ถ„์˜ ์ปดํฌ๋„ŒํŠธ๊ฐ€ null์„ ๋ Œ๋”๋งํ•  ์ˆ˜ ์žˆ์ง€๋งŒ ๊ถŒ์žฅํ•˜์ง€๋Š” ์•Š์Šต๋‹ˆ๋‹ค. ์ด๋Ÿฐ ๊ฒฝ์šฐ ์‚ฌ์šฉ์ž๋Š” ์ตœ์‹  ์ฝ˜ํ…์ธ ๋ฅผ ์–ป์„ ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค.