π¦ 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 체ν¬λ¦¬μ€νΈλ₯Ό μ°Έκ³ νμΈμ.
μ± μ€μΉ μ§μβ
μ¬λ¬λΆμ λΈλΌμ°μ κ° μ§μνλ€λ©΄ λνμ¬μ°λ£¨μ€ μ¬μ΄νΈλ₯Ό μ±μ²λΌ μ€μΉν μ μμ΅λλ€.