๋ฉ”์ธ ์ปจํ…์ธ ๋กœ ์ด๋™
Version: 2.0.0-alpha.73

๐Ÿ“ฆ plugin-pwa

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

์„ค์น˜#

npm install --save @docusaurus/plugin-pwa

์„ค์ •#

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

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

docusaurus.config.js
module.exports = {  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 ์ฒดํฌ๋ฆฌ์ŠคํŠธ๋ฅผ ์ฐธ๊ณ ํ•˜์„ธ์š”.

์•ฑ ์„ค์น˜ ์ง€์›#

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

pwa_install.gif

note

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

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

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

์‚ฌ์ „์บ์‹ฑ์€ ๋ฌด์—‡์ธ๊ฐ€์š”?#

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

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

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

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

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

caution

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

์˜ต์…˜#

debug#

  • Type: boolean
  • Default: false

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

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

offlineModeActivationStrategies#

  • Type: Array<'appInstalled' | 'mobile' | 'saveData'| 'queryString' | 'always'>
  • Default: ['appInstalled','queryString','standalone']

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

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

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

danger

๋งค์šฐ ์•ˆ์ •์ ์ธ ๋ฐฉ์‹์œผ๋กœ PWA๋ฅผ ๊ฐ์ง€ํ•˜๋Š” ๊ฒƒ์€ ๋ถˆ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.

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

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

injectManifestConfig#

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

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

reloadPopup#

  • Type: string | false
  • Default: '@theme/PwaReloadPopup'

ํŒ์—… ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋ฆฌ๋กœ๋“œํ•  ๋ชจ๋“ˆ ๊ฒฝ๋กœ๋ฅผ ์„ค์ •ํ•ฉ๋‹ˆ๋‹ค. ์ƒˆ๋กœ์šด ์„œ๋น„์Šค ์›Œ์ปค๊ฐ€ ์„ค์น˜๋˜๊ธฐ๋ฅผ ๊ธฐ๋‹ค๋ฆด ๋•Œ ํŒ์—…์ด ํ‘œ์‹œ๋˜๋ฉฐ ์‚ฌ์šฉ์ž์—๊ฒŒ ๋ฆฌ๋กœ๋“œ๋ฅผ ์•ˆ๋‚ดํ•ฉ๋‹ˆ๋‹ค.

false๋กœ ์„ค์ •ํ•˜๋ฉด ํŒ์—…์ด ํ‘œ์‹œ๋˜์ง€ ์•Š์ง€๋งŒ ๊ถŒ์žฅํ•˜์ง€๋Š” ์•Š์Šต๋‹ˆ๋‹ค. ์ด๋ ‡๊ฒŒ ํ•˜๋ฉด ์‚ฌ์šฉ์ž๊ฐ€ ์ตœ์‹  ์ปจํ…์ธ ๋ฅผ ํ™•์ธํ•  ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค.

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

interface PwaReloadPopupProps {  onReload: () => void;}

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

pwa_reload.gif

pwaHead#

  • Type: Array<{ tagName: string } & Record<string,string>>
  • Default: []

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

module.exports = {  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 paramsexport 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 v2",  "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"    }  ]}