- html5
- html5/VA
- html5/canvas
- html5/drag-and-drop
- html5/form
- html5/geolocation
- html5/offline-web-application
- html5/others-api
- html5/outline
- html5/overview
- html5/richtext-edit
- html5/video&audio
- html5/web-storage
- html5/web-workers
- html5/webSqlDatabase
- html5/websocket
- html5/λ¬Έμ μ
- html5practice/roundRect
- html5practice/μ¦κ²¨μ°ΎκΈ°λͺ©λ‘λ§λ€κΈ°
1. μ€νλΌμΈ μΉ μ΄ν리μΌμ΄μ ¶
- λ€νΈμν¬μ μ°κ²°λμ΄ μμ§ μμλ λμνλ μ΄ν리μΌμ΄μ
.
- μ€λ§νΈν°μ΄λ λ·λΆ λ±μ λͺ¨λ°μΌ μΉ λ¨λ§κΈ°μμ λ€νΈμν¬ μνμ κ΄κ³μμ΄ κ³μ μ¬μ©ν μ μλ€.
- ν΄λΌμ΄μΈνΈμ μΊμλ 리μμ€λ₯Ό μ¬μ©νμ¬ λμνλ€.
- μ΄ν리μΌμ΄μ
μ μλ΅μ±μ΄ μ’λ€.
- λ€νΈμν¬ μ μμ΄ μ€μ΄λ λ€.
- μ μ κ΄λ¦¬μλ μ 리νλ€.
- μ΄ν리μΌμ΄μ
μ μλ΅μ±μ΄ μ’λ€.
2. μ΄ν리μΌμ΄μ μΊμ ¶
- μΉ μ΄ν리μΌμ΄μ
μ μ€νλΌμΈμμλ μ¬μ©ν μ μλλ‘ λ¦¬μμ€λ₯Ό ν΄λΌμ΄μΈνΈ μͺ½μ μΊμνκΈ° μν κΈ°λ₯.
- 리μμ€
- μΉ μ΄ν리μΌμ΄μ
μ ꡬμ±νλ HTML νμΌμ΄λ CSS, JavaScript, μ΄λ―Έμ§ νμΌ λ± URLμ μ§μ νμ¬ λΈλΌμ°μ‘°λ‘ μ‘μΈμ€νλ νμΌ.
- μΉ μ΄ν리μΌμ΄μ
μ ꡬμ±νλ HTML νμΌμ΄λ CSS, JavaScript, μ΄λ―Έμ§ νμΌ λ± URLμ μ§μ νμ¬ λΈλΌμ°μ‘°λ‘ μ‘μΈμ€νλ νμΌ.
- μ΄ν리μΌμ΄μ
μΊμλ₯Ό μ΄μ©νλ©΄ μΉ μ΄ν리μΌμ΄μ
μ μμ΄ νμμ μΈ λ¦¬μμ€λ μΊμ λ§€λνμ€νΈμ κΈ°λ‘νμ¬ λΈλΌμ°μ μ μν΄ μλμΌλ‘ μΊμλκ² νλ€.
- μΊμ λ§€λνμ€νΈ
- μΊμν΄μΌ ν 리μμ€λ₯Ό λΈλΌμ°μ μ μ λ¬νλ ν
μ€νΈ νμΌ.
- νμ₯μλ '.manifest'λ‘ μ§μ νλ κ²μ΄ κ΄λ‘μ΄λ€.
- λΈλΌμ°μ μ μν΄ λ€μ΄λ‘λλλ νμΌμ΄λ―λ‘ μΉ μλ²μμ 곡κ°ν νμκ° μλ€.
- 'text/cache-manifest'λΌλ MIME νμ
μΌλ‘ λ°°ν¬λλλ‘ μ€μ ν΄μΌ νλ€.
- μ) Apache HTTP Serverμμ μ€μ ν λλ mime.types νμΌμ μμ νλ©΄ λλ€.
- μ) Apache HTTP Serverμμ μ€μ ν λλ mime.types νμΌμ μμ νλ©΄ λλ€.
- μΊμ λ§€λνμ€νΈμ URLμ html μμμ manifest μμ±μ μ§μ ν΄μΌ νλ€.
<!DOCTYPE html> <html manifest="hello.manifest"> ... </html>
- μΊμν΄μΌ ν 리μμ€λ₯Ό λΈλΌμ°μ μ μ λ¬νλ ν
μ€νΈ νμΌ.
3. μΊμ μ λ°μ΄νΈ ¶
- μ
λ°μ΄νΈ μ²΄ν¬ μ λ§μ μμ λ€νΈμν¬ λ¦¬μμ€λ₯Ό μλΉνλ―λ‘ μ΄ν리μΌμ΄μ
μΊμλ λͺ¨λ 리μμ€μ λν΄ μ
λ°μ΄νΈλ₯Ό 체ν¬νλ κ²μ΄ μλλΌ μΊμ λ§€λνμ€νΈλ§μ 체ν¬νλ€.
- μ
λ°μ΄νΈ 체ν¬λ μΊμλ μΉ μ΄ν리μΌμ΄μ
μ μ¬μ©μκ° μ‘μΈμ€ν λ μ΄λ£¨μ΄μ§λ€. νΉμ
- JavaScript APIλ₯Ό μ΄μ©νμ¬ λͺ
μμ μΌλ‘ 체ν¬ν μ μλ€.
- (p247 11.2 κ·Έλ¦Ό μ½μ
)
4.1. κ·μΉ ¶
- text/cache-manifest νμ
μΌλ‘ λ°°ν¬ν΄μΌ νλ€.
- λ¬Έμ μΈμ½λ©μ UTF-8μ΄μ΄μΌ νλ€.
- μ€ λ°κΏ μ½λλ '\r\n', '\n', '\r' λͺ¨λ μ¬μ©ν μ μλ€.
- 첫 μ€μ 'CACHE MANIFEST'λΌλ λ¬Έμμ΄λ‘ μμν΄μΌ νλ€.
- '#'λ‘ μμνλ νμ μ£Όμμ΄λ€.
- κ° νλͺ©μ μ€ λ°κΏμΌλ‘ ꡬλΆλλ€.
- μλ κ²½λ‘λ₯Ό μ΄μ©ν λλ λ§€λνμ€νΈλ₯Ό κΈ°μ€μΌλ‘ νμ¬ URLλ₯Ό νμνλ€.
- λͺ¨λ URLμ λ©μΈ νμ΄μ§μ κ°μ λλ©μΈμ μμλμ΄μΌ νλ€.
- λ©μΈ νμ΄μ§
- manifest μμ±μ μ§μ ν html μμλ₯Ό κ°μ§ νμ΄μ§.
- manifest μμ±μ μ§μ ν html μμλ₯Ό κ°μ§ νμ΄μ§.
4.2. μΉμ ¶
- 'CACHE', 'FALLBACK', 'NETWORK' μΉμ
μ΄ μλ€.
- μΉμ
μ μμνλ €λ©΄ μΉμ
μ΄λ¦μ μ½λ‘ (:)μ λΆμΈ λ€μ μ€μ λ°κΎΌλ€.
- μΉμ
λ²μλ λ€λ₯Έ μΉμ
μ μμν λ κΉμ§μ΄λ€.
- νλμ νμΌ μμ κ°μ μΉμ
μ μ¬λ¬λ² λ±λ‘ν μ μλ€.
- μΉμ
μ λͺ
μμ μΌλ‘ μ§μ νμ§ μμΌλ©΄ κΈ°λ³Έκ°μΌλ‘ 'CACHE' μΉμ
μ΄ λλ€.
4.2.1. CACHE μΉμ ¶
- μΊμν 리μμ€μ URLμ μ§μ νκΈ° μν μΉμ
μ΄λ€.
- λ©μΈ νμ΄μ§λ CACHE μΉμ
μ μ§μ νμ§ μλλΌλ μλμΌλ‘ μΊμλλ€.
- κ΄λ¦¬λ λλ²κ·Έμ λΆλ΄μ λκΈ° μν΄ λ©μΈ νμ΄μ§λ₯Ό ν¬ν¨νμ¬ μΊμλλ λͺ¨λ 리μμ€λ₯Ό μΊμ λ§€λνμ€νΈμ μ§μ ν΄ λλ κ²μ΄ μ’λ€.
- κ΄λ¦¬λ λλ²κ·Έμ λΆλ΄μ λκΈ° μν΄ λ©μΈ νμ΄μ§λ₯Ό ν¬ν¨νμ¬ μΊμλλ λͺ¨λ 리μμ€λ₯Ό μΊμ λ§€λνμ€νΈμ μ§μ ν΄ λλ κ²μ΄ μ’λ€.
4.2.2. FALLBACK μΉμ ¶
- μ§μ λ URLμ 리μμ€κ° μμ λ μ΄λ₯Ό λμ ν 리μμ€λ₯Ό μ§μ νλ μΉμ
μ΄λ€.
- 맨 μ²μ ν΄λ°± λμμ΄ λλ URLμ μ κ³ κ³΅λ°±μ΄λ ν λ€μ λ체 리μμ€μ URLμ μ λλ€.
- ν΄λ°± λμμ΄ λλ URLμ μ λ°©μΌμΉ κ²μ λ°©μμΌλ‘ νμΈλλ€.
- νλμ URLμ΄ μ¬λ¬ κ°μ ν΄λ°± URLμ μΌμΉν λλ κ°μ₯ κΈ΄ ν΄λ°± URLμ΄ μ μ©λλ€.
- FALLBACK μΉμ
μ μ¨λΌμΈ/μ€νλΌμΈμ μκ΄μμ΄ μ μ©λλ€.
- μ
FALLBACK: ./ fallback.html
4.2.3. NETWORK μΉμ ¶
- NETWORK μΉμ
μμ μ§μ λ URLκ³Ό μΌμΉνλ 리μμ€λ μΊμλμ§ μκ³ λ°λμ λ€νΈμν¬λ₯Ό ν΅ν΄ μ‘μΈμ€λ₯Ό μλνλ€.
- NETWORK μΉμ
μ μ§μ λ URLμ μ λ°©μΌμΉ κ²μ λ°©μμΌλ‘ νμΈλλ€.
- μ
NETWORK: /api/
- '/api/user'λ '/api/friend'λ±μ URLμ μ΄λ κ²μ΄λ λ°λμ μ¨λΌμΈμΌλ‘ μ‘μΈμ€νκ² λλ€.
- NETWORK μΉμ
μ μ§μ ν URLμ΄ λ€λ₯Έ μΉμ
λ΄μ©κ³Ό μΆ©λν κ²½μ° λΈλΌμ°μ μ λ°λΌ μμΈ‘νμ§ λͺ»νλ λμμ λ³΄μΌ λλ μλ€.
- NETWORK μΉμ
μ μ§μ ν λμ URLμ νΉμ λλ ν°λ¦¬ μ΄νλ‘ νμ νλ λ± μ κ²½μ μ¨μΌ νλ€.
- NETWORK μΉμ
μ μ§μ ν λμ URLμ νΉμ λλ ν°λ¦¬ μ΄νλ‘ νμ νλ λ± μ κ²½μ μ¨μΌ νλ€.
4.2.3.1. μ¨λΌμΈ νμ΄νΈ 리μ€νΈ ¶
- NETWORK μΉμ
μ μ§μ λ URL
- νμ΄νΈ 리μ€νΈ νμ
- μμΉμ μΌλ‘ κΈμ§νκ³ νμ©ν κ²λ€λ§ μ μνλ λ°©μμ΄λ€.
- μμΉμ μΌλ‘ κΈμ§νκ³ νμ©ν κ²λ€λ§ μ μνλ λ°©μμ΄λ€.
- μ€νλΌμΈ μΉ μ΄ν리μΌμ΄μ
μ΄ μ‘μΈμ€ν μ μλ URLμ νμ΄νΈ 리μ€νΈ νμμΌλ‘ μ§μ νλ€.
- λ€νΈμν¬λ‘ μ‘μΈμ€ν URLμ κ°μ λλ©μΈμΌλ‘ νμ νκ³ URLλ νμ νλ©΄ 보μμ ν₯μμν¬ μ μκ³ λλ²κ·ΈνκΈ°λ μ¬μμ§λ€.
- λ€λ₯Έ μΉ μ¬μ΄νΈμ λν λ€νΈμν¬κ° κΈμ§λμ΄ λ§€μμ
μ μννλλ‘ λ§λ€μ΄μ§ μΉ μ΄ν리μΌμ΄μ
μμ λ¬Έμ κ° λκΈ°λ νλ€.
- NETWORK μΉμ
μ '*'λ§ μ§μ νμ¬ λͺ¨λ URLμ λν΄ λ€νΈμν¬ μ‘μΈμ€λ₯Ό 'μμΉμ κΈμ§'μμ 'μμΉμ νκ°'λ‘ λ³κ²½ν μ μλ€.
- μ νμ νΌν μ μμ΄ νΈλ¦¬νμ§λ§ μ¬μ©μ μ μ€μ κΈ°ν΄μΌνλ€.
- μ
NETWORK: *
- NETWORK μΉμ
μ '*'λ§ μ§μ νμ¬ λͺ¨λ URLμ λν΄ λ€νΈμν¬ μ‘μΈμ€λ₯Ό 'μμΉμ κΈμ§'μμ 'μμΉμ νκ°'λ‘ λ³κ²½ν μ μλ€.
5. APIμ μ΄λ²€νΈ ¶
- JavaScriptλ₯Ό μ΄μ©νλ©΄ μ΄ν리μΌμ΄μ
μΊμμ λμμ μΈμΈνκ² μ μ΄ν μ μλ€.
- applicationCache μμ±μ μ°Έμ‘°νμ¬ JavaScriptμμ μ΄ν리μΌμ΄μ
μΊμμ μ‘μΈμ€ ν μ μλ€.
- 'window.applicationCache', λλ 'applicationCache'
- 'window.applicationCache', λλ 'applicationCache'
- μ΄ν리μΌμ΄μ
μΊμ κ°μ²΄μ μμ±κ³Ό λ©μλ
- status
- μ΄ν리μΌμ΄μ
μΊμμ μνλ₯Ό λνλ΄λ μ μ«κ°.
- μ΄ν리μΌμ΄μ
μΊμμ μνλ₯Ό λνλ΄λ μ μ«κ°.
- status
μμ | μ€λͺ |
UNCACHED | μΊμνμ§ μμ |
IDLE | μ΅μ μΊμλ₯Ό μ΄μ© μ€ |
CHECKING | μ λ°μ΄νΈ μ²΄ν¬ μ€ |
DOWNLOADING | μ λ°μ΄νΈ λ€μ΄λ‘λ μ€ |
UPDATEREADY | μ΅μ μΊμλ₯Ό μ΄μ©ν μ μμ |
OBSOLETE | μλ¬μ μν΄ μΉ΄μ 무ν¨ν |
- update()
- μΊμ μ
λ°μ΄νΈ μ²λ¦¬λ₯Ό λͺ
μμ μΌλ‘ μννλ€.
- μ
λ°μ΄νΈλ λΉλκΈ°λ‘ μ§νλλ€.
- μΊμ μ
λ°μ΄νΈ μ²λ¦¬λ₯Ό λͺ
μμ μΌλ‘ μννλ€.
- swapCache()
- μ΄ν리μΌμ΄μ
μΊμλ₯Ό μ΅μ λ΄μ©μΌλ‘ λ°κΎΌλ€.
- (p.254 11.4 κ·Έλ¦Ό μ½μ
)
- μ΄ν리μΌμ΄μ
μΊμλ₯Ό μ΅μ λ΄μ©μΌλ‘ λ°κΎΌλ€.
- μ΄ν리μΌμ΄μ
μΊμ μ΄λ²€νΈ
μμ | μ€λͺ |
checking | μ λ°μ΄νΈ μ²΄ν¬ μ€ |
error | μ λ°μ΄νΈκ° μλ¬λ‘ μ’ λ£ |
noupdate | λ©λνμ€νΈκ° μ λ°μ΄νΈλμ§ μμ |
downloading | μ λ°μ΄νΈ λ€μ΄λ‘λ μ€ |
progress | μ λ°μ΄νΈ λ€μ΄λ‘λ μ€ |
updateready | μ΅μ μΊμ μ»κΈ° μλ£. swapCache()λ₯Ό νΈμΆν μ μμ |
cached | μΊμ μλ£ |
obsolete | λ§€λνμ€νΈ μ»κΈ°μ μ€ν¨νμ¬ μΊμλ₯Ό 무ν¨λ‘ ν¨ |
6. TIPS ¶
- λ§€λνμ€νΈμ λ²μ λ¬Έμμ΄μ ν¬ν¨ν΄ λλ€.
- 리μμ€κ° λ³κ²½λλ©΄ λ°λμ λ§€λνμ€νΈλ μ
λ°μ΄νΈ λλλ‘ νλ€.
- λ§€λνμ€νΈ νμΌμ λμ μΌλ‘ μμ±νλ€.
- κ°λ° μ€μλ μ΄ν리μΌμ΄μ
μΊμλ₯Ό μ¬μ©νμ§ μλλ€.
- λ§€λνμ€νΈ νμΌμ λμ μΌλ‘ μμ±νλ€.
- μ€νλΌμΈ λ μ΄λ£¨μ΄μ§λ λ°μ΄ν° μ
λ°μ΄νΈλ λ‘컬 μ€ν 리μ§μ μ μ₯νλ€.