๐ฆ plugin-pwa
Workbox๋ฅผ ์ฌ์ฉํด PWA ์ง์์ ์ถ๊ฐํ ์ ์๋ ๋ํ์ฌ์ฐ๋ฃจ์ค ํ๋ฌ๊ทธ์ธ์ ๋๋ค. ์ ํ ๋น๋์๋ง ์๋น์ค ์์ปค๋ฅผ ๋ง๋ค์ด์ฃผ๋ ํ๋ฌ๊ทธ์ธ์ ๋๋ค. ์ด๋ฅผ ํตํด ์คํ๋ผ์ธ์์ ์คํํ ์ ์๊ณ ์ค์น๋ ์ง์ํ๋ ์์ ํ PWA ํธํ ๋ฌธ์๋ฅผ ๋ง๋ค ์ ์์ต๋๋ค.
์ค์นโ
- npm
- Yarn
- pnpm
npm install --save @docusaurus/plugin-pwa
yarn add @docusaurus/plugin-pwa
pnpm add @docusaurus/plugin-pwa
์ค์ โ
./static/manifest.json
ํ์ผ์ PWA ๋งค๋ํ์คํธ๋ฅผ ์์ฑํฉ๋๋ค.
docusaurus.config.js
์ ํ์ํ PWA ์ค์ ์ ์ถ๊ฐํฉ๋๋ค.
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 ์ฒดํฌ๋ฆฌ์คํธ๋ฅผ ์ฐธ๊ณ ํ์ธ์.
์ฑ ์ค์น ์ง์โ
์ฌ๋ฌ๋ถ์ ๋ธ๋ผ์ฐ์ ๊ฐ ์ง์ํ๋ค๋ฉด ๋ํ์ฌ์ฐ๋ฃจ์ค ์ฌ์ดํธ๋ฅผ ์ฑ์ฒ๋ผ ์ค์นํ ์ ์์ต๋๋ค.