μλΉμ€ μ컀μ λ°±κ·ΈλΌμ΄λ μ λ°μ΄νΈ λ§μ€ν°νκΈ°: μνν μΉ μ ν리μΌμ΄μ μ λ°μ΄νΈμ ν₯μλ μ¬μ©μ κ²½νμ μν μ’ ν© κ°μ΄λ.
νλ°νΈμλ μλΉμ€ μ컀 μ λ°μ΄νΈ μ λ΅: λ°±κ·ΈλΌμ΄λ μ λ°μ΄νΈ κ΄λ¦¬
μλΉμ€ μ컀λ νλ‘κ·Έλ μλΈ μΉ μ±(PWA)μ΄ λ€μ΄ν°λΈμ μ μ¬ν κ²½νμ μ 곡ν μ μλλ‘ νλ κ°λ ₯ν κΈ°μ μ λλ€. μλΉμ€ μ컀 κ΄λ¦¬μ μ€μν μΈ‘λ©΄ μ€ νλλ μ¬μ©μμ κ²½νμ λ°©ν΄νμ§ μμΌλ©΄μ μ΅μ κΈ°λ₯κ³Ό λ²κ·Έ μμ μ μ 곡νκΈ° μν΄ λ°±κ·ΈλΌμ΄λμμ μννκ² μ λ°μ΄νΈλλλ‘ νλ κ²μ λλ€. μ΄ κΈμμλ μνν μ¬μ©μ κ²½νμ μν λ€μν μ λ΅κ³Ό λͺ¨λ² μ¬λ‘λ₯Ό ν¬ν¨νμ¬ λ°±κ·ΈλΌμ΄λ μ λ°μ΄νΈ κ΄λ¦¬μ 볡μ‘μ±μ λν΄ μμΈν μμλ΄ λλ€.
μλΉμ€ μ컀 μ λ°μ΄νΈλ 무μμΈκ°?
μλΉμ€ μ컀 μ
λ°μ΄νΈλ λΈλΌμ°μ κ° μλΉμ€ μ컀 νμΌ μ체(μΌλ°μ μΌλ‘ service-worker.js λλ μ μ¬ν μ΄λ¦)μ λ³κ²½μ κ°μ§ν λ λ°μν©λλ€. λΈλΌμ°μ λ μ λ²μ μ νμ¬ μ€μΉλ λ²μ κ³Ό λΉκ΅ν©λλ€. λ¨ ν κΈμλΌλ μ°¨μ΄κ° μμΌλ©΄ μ
λ°μ΄νΈ νλ‘μΈμ€κ° μμλ©λλ€. μ΄λ μλΉμ€ μμ»€κ° κ΄λ¦¬νλ μΊμλ 리μμ€λ₯Ό μ
λ°μ΄νΈνλ κ²κ³Όλ λ€λ¦
λλ€. λ³κ²½λλ κ²μ μλΉμ€ μ컀 *μ½λ*μ
λλ€.
λ°±κ·ΈλΌμ΄λ μ λ°μ΄νΈκ° μ€μν μ΄μ
μ¬μ©μκ° PWAμ μ§μμ μΌλ‘ μνΈμμ©νλ μν©μ μμν΄ λ³΄μμμ€. μ μ ν μ λ°μ΄νΈ μ λ΅μ΄ μλ€λ©΄, μ¬μ©μλ ꡬλ²μ μ λ¨Έλ¬Όλ¬ μλ‘μ΄ κΈ°λ₯μ λμΉκ±°λ μ΄λ―Έ ν΄κ²°λ λ²κ·Έλ₯Ό κ²½νν μ μμ΅λλ€. λ°±κ·ΈλΌμ΄λ μ λ°μ΄νΈλ λ€μκ³Ό κ°μ μ΄μ λ‘ νμμ μ λλ€:
- μ΅μ κΈ°λ₯ μ 곡: μ¬μ©μκ° κ°μ₯ μ΅κ·Όμ κ°μ μ¬νκ³Ό κΈ°λ₯μ μ κ·Όν μ μλλ‘ λ³΄μ₯ν©λλ€.
- λ²κ·Έ λ° λ³΄μ μ·¨μ½μ μμ : μμ μ μ΄κ³ μμ ν μ ν리μΌμ΄μ μ μ μ§νκΈ° μν΄ μ€μν μμ μ¬νμ μ μνκ² μ λ¬ν©λλ€.
- μ±λ₯ ν₯μ: λ λΉ λ₯Έ λ‘λ© μκ°κ³Ό λΆλλ¬μ΄ μνΈμμ©μ μν΄ μΊμ± μ λ΅κ³Ό μ½λ μ€νμ μ΅μ νν©λλ€.
- μ¬μ©μ κ²½ν ν₯μ: μ¬λ¬ μΈμ μ κ±Έμ³ μννκ³ μΌκ΄λ κ²½νμ μ 곡ν©λλ€.
μλΉμ€ μ컀 μ λ°μ΄νΈ μλͺ μ£ΌκΈ°
μλΉμ€ μ컀 μ λ°μ΄νΈ μλͺ μ£ΌκΈ°λ₯Ό μ΄ν΄νλ κ²μ ν¨κ³Όμ μΈ μ λ°μ΄νΈ μ λ΅μ ꡬννλ λ° λ§€μ° μ€μν©λλ€. μλͺ μ£ΌκΈ°λ μ¬λ¬ λ¨κ³λ‘ ꡬμ±λ©λλ€:
- λ±λ‘(Registration): νμ΄μ§κ° λ‘λλ λ λΈλΌμ°μ κ° μλΉμ€ μ컀λ₯Ό λ±λ‘ν©λλ€.
- μ€μΉ(Installation): μλΉμ€ μμ»€κ° μμ μ μ€μΉνλ©°, μΌλ°μ μΌλ‘ νμ 리μμ€λ₯Ό μΊμ±ν©λλ€.
- νμ±ν(Activation): μλΉμ€ μμ»€κ° νμ±νλμ΄ νμ΄μ§λ₯Ό μ μ΄νκ³ λ€νΈμν¬ μμ²μ μ²λ¦¬ν©λλ€. μ΄λ μ΄μ μλΉμ€ μ컀λ₯Ό μ¬μ©νλ λ€λ₯Έ νμ± ν΄λΌμ΄μΈνΈκ° μμ λ λ°μν©λλ€.
- μ λ°μ΄νΈ νμΈ(Update Check): λΈλΌμ°μ λ μ£ΌκΈ°μ μΌλ‘ μλΉμ€ μ컀 νμΌμ μ λ°μ΄νΈλ₯Ό νμΈν©λλ€. μ΄λ μλΉμ€ μ컀μ λ²μ λ΄ νμ΄μ§λ‘ μ΄λνκ±°λ λ€λ₯Έ μ΄λ²€νΈ(μ: νΈμ μλ¦Ό)κ° νμΈμ νΈλ¦¬κ±°ν λ λ°μν©λλ€.
- μ μλΉμ€ μ컀 μ€μΉ(New Service Worker Installation): μ λ°μ΄νΈκ° λ°κ²¬λλ©΄(μ λ²μ μ΄ λ°μ΄νΈ λ¨μλ‘ λ€λ₯΄λ©΄), λΈλΌμ°μ λ νμ¬ νμ± μ€μΈ μλΉμ€ μ컀λ₯Ό λ°©ν΄νμ§ μκ³ λ°±κ·ΈλΌμ΄λμμ μ μλΉμ€ μ컀λ₯Ό μ€μΉν©λλ€.
- λκΈ°(Waiting): μ μλΉμ€ μ컀λ 'λκΈ°(waiting)' μνλ‘ λ€μ΄κ°λλ€. μ΄μ μλΉμ€ μ컀μ μν΄ μ μ΄λλ νμ± ν΄λΌμ΄μΈνΈκ° λ μ΄μ μμ λλ§ νμ±νλ©λλ€. μ΄λ μ§ν μ€μΈ μ¬μ©μ μνΈμμ©μ λ°©ν΄νμ§ μκ³ λΆλλ¬μ΄ μ νμ 보μ₯ν©λλ€.
- μ μλΉμ€ μ컀 νμ±ν(Activation of New Service Worker): μ΄μ μλΉμ€ μ컀λ₯Ό μ¬μ©νλ λͺ¨λ ν΄λΌμ΄μΈνΈκ° λ«νλ©΄(μ: μ¬μ©μκ° PWAμ κ΄λ ¨λ λͺ¨λ ν/μ°½μ λ«μΌλ©΄), μ μλΉμ€ μμ»€κ° νμ±νλ©λλ€. κ·Έλ° λ€μ νμ΄μ§λ₯Ό μ μ΄νκ³ νμ λ€νΈμν¬ μμ²μ μ²λ¦¬ν©λλ€.
λ°±κ·ΈλΌμ΄λ μ λ°μ΄νΈ κ΄λ¦¬λ₯Ό μν ν΅μ¬ κ°λ
νΉμ μ λ΅μ μ΄ν΄λ³΄κΈ° μ μ λͺ κ°μ§ ν΅μ¬ κ°λ μ λͺ νν νκ² μ΅λλ€:
- ν΄λΌμ΄μΈνΈ(Client): ν΄λΌμ΄μΈνΈλ μλΉμ€ μ컀μ μν΄ μ μ΄λλ λͺ¨λ λΈλΌμ°μ ν λλ μ°½μ λλ€.
- νμ(Navigation): νμμ μ¬μ©μκ° μλΉμ€ μ컀μ λ²μ λ΄μμ μ νμ΄μ§λ‘ μ΄λνλ κ²μ λλ€.
- μΊμ API(Cache API): μΊμ APIλ λ€νΈμν¬ μμ²κ³Ό ν΄λΉ μλ΅μ μ μ₯νκ³ κ²μνλ λ©μ»€λμ¦μ μ 곡ν©λλ€.
- μΊμ λ²μ κ΄λ¦¬(Cache Versioning): μ λ°μ΄νΈκ° μ¬λ°λ₯΄κ² μ μ©λκ³ μ€λλ 리μμ€κ° μ κ±°λλλ‘ μΊμμ λ²μ μ ν λΉνλ κ²μ λλ€.
- Stale-While-Revalidate: μΊμλ₯Ό μ¬μ©νμ¬ μ¦μ μλ΅νλ λμμ λ€νΈμν¬λ₯Ό μ¬μ©νμ¬ λ°±κ·ΈλΌμ΄λμμ μΊμλ₯Ό μ λ°μ΄νΈνλ μΊμ± μ λ΅μ λλ€. μ΄λ λΉ λ₯Έ μ΄κΈ° μλ΅μ μ 곡νκ³ μΊμκ° νμ μ΅μ μνλ‘ μ μ§λλλ‘ λ³΄μ₯ν©λλ€.
μ λ°μ΄νΈ μ λ΅
λ°±κ·ΈλΌμ΄λμμ μλΉμ€ μ컀 μ λ°μ΄νΈλ₯Ό κ΄λ¦¬νκΈ° μν λͺ κ°μ§ μ λ΅μ΄ μμ΅λλ€. μ΅μμ μ κ·Ό λ°©μμ νΉμ μ ν리μΌμ΄μ μꡬ μ¬νκ³Ό νμν μ μ΄ μμ€μ λ°λΌ λ¬λΌμ§λλ€.
1. κΈ°λ³Έ λΈλΌμ°μ λμ (μλμ μ λ°μ΄νΈ)
κ°μ₯ κ°λ¨ν μ κ·Ό λ°©μμ λΈλΌμ°μ μ κΈ°λ³Έ λμμ μμ‘΄νλ κ²μ λλ€. λΈλΌμ°μ λ νμ μ μλΉμ€ μ컀 μ λ°μ΄νΈλ₯Ό μλμΌλ‘ νμΈνκ³ λ°±κ·ΈλΌμ΄λμμ μ λ²μ μ μ€μΉν©λλ€. κ·Έλ¬λ μ μλΉμ€ μ컀λ μ΄μ μλΉμ€ μ컀λ₯Ό μ¬μ©νλ λͺ¨λ ν΄λΌμ΄μΈνΈκ° λ«ν λκΉμ§ νμ±νλμ§ μμ΅λλ€. μ΄ μ κ·Ό λ°©μμ ꡬννκΈ°λ κ°λ¨νμ§λ§ μ λ°μ΄νΈ νλ‘μΈμ€μ λν μ μ΄κ° μ νμ μ λλ€.
μμ: μ΄ μ λ΅μ μν΄μλ νΉλ³ν μ½λκ° νμνμ§ μμ΅λλ€. λ¨μν μλ²μ μλΉμ€ μ컀 νμΌμ΄ μ λ°μ΄νΈλμλμ§ νμΈνλ©΄ λ©λλ€.
μ₯μ :
- ꡬνμ΄ κ°λ¨ν¨
λ¨μ :
- μ λ°μ΄νΈ νλ‘μΈμ€μ λν μ μ΄κ° μ νμ μ
- μ¬μ©μκ° μ λ°μ΄νΈλ₯Ό μ¦μ λ°μ§ λͺ»ν μ μμ
- μ λ°μ΄νΈ νλ‘μΈμ€μ λν νΌλλ°±μ μ¬μ©μμκ² μ 곡νμ§ μμ
2. λκΈ° 건λλ°κΈ° (Skip Waiting)
μλΉμ€ μ컀μ install μ΄λ²€νΈ λ΄μμ νΈμΆλλ skipWaiting() ν¨μλ μ μλΉμ€ μμ»€κ° 'λκΈ°' μνλ₯Ό 건λλ°κ³ μ¦μ νμ±νλλλ‘ κ°μ ν©λλ€. μ΄λ μ
λ°μ΄νΈκ° κ°λ₯ν ν 빨리 μ μ©λλλ‘ λ³΄μ₯νμ§λ§, μ μ€νκ² μ²λ¦¬νμ§ μμΌλ©΄ μ§ν μ€μΈ μ¬μ©μ μνΈμμ©μ λ°©ν΄ν μ μμ΅λλ€.
μμ:
```javascript self.addEventListener('install', event => { console.log('μλΉμ€ μ컀 μ€μΉ μ€.'); self.skipWaiting(); // μ μλΉμ€ μ컀μ νμ±νλ₯Ό κ°μ ν©λλ€ }); ```μ£Όμ: μ μλΉμ€ μμ»€κ° μ΄μ μλΉμ€ μ컀μ λ€λ₯Έ μΊμ± μ λ΅μ΄λ λ°μ΄ν° ꡬ쑰λ₯Ό μ¬μ©νλ κ²½μ° skipWaiting()μ μ¬μ©νλ©΄ μκΈ°μΉ μμ λμμ΄ λ°μν μ μμ΅λλ€. μ΄ μ κ·Ό λ°©μμ μ¬μ©νκΈ° μ μ κ·Έ μν₯μ μ μ€νκ² κ³ λ €νμμμ€.
μ₯μ :
- λ λΉ λ₯Έ μ λ°μ΄νΈ
λ¨μ :
- μ§ν μ€μΈ μ¬μ©μ μνΈμμ©μ λ°©ν΄ν μ μμ
- λ°μ΄ν° λΆμΌμΉλ₯Ό νΌνκΈ° μν΄ μ μ€ν κ³νμ΄ νμν¨
3. ν΄λΌμ΄μΈνΈ μ μ΄ (Client Claim)
clients.claim() ν¨μλ₯Ό μ¬μ©νλ©΄ μλ‘ νμ±νλ μλΉμ€ μμ»€κ° μ¦μ λͺ¨λ κΈ°μ‘΄ ν΄λΌμ΄μΈνΈλ₯Ό μ μ΄ν μ μμ΅λλ€. μ΄λ skipWaiting()κ³Ό κ²°ν©νμ¬ κ°μ₯ λΉ λ₯Έ μ
λ°μ΄νΈ κ²½νμ μ 곡ν©λλ€. κ·Έλ¬λ μ¬μ©μ μνΈμμ©μ λ°©ν΄νκ³ λ°μ΄ν° λΆμΌμΉλ₯Ό μ λ°ν μνλ κ°μ₯ λμ΅λλ€. κ·Ήλμ μ£Όμλ₯Ό κΈ°μΈμ¬ μ¬μ©ν΄μΌ ν©λλ€.
μμ:
```javascript self.addEventListener('install', event => { console.log('μλΉμ€ μ컀 μ€μΉ μ€.'); self.skipWaiting(); // μ μλΉμ€ μ컀μ νμ±νλ₯Ό κ°μ ν©λλ€ }); self.addEventListener('activate', event => { console.log('μλΉμ€ μ컀 νμ±ν μ€.'); self.clients.claim(); // λͺ¨λ κΈ°μ‘΄ ν΄λΌμ΄μΈνΈλ₯Ό μ μ΄ν©λλ€ }); ```μ£Όμ: skipWaiting()κ³Ό clients.claim()μ λͺ¨λ μ¬μ©νλ κ²μ μν λ° λ°μ΄ν° μμμ±μ΄ μ΅μνλ λ§€μ° κ°λ¨ν μ ν리μΌμ΄μ
μμλ§ κ³ λ €ν΄μΌ ν©λλ€. μ² μ ν ν
μ€νΈκ° νμμ μ
λλ€.
μ₯μ :
- κ°λ₯ν κ°μ₯ λΉ λ₯Έ μ λ°μ΄νΈ
λ¨μ :
- μ¬μ©μ μνΈμμ©μ λ°©ν΄ν μνμ΄ κ°μ₯ λμ
- λ°μ΄ν° λΆμΌμΉ μνμ΄ κ°μ₯ λμ
- μΌλ°μ μΌλ‘ κΆμ₯λμ§ μμ
4. νμ΄μ§ μλ‘κ³ μΉ¨μ ν΅ν μ μ΄λ μ λ°μ΄νΈ
λ³΄λ€ μ μ΄λ μ κ·Ό λ°©μμ μ¬μ©μμκ² μ λ²μ μ μ¬μ©ν μ μμμ μλ¦¬κ³ νμ΄μ§λ₯Ό μλ‘κ³ μΉ¨νλλ‘ μ λνλ κ²μ λλ€. μ΄λ₯Ό ν΅ν΄ μ¬μ©μλ μ λ°μ΄νΈλ₯Ό μ μ©ν μκΈ°λ₯Ό μ ννμ¬ μ€λ¨μ μ΅μνν μ μμ΅λλ€. μ΄ μ λ΅μ μ¬μ©μμκ² μ λ°μ΄νΈμ λν΄ μ리λ μ΄μ κ³Ό μ λ²μ μ μ μ΄λ λ°©μμΌλ‘ μ μ©ν μ μλ μ΄μ μ κ²°ν©ν©λλ€.
μμ:
```javascript // λ©μΈ μ ν리μΌμ΄μ μ½λ (μ: app.js): navigator.serviceWorker.addEventListener('controllerchange', () => { // μλ‘μ΄ μλΉμ€ μμ»€κ° μ μ΄λ₯Ό μμνμ΅λλ€ console.log('μλ‘μ΄ μλΉμ€ μ컀λ₯Ό μ¬μ©ν μ μμ΅λλ€!'); // μ¬μ©μμκ² μλ¦Όμ νμνμ¬ νμ΄μ§λ₯Ό μλ‘κ³ μΉ¨νλλ‘ μ λν©λλ€ if (confirm('μ΄ μ ν리μΌμ΄μ μ μ λ²μ μ μ¬μ©ν μ μμ΅λλ€. μλ‘κ³ μΉ¨νμ¬ μ λ°μ΄νΈνμκ² μ΅λκΉ?')) { window.location.reload(); } }); // μλΉμ€ μ컀 μ½λ: self.addEventListener('install', event => { console.log('μλΉμ€ μ컀 μ€μΉ μ€.'); }); self.addEventListener('activate', event => { console.log('μλΉμ€ μ컀 νμ±ν μ€.'); }); // νμ΄μ§ λ‘λ μ μ λ°μ΄νΈ νμΈ window.addEventListener('load', () => { navigator.serviceWorker.register('/service-worker.js') .then(registration => { registration.addEventListener('updatefound', () => { console.log('μλ‘μ΄ μλΉμ€ μ컀λ₯Ό μ°Ύμμ΅λλ€!'); // μ νμ μΌλ‘, μ¬κΈ°μμλ κ°λ¨ν μλ¦Όμ νμν μ μμ΅λλ€ }); }); }); ```μ΄ μ κ·Ό λ°©μμ navigator.serviceWorker κ°μ²΄μμ controllerchange μ΄λ²€νΈλ₯Ό μμ ν΄μΌ ν©λλ€. μ΄ μ΄λ²€νΈλ μ μλΉμ€ μμ»€κ° νμ΄μ§λ₯Ό μ μ΄ν λ λ°μν©λλ€. μ΄λ μ¬μ©μμκ² μλ¦Όμ νμνμ¬ νμ΄μ§λ₯Ό μλ‘κ³ μΉ¨νλλ‘ μ λν μ μμ΅λλ€. μλ‘κ³ μΉ¨νλ©΄ μ μλΉμ€ μμ»€κ° νμ±νλ©λλ€.
μ₯μ :
- μ¬μ©μμκ² λ―ΈμΉλ μ€λ¨μ μ΅μνν¨
- μ¬μ©μμκ² μ λ°μ΄νΈ νλ‘μΈμ€μ λν μ μ΄κΆμ μ 곡ν¨
λ¨μ :
- μ¬μ©μ μνΈμμ©μ΄ νμν¨
- μ¬μ©μκ° μ¦μ νμ΄μ§λ₯Ό μλ‘κ³ μΉ¨νμ§ μμ μ λ°μ΄νΈκ° μ§μ°λ μ μμ
5. `workbox-window` λΌμ΄λΈλ¬λ¦¬ μ¬μ©
workbox-window λΌμ΄λΈλ¬λ¦¬λ μΉ μ ν리μΌμ΄μ
λ΄μμ μλΉμ€ μ컀 μ
λ°μ΄νΈ λ° μλͺ
μ£ΌκΈ° μ΄λ²€νΈλ₯Ό κ΄λ¦¬νλ νΈλ¦¬ν λ°©λ²μ μ 곡ν©λλ€. μ
λ°μ΄νΈ κ°μ§, μ¬μ©μμκ² μλ¦Ό, νμ±ν μ²λ¦¬ κ³Όμ μ λ¨μνν©λλ€.
μμ: ```bash npm install workbox-window ```
κ·Έλ° λ€μ, λ©μΈ μ ν리μΌμ΄μ μ½λμμ:
```javascript import { Workbox } from 'workbox-window'; if ('serviceWorker' in navigator) { const wb = new Workbox('/service-worker.js'); wb.addEventListener('installed', event => { if (event.isUpdate) { if (event.isUpdate) { console.log('μλ‘μ΄ μλΉμ€ μμ»€κ° μ€μΉλμμ΅λλ€!'); // μ ν μ¬ν: μ¬μ©μμκ² μλ¦Ό νμ } } }); wb.addEventListener('waiting', event => { console.log('μλ‘μ΄ μλΉμ€ μμ»€κ° νμ±νλ₯Ό κΈ°λ€λ¦¬κ³ μμ΅λλ€!'); // μ¬μ©μμκ² νμ΄μ§ μ λ°μ΄νΈλ₯Ό μμ²ν©λλ€ if (confirm('μ λ²μ μ μ¬μ©ν μ μμ΅λλ€! μ§κΈ μ λ°μ΄νΈνμκ² μ΅λκΉ?')) { wb.messageSW({ type: 'SKIP_WAITING' }); // μλΉμ€ μ컀μ λ©μμ§ μ μ‘ } }); wb.addEventListener('controlling', event => { console.log('μλΉμ€ μμ»€κ° μ΄μ νμ΄μ§λ₯Ό μ μ΄ν©λλ€!'); }); wb.register(); } ```κ·Έλ¦¬κ³ μλΉμ€ μ컀 μ½λμμ:
```javascript self.addEventListener('message', event => { if (event.data && event.data.type === 'SKIP_WAITING') { self.skipWaiting(); } }); ```μ΄ μμ λ μ
λ°μ΄νΈλ₯Ό κ°μ§νκ³ , μ¬μ©μμκ² μ
λ°μ΄νΈλ₯Ό μμ²ν λ€μ, μ¬μ©μκ° νμΈνλ©΄ skipWaiting()μ μ¬μ©νμ¬ μ μλΉμ€ μ컀λ₯Ό νμ±ννλ λ°©λ²μ 보μ¬μ€λλ€.
μ₯μ :
- λ¨μνλ μ λ°μ΄νΈ κ΄λ¦¬
- λͺ ννκ³ κ°κ²°ν API μ 곡
- μ£μ§ μΌμ΄μ€ λ° λ³΅μ‘μ± μ²λ¦¬
λ¨μ :
- μμ‘΄μ± μΆκ° νμ
6. μΊμ λ²μ κ΄λ¦¬
μΊμ λ²μ κ΄λ¦¬λ μΊμλ μμ°μ λν μ λ°μ΄νΈκ° μ¬λ°λ₯΄κ² μ μ©λλλ‘ λ³΄μ₯νλ μ€μν κΈ°μ μ λλ€. μΊμμ λ²μ λ²νΈλ₯Ό ν λΉν¨μΌλ‘μ¨ λ²μ λ²νΈκ° λ³κ²½λ λ λΈλΌμ°μ κ° μμ°μ μ λ²μ μ κ°μ Έμ€λλ‘ κ°μ ν μ μμ΅λλ€. μ΄λ μ¬μ©μκ° μ€λλ μΊμλ 리μμ€μ 머무λ₯΄λ κ²μ λ°©μ§ν©λλ€.
μμ:
```javascript const CACHE_VERSION = 'v1'; // λ°°ν¬ν λλ§λ€ μ΄ κ°μ μ¦κ°μν΅λλ€ const CACHE_NAME = `my-app-cache-${CACHE_VERSION}`; const urlsToCache = [ '/', '/index.html', '/style.css', '/app.js' ]; self.addEventListener('install', event => { event.waitUntil( caches.open(CACHE_NAME) .then(cache => { console.log('μΊμ μ΄λ¦Ό'); return cache.addAll(urlsToCache); }) ); }); self.addEventListener('activate', event => { event.waitUntil( caches.keys().then(cacheNames => { return Promise.all( cacheNames.map(cacheName => { if (cacheName !== CACHE_NAME) { console.log('μ΄μ μΊμ μμ μ€:', cacheName); return caches.delete(cacheName); } }) ); }) ); }); self.addEventListener('fetch', event => { event.respondWith( caches.match(event.request) .then(response => { // μΊμ ννΈ - μλ΅ λ°ν if (response) { return response; } // μΊμμ μμ - λ€νΈμν¬μμ κ°μ Έμ€κΈ° return fetch(event.request); }) ); }); ```μ΄ μμ μμλ μ ν리μΌμ΄μ
μ μ λ²μ μ λ°°ν¬ν λλ§λ€ CACHE_VERSION λ³μκ° μ¦κ°ν©λλ€. κ·Έλ° λ€μ CACHE_NAMEμ CACHE_VERSIONμ μ¬μ©νμ¬ λμ μΌλ‘ μμ±λ©λλ€. νμ±ν λ¨κ³μμ μλΉμ€ μ컀λ κΈ°μ‘΄μ λͺ¨λ μΊμλ₯Ό μννλ©° νμ¬ CACHE_NAMEκ³Ό μΌμΉνμ§ μλ μΊμλ₯Ό μμ ν©λλ€.
μ₯μ :
- μ¬μ©μκ° νμ μ΅μ λ²μ μ μμ°μ λ°λλ‘ λ³΄μ₯ν¨
- μ€λλ μΊμλ 리μμ€λ‘ μΈν λ¬Έμ λ₯Ό λ°©μ§ν¨
λ¨μ :
CACHE_VERSIONλ³μλ₯Ό μ μ€νκ² κ΄λ¦¬ν΄μΌ ν¨
μλΉμ€ μ컀 μ λ°μ΄νΈ κ΄λ¦¬λ₯Ό μν λͺ¨λ² μ¬λ‘
- λͺ νν λ²μ κ΄λ¦¬ μ λ΅ κ΅¬ν: μΊμ λ²μ κ΄λ¦¬λ₯Ό μ¬μ©νμ¬ μ λ°μ΄νΈκ° μ¬λ°λ₯΄κ² μ μ©λλλ‘ ν©λλ€.
- μ¬μ©μμκ² μ λ°μ΄νΈ μλ¦Ό: μλ¦Όμ΄λ μκ°μ νμκΈ°λ₯Ό ν΅ν΄ μ λ°μ΄νΈ νλ‘μΈμ€μ λν νΌλλ°±μ μ¬μ©μμκ² μ 곡ν©λλ€.
- μ² μ ν ν μ€νΈ: μ λ°μ΄νΈ μ λ΅μ΄ μμλλ‘ μλνκ³ μκΈ°μΉ μμ λμμ μΌμΌν€μ§ μλμ§ μ² μ ν ν μ€νΈν©λλ€.
- μ°μν μ€λ₯ μ²λ¦¬: μ λ°μ΄νΈ νλ‘μΈμ€ μ€μ λ°μν μ μλ μ€λ₯λ₯Ό ν¬μ°©νκΈ° μν΄ μ€λ₯ μ²λ¦¬λ₯Ό ꡬνν©λλ€.
- μ ν리μΌμ΄μ
μ 볡μ‘μ± κ³ λ €: μ ν리μΌμ΄μ
μ 볡μ‘μ±μ μ ν©ν μ
λ°μ΄νΈ μ λ΅μ μ νν©λλ€. κ°λ¨ν μ ν리μΌμ΄μ
μ
skipWaiting()κ³Όclients.claim()μ μ¬μ©ν μ μμ§λ§, λ 볡μ‘ν μ ν리μΌμ΄μ μ λ³΄λ€ μ μ΄λ μ κ·Ό λ°©μμ΄ νμν μ μμ΅λλ€. - λΌμ΄λΈλ¬λ¦¬ μ¬μ©: μ λ°μ΄νΈ κ΄λ¦¬λ₯Ό λ¨μννκΈ° μν΄ `workbox-window`μ κ°μ λΌμ΄λΈλ¬λ¦¬ μ¬μ©μ κ³ λ €ν©λλ€.
- μλΉμ€ μ컀 μν λͺ¨λν°λ§: λΈλΌμ°μ κ°λ°μ λꡬλ λͺ¨λν°λ§ μλΉμ€λ₯Ό μ¬μ©νμ¬ μλΉμ€ μ컀μ μνμ μ±λ₯μ μΆμ ν©λλ€.
κΈλ‘λ² κ³ λ € μ¬ν
κΈλ‘λ² μ¬μ©μλ₯Ό λμμΌλ‘ PWAλ₯Ό κ°λ°ν λ λ€μ μ¬νμ κ³ λ €νμμμ€:
- λ€νΈμν¬ μ‘°κ±΄: μ§μλ§λ€ μ¬μ©μμ λ€νΈμν¬ μλμ μμ μ±μ΄ λ€λ₯Ό μ μμ΅λλ€. μ΄λ¬ν μ°¨μ΄λ₯Ό κ³ λ €νμ¬ μΊμ± μ λ΅μ μ΅μ ννμμμ€.
- μΈμ΄ λ° νμ§ν: μ λ°μ΄νΈ μλ¦Όμ΄ μ¬μ©μμ μΈμ΄λ‘ νμ§νλμλμ§ νμΈνμμμ€.
- μκ°λ: λ°±κ·ΈλΌμ΄λ μ λ°μ΄νΈλ₯Ό μμ½ν λ μκ°λ μ°¨μ΄λ₯Ό κ³ λ €νμμμ€.
- λ°μ΄ν° μ¬μ©λ: νΉν λ°μ΄ν° μκΈμ κ° μ νμ μ΄κ±°λ λΉμΌ μ§μμ μ¬μ©μλ₯Ό μν΄ λ°μ΄ν° μ¬μ© λΉμ©μ μ μνμμμ€. μΊμλ μμ°μ ν¬κΈ°λ₯Ό μ΅μννκ³ ν¨μ¨μ μΈ μΊμ± μ λ΅μ μ¬μ©νμμμ€.
κ²°λ‘
μλΉμ€ μ컀 μ λ°μ΄νΈλ₯Ό ν¨κ³Όμ μΌλ‘ κ΄λ¦¬νλ κ²μ PWA μ¬μ©μμκ² μννκ³ μ΅μ κ²½νμ μ 곡νλ λ° λ§€μ° μ€μν©λλ€. μλΉμ€ μ컀 μ λ°μ΄νΈ μλͺ μ£ΌκΈ°λ₯Ό μ΄ν΄νκ³ μ μ ν μ λ°μ΄νΈ μ λ΅μ ꡬνν¨μΌλ‘μ¨ μ¬μ©μκ° νμ μ΅μ κΈ°λ₯κ³Ό λ²κ·Έ μμ μ μ κ·Όν μ μλλ‘ λ³΄μ₯ν μ μμ΅λλ€. μ ν리μΌμ΄μ μ 볡μ‘μ±μ κ³ λ €νκ³ , μ² μ ν ν μ€νΈνλ©°, μ°μνκ² μ€λ₯λ₯Ό μ²λ¦¬νλ κ²μ μμ§ λ§μμμ€. μ΄ κΈμμλ κΈ°λ³Έ λΈλΌμ°μ λμμ μμ‘΄νλ κ²λΆν° `workbox-window` λΌμ΄λΈλ¬λ¦¬λ₯Ό νμ©νλ κ²κΉμ§ μ¬λ¬ μ λ΅μ λ€λ£¨μμ΅λλ€. μ΄λ¬ν μ΅μ μ μ μ€νκ² νκ°νκ³ μ¬μ©μμ κΈλ‘λ² μ»¨ν μ€νΈλ₯Ό κ³ λ €ν¨μΌλ‘μ¨ μ§μ μΌλ‘ νμν μ¬μ©μ κ²½νμ μ 곡νλ PWAλ₯Ό ꡬμΆν μ μμ΅λλ€.