๐ฆ 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 ์ค์ ์ ์ถ๊ฐํฉ๋๋ค.
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 ์ฒดํฌ๋ฆฌ์คํธ๋ฅผ ์ฐธ๊ณ ํ์ธ์.
์ฑ ์ค์น ์ง์โ
์ฌ๋ฌ๋ถ์ ๋ธ๋ผ์ฐ์ ๊ฐ ์ง์ํ๋ค๋ฉด ๋ํ์ฌ์ฐ๋ฃจ์ค ์ฌ์ดํธ๋ฅผ ์ฑ์ฒ๋ผ ์ค์นํ ์ ์์ต๋๋ค.
์ฑ ์ค์น๋ฅผ ์ง์ํ๋ ค๋ฉด 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:
{}
module.exports = {
plugins: [
[
'@docusaurus/plugin-pwa',
{
injectManifestConfig: {
manifestTransforms: [
//...
],
modifyURLPrefix: {
//...
},
// ์ผ๋ฐ์ ์ผ๋ก ์ฌ์ฉํ๋ ์ ์ ์ ์
(HTML, ์ด๋ฏธ์ง ๋ฑ)์ ์คํ๋ผ์ธ์์ ์ฌ์ฉํ ์ ์๋๋ก
// ๊ธฐ๋ณธ์ ์ผ๋ก ์ถ๊ฐํ์ต๋๋ค. ์ถ๊ฐ๋ก ํ์ํ ํ์ผ๋ง ์ค์ ํด์ค๋๋ค.
globPatterns: ['**/*.{pdf,docx,xlsx}'],
// ...
},
},
],
],
};