U E D R , A S I H C RSS
ZeroWiki

html5/offline-web-application


1. μ˜€ν”„λΌμΈ μ›Ή μ–΄ν”Œλ¦¬μΌ€μ΄μ…˜

  • λ„€νŠΈμ›Œν¬μ— μ—°κ²°λ˜μ–΄ μžˆμ§€ μ•Šμ•„λ„ λ™μž‘ν•˜λŠ” μ–΄ν”Œλ¦¬μΌ€μ΄μ…˜.
  • μŠ€λ§ˆνŠΈν°μ΄λ‚˜ 넷뢁 λ“±μ˜ λͺ¨λ°”일 μ›Ή λ‹¨λ§κΈ°μ—μ„œ λ„€νŠΈμ›Œν¬ μƒνƒœμ™€ 관계없이 계속 μ‚¬μš©ν•  수 μžˆλ‹€.
  • ν΄λΌμ΄μ–ΈνŠΈμ— μΊμ‹œλœ λ¦¬μ†ŒμŠ€λ₯Ό μ‚¬μš©ν•˜μ—¬ λ™μž‘ν•œλ‹€.
    • μ–΄ν”Œλ¦¬μΌ€μ΄μ…˜μ˜ 응닡성이 μ’‹λ‹€.
    • λ„€νŠΈμ›Œν¬ 접속이 쀄어든닀.
    • 전원 관리에도 μœ λ¦¬ν•˜λ‹€.

2. μ–΄ν”Œλ¦¬μΌ€μ΄μ…˜ μΊμ‹œ

  • μ›Ή μ–΄ν”Œλ¦¬μΌ€μ΄μ…˜μ„ μ˜€ν”„λΌμΈμ—μ„œλ„ μ‚¬μš©ν•  수 μžˆλ„λ‘ λ¦¬μ†ŒμŠ€λ₯Ό ν΄λΌμ΄μ–ΈνŠΈ μͺ½μ— μΊμ‹œν•˜κΈ° μœ„ν•œ κΈ°λŠ₯.
  • λ¦¬μ†ŒμŠ€
    • μ›Ή μ–΄ν”Œλ¦¬μΌ€μ΄μ…˜μ„ κ΅¬μ„±ν•˜λŠ” HTML νŒŒμΌμ΄λ‚˜ CSS, JavaScript, 이미지 파일 λ“± URL을 μ§€μ •ν•˜μ—¬ 브라우쑰둜 μ•‘μ„ΈμŠ€ν•˜λŠ” 파일.
  • μ–΄ν”Œλ¦¬μΌ€μ΄μ…˜ μΊμ‹œλ₯Ό μ΄μš©ν•˜λ©΄ μ›Ή μ–΄ν”Œλ¦¬μΌ€μ΄μ…˜μ— μžˆμ–΄ ν•„μˆ˜μ μΈ λ¦¬μ†ŒμŠ€λŠ” μΊμ‹œ λ§€λ‹ˆνŽ˜μŠ€νŠΈμ— κΈ°λ‘ν•˜μ—¬ λΈŒλΌμš°μ €μ— μ˜ν•΄ μžλ™μœΌλ‘œ μΊμ‹œλ˜κ²Œ ν•œλ‹€.
  • μΊμ‹œ λ§€λ‹ˆνŽ˜μŠ€νŠΈ
    • μΊμ‹œν•΄μ•Ό ν•  λ¦¬μ†ŒμŠ€λ₯Ό λΈŒλΌμš°μ €μ— μ „λ‹¬ν•˜λŠ” ν…μŠ€νŠΈ 파일.
    • ν™•μž₯μžλŠ” '.manifest'둜 μ§€μ •ν•˜λŠ” 것이 관둀이닀.
    • λΈŒλΌμš°μ €μ— μ˜ν•΄ λ‹€μš΄λ‘œλ“œλ˜λŠ” νŒŒμΌμ΄λ―€λ‘œ μ›Ή μ„œλ²„μ—μ„œ κ³΅κ°œν•  ν•„μš”κ°€ μžˆλ‹€.
    • 'text/cache-manifest'λΌλŠ” MIME νƒ€μž…μœΌλ‘œ λ°°ν¬λ˜λ„λ‘ μ„€μ •ν•΄μ•Ό ν•œλ‹€.
      • 예) Apache HTTP Serverμ—μ„œ μ„€μ •ν•  λ•ŒλŠ” mime.types νŒŒμΌμ„ μˆ˜μ •ν•˜λ©΄ λœλ‹€.
    • μΊμ‹œ λ§€λ‹ˆνŽ˜μŠ€νŠΈμ˜ URL을 html μš”μ†Œμ˜ manifest 속성에 지정해야 ν•œλ‹€.

      • <!DOCTYPE html>
<html manifest="hello.manifest">
...
</html>

3. μΊμ‹œ μ—…λ°μ΄νŠΈ

  • μ—…λ°μ΄νŠΈ 체크 μ‹œ λ§Žμ€ μ–‘μ˜ λ„€νŠΈμ›Œν¬ λ¦¬μ†ŒμŠ€λ₯Ό μ†ŒλΉ„ν•˜λ―€λ‘œ μ–΄ν”Œλ¦¬μΌ€μ΄μ…˜ μΊμ‹œλŠ” λͺ¨λ“  λ¦¬μ†ŒμŠ€μ— λŒ€ν•΄ μ—…λ°μ΄νŠΈλ₯Ό μ²΄ν¬ν•˜λŠ” 것이 μ•„λ‹ˆλΌ μΊμ‹œ λ§€λ‹ˆνŽ˜μŠ€νŠΈλ§Œμ„ μ²΄ν¬ν•œλ‹€.
  • μ—…λ°μ΄νŠΈ μ²΄ν¬λŠ” μΊμ‹œλœ μ›Ή μ–΄ν”Œλ¦¬μΌ€μ΄μ…˜μ— μ‚¬μš©μžκ°€ μ•‘μ„ΈμŠ€ν•  λ•Œ 이루어진닀. ν˜Ήμ€
  • JavaScript APIλ₯Ό μ΄μš©ν•˜μ—¬ λͺ…μ‹œμ μœΌλ‘œ 체크할 수 μžˆλ‹€.
  • (p247 11.2 κ·Έλ¦Ό μ‚½μž…)

4. μΊμ‹œ λ§€λ‹ˆνŽ˜μŠ€νŠΈ

4.1. κ·œμΉ™

  • text/cache-manifest νƒ€μž…μœΌλ‘œ 배포해야 ν•œλ‹€.
  • 문자 인코딩은 UTF-8이어야 ν•œλ‹€.
  • 쀄 λ°”κΏˆ μ½”λ“œλŠ” '\r\n', '\n', '\r' λͺ¨λ‘ μ‚¬μš©ν•  수 μžˆλ‹€.
  • 첫 쀄은 'CACHE MANIFEST'λΌλŠ” λ¬Έμžμ—΄λ‘œ μ‹œμž‘ν•΄μ•Ό ν•œλ‹€.
  • '#'둜 μ‹œμž‘ν•˜λŠ” 행은 주석이닀.
  • 각 ν•­λͺ©μ€ 쀄 λ°”κΏˆμœΌλ‘œ κ΅¬λΆ„λœλ‹€.
  • μƒλŒ€ 경둜λ₯Ό μ΄μš©ν•  λ•ŒλŠ” λ§€λ‹ˆνŽ˜μŠ€νŠΈλ₯Ό κΈ°μ€€μœΌλ‘œ ν•˜μ—¬ URLλ₯Ό ν‘œμ‹œν•œλ‹€.
  • λͺ¨λ“  URL은 메인 νŽ˜μ΄μ§€μ™€ 같은 도메인에 μ†Œμ†λ˜μ–΄μ•Ό ν•œλ‹€.
  • 메인 νŽ˜μ΄μ§€
    • 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은 νŠΉμ • 디렉터리 μ΄ν•˜λ‘œ ν•œμ •ν•˜λŠ” λ“± 신경을 써야 ν•œλ‹€.

4.2.3.1. 온라인 ν™”μ΄νŠΈ 리슀트

  • NETWORK μ„Ήμ…˜μ— μ§€μ •λœ URL
  • ν™”μ΄νŠΈ 리슀트 ν˜•μ‹
    • μ›μΉ™μ μœΌλ‘œ κΈˆμ§€ν•˜κ³  ν—ˆμš©ν•  κ²ƒλ“€λ§Œ μ •μ˜ν•˜λŠ” 방식이닀.
  • μ˜€ν”„λΌμΈ μ›Ή μ–΄ν”Œλ¦¬μΌ€μ΄μ…˜μ΄ μ•‘μ„ΈμŠ€ν•  수 μžˆλŠ” URL을 ν™”μ΄νŠΈ 리슀트 ν˜•μ‹μœΌλ‘œ μ§€μ •ν•œλ‹€.
  • λ„€νŠΈμ›Œν¬λ‘œ μ•‘μ„ΈμŠ€ν•  URL을 같은 λ„λ©”μΈμœΌλ‘œ ν•œμ •ν•˜κ³  URL도 ν•œμ •ν•˜λ©΄ λ³΄μ•ˆμ„ ν–₯μƒμ‹œν‚¬ 수 있고 λ””λ²„κ·Έν•˜κΈ°λ„ μ‰¬μ›Œμ§„λ‹€.
  • λ‹€λ₯Έ μ›Ή μ‚¬μ΄νŠΈμ— λŒ€ν•œ λ„€νŠΈμ›Œν¬κ°€ κΈˆμ§€λ˜μ–΄ λ§€μ‹œμ—…μ„ μˆ˜ν–‰ν•˜λ„λ‘ λ§Œλ“€μ–΄μ§„ μ›Ή μ–΄ν”Œλ¦¬μΌ€μ΄μ…˜μ—μ„œ λ¬Έμ œκ°€ λ˜κΈ°λ„ ν•œλ‹€.
    • NETWORK μ„Ήμ…˜μ— '*'만 μ§€μ •ν•˜μ—¬ λͺ¨λ“  URL에 λŒ€ν•΄ λ„€νŠΈμ›Œν¬ μ•‘μ„ΈμŠ€λ₯Ό '원칙적 κΈˆμ§€'μ—μ„œ '원칙적 ν—ˆκ°€'둜 λ³€κ²½ν•  수 μžˆλ‹€.
    • μ œν•œμ„ ν”Όν•  수 μžˆμ–΄ νŽΈλ¦¬ν•˜μ§€λ§Œ μ‚¬μš©μ‹œ 신쀑을 κΈ°ν•΄μ•Όν•œλ‹€.
    • 예

      • NETWORK:
*

5. API와 이벀트

  • JavaScriptλ₯Ό μ΄μš©ν•˜λ©΄ μ–΄ν”Œλ¦¬μΌ€μ΄μ…˜ μΊμ‹œμ˜ λ™μž‘μ„ μ„Έμ„Έν•˜κ²Œ μ œμ–΄ν•  수 μžˆλ‹€.
  • applicationCache 속성을 μ°Έμ‘°ν•˜μ—¬ JavaScriptμ—μ„œ μ–΄ν”Œλ¦¬μΌ€μ΄μ…˜ μΊμ‹œμ— μ•‘μ„ΈμŠ€ ν•  수 μžˆλ‹€.
    • 'window.applicationCache', λ˜λŠ” 'applicationCache'
  • μ–΄ν”Œλ¦¬μΌ€μ΄μ…˜ μΊμ‹œ 객체의 속성과 λ©”μ„œλ“œ
    • status
      • μ–΄ν”Œλ¦¬μΌ€μ΄μ…˜ μΊμ‹œμ˜ μƒνƒœλ₯Ό λ‚˜νƒ€λ‚΄λŠ” μ •μˆ«κ°’.
μƒμˆ˜ μ„€λͺ…
UNCACHED μΊμ‹œν•˜μ§€ μ•ŠμŒ
IDLE μ΅œμ‹  μΊμ‹œλ₯Ό 이용 쀑
CHECKING μ—…λ°μ΄νŠΈ 체크 쀑
DOWNLOADING μ—…λ°μ΄νŠΈ λ‹€μš΄λ‘œλ“œ 쀑
UPDATEREADY μ΅œμ‹  μΊμ‹œλ₯Ό μ΄μš©ν•  수 있음
OBSOLETE μ—λŸ¬μ— μ˜ν•΄ μΉ΄μ‹œ λ¬΄νš¨ν™”
  • update()
    • μΊμ‹œ μ—…λ°μ΄νŠΈ 처리λ₯Ό λͺ…μ‹œμ μœΌλ‘œ μˆ˜ν–‰ν•œλ‹€.
    • μ—…λ°μ΄νŠΈλŠ” λΉ„λ™κΈ°λ‘œ μ§„ν–‰λœλ‹€.
  • swapCache()
    • μ–΄ν”Œλ¦¬μΌ€μ΄μ…˜ μΊμ‹œλ₯Ό μ΅œμ‹  λ‚΄μš©μœΌλ‘œ λ°”κΎΌλ‹€.
    • (p.254 11.4 κ·Έλ¦Ό μ‚½μž…)
  • μ–΄ν”Œλ¦¬μΌ€μ΄μ…˜ μΊμ‹œ 이벀트
μƒμˆ˜ μ„€λͺ…
checking μ—…λ°μ΄νŠΈ 체크 쀑
error μ—…λ°μ΄νŠΈκ°€ μ—λŸ¬λ‘œ μ’…λ£Œ
noupdate λ©”λ‹ˆνŽ˜μŠ€νŠΈκ°€ μ—…λ°μ΄νŠΈλ˜μ§€ μ•ŠμŒ
downloading μ—…λ°μ΄νŠΈ λ‹€μš΄λ‘œλ“œ 쀑
progress μ—…λ°μ΄νŠΈ λ‹€μš΄λ‘œλ“œ 쀑
updateready μ΅œμ‹  μΊμ‹œ μ–»κΈ° μ™„λ£Œ. swapCache()λ₯Ό ν˜ΈμΆœν•  수 있음
cached μΊμ‹œ μ™„λ£Œ
obsolete λ§€λ‹ˆνŽ˜μŠ€νŠΈ 얻기에 μ‹€νŒ¨ν•˜μ—¬ μΊμ‹œλ₯Ό 무효둜 함

6. TIPS

  • λ§€λ‹ˆνŽ˜μŠ€νŠΈμ— 버전 λ¬Έμžμ—΄μ„ 포함해 λ‘”λ‹€.
  • λ¦¬μ†ŒμŠ€κ°€ λ³€κ²½λ˜λ©΄ λ°˜λ“œμ‹œ λ§€λ‹ˆνŽ˜μŠ€νŠΈλ„ μ—…λ°μ΄νŠΈ λ˜λ„λ‘ ν•œλ‹€.
    • λ§€λ‹ˆνŽ˜μŠ€νŠΈ νŒŒμΌμ„ λ™μ μœΌλ‘œ μƒμ„±ν•œλ‹€.
    • 개발 μ€‘μ—λŠ” μ–΄ν”Œλ¦¬μΌ€μ΄μ…˜ μΊμ‹œλ₯Ό μ‚¬μš©ν•˜μ§€ μ•ŠλŠ”λ‹€.
  • μ˜€ν”„λΌμΈ λ•Œ μ΄λ£¨μ–΄μ§€λŠ” 데이터 μ—…λ°μ΄νŠΈλŠ” 둜컬 μŠ€ν† λ¦¬μ§€μ— μ €μž₯ν•œλ‹€.
Valid XHTML 1.0! Valid CSS! powered by MoniWiki
last modified 2021-02-07 05:31:40
Processing time 0.0466 sec