[[pagelist(html5)]] [[TableOfContents]] = 오프ë¼ì¸ 웹 어플리케ì´ì…˜ = * 네트워í¬ì— ì—°ê²°ë˜ì–´ 있지 ì•Šì•„ë„ ë™ìž‘하는 어플리케ì´ì…˜. * 스마트í°ì´ë‚˜ ë„·ë¶ ë“±ì˜ ëª¨ë°”ì¼ ì›¹ 단ë§ê¸°ì—ì„œ ë„¤íŠ¸ì›Œí¬ ìƒíƒœì™€ ê´€ê³„ì—†ì´ ê³„ì† ì‚¬ìš©í• ìˆ˜ 있다. * í´ë¼ì´ì–¸íŠ¸ì— ìºì‹œëœ 리소스를 사용하여 ë™ìž‘한다. * 어플리케ì´ì…˜ì˜ ì‘ë‹µì„±ì´ ì¢‹ë‹¤. * ë„¤íŠ¸ì›Œí¬ ì ‘ì†ì´ ì¤„ì–´ë“ ë‹¤. * ì „ì› ê´€ë¦¬ì—ë„ ìœ ë¦¬í•˜ë‹¤. = 어플리케ì´ì…˜ ìºì‹œ = * 웹 어플리케ì´ì…˜ì„ 오프ë¼ì¸ì—ì„œë„ ì‚¬ìš©í• ìˆ˜ 있ë„ë¡ ë¦¬ì†ŒìŠ¤ë¥¼ í´ë¼ì´ì–¸íŠ¸ ìª½ì— ìºì‹œí•˜ê¸° 위한 기능. * 리소스 * 웹 어플리케ì´ì…˜ì„ 구성하는 HTML 파ì¼ì´ë‚˜ CSS, JavaScript, ì´ë¯¸ì§€ íŒŒì¼ ë“± URLì„ ì§€ì •í•˜ì—¬ 브ë¼ìš°ì¡°ë¡œ 액세스하는 파ì¼. * 어플리케ì´ì…˜ ìºì‹œë¥¼ ì´ìš©í•˜ë©´ 웹 어플리케ì´ì…˜ì— 있어 필수ì ì¸ ë¦¬ì†ŒìŠ¤ëŠ” ìºì‹œ ë§¤ë‹ˆíŽ˜ìŠ¤íŠ¸ì— ê¸°ë¡í•˜ì—¬ 브ë¼ìš°ì €ì— ì˜í•´ ìžë™ìœ¼ë¡œ ìºì‹œë˜ê²Œ 한다. * ìºì‹œ 매니페스트 * ìºì‹œí•´ì•¼ í• ë¦¬ì†ŒìŠ¤ë¥¼ 브ë¼ìš°ì €ì— ì „ë‹¬í•˜ëŠ” í…스트 파ì¼. * 확장ìžëŠ” '.manifest'ë¡œ ì§€ì •í•˜ëŠ” ê²ƒì´ ê´€ë¡€ì´ë‹¤. * 브ë¼ìš°ì €ì— ì˜í•´ 다운로드ë˜ëŠ” 파ì¼ì´ë¯€ë¡œ 웹 서버ì—ì„œ ê³µê°œí• í•„ìš”ê°€ 있다. * 'text/cache-manifest'ë¼ëŠ” MIME 타입으로 ë°°í¬ë˜ë„ë¡ ì„¤ì •í•´ì•¼ 한다. * 예) Apache HTTP Serverì—ì„œ ì„¤ì •í• ë•ŒëŠ” mime.types 파ì¼ì„ ìˆ˜ì •í•˜ë©´ ëœë‹¤. * ìºì‹œ ë§¤ë‹ˆíŽ˜ìŠ¤íŠ¸ì˜ URLì„ html ìš”ì†Œì˜ manifest ì†ì„±ì— ì§€ì •í•´ì•¼ 한다. * {{{ <!DOCTYPE html> <html manifest="hello.manifest"> ... </html> }}} = ìºì‹œ ì—…ë°ì´íŠ¸ = * ì—…ë°ì´íŠ¸ ì²´í¬ ì‹œ ë§Žì€ ì–‘ì˜ ë„¤íŠ¸ì›Œí¬ ë¦¬ì†ŒìŠ¤ë¥¼ 소비하므로 어플리케ì´ì…˜ ìºì‹œëŠ” ëª¨ë“ ë¦¬ì†ŒìŠ¤ì— ëŒ€í•´ ì—…ë°ì´íŠ¸ë¥¼ ì²´í¬í•˜ëŠ” ê²ƒì´ ì•„ë‹ˆë¼ ìºì‹œ ë§¤ë‹ˆíŽ˜ìŠ¤íŠ¸ë§Œì„ ì²´í¬í•œë‹¤. * ì—…ë°ì´íŠ¸ ì²´í¬ëŠ” ìºì‹œëœ 웹 어플리케ì´ì…˜ì— 사용ìžê°€ ì•¡ì„¸ìŠ¤í• ë•Œ ì´ë£¨ì–´ì§„다. í˜¹ì€ * JavaScript API를 ì´ìš©í•˜ì—¬ 명시ì 으로 ì²´í¬í• 수 있다. * (p247 11.2 그림 삽입) = ìºì‹œ 매니페스트 = == 규칙 == * text/cache-manifest 타입으로 ë°°í¬í•´ì•¼ 한다. * ë¬¸ìž ì¸ì½”ë”©ì€ UTF-8ì´ì–´ì•¼ 한다. * 줄 바꿈 코드는 '\r\n', '\n', '\r' ëª¨ë‘ ì‚¬ìš©í• ìˆ˜ 있다. * 첫 ì¤„ì€ 'CACHE MANIFEST'ë¼ëŠ” 문ìžì—´ë¡œ 시작해야 한다. * '#'ë¡œ 시작하는 í–‰ì€ ì£¼ì„ì´ë‹¤. * ê° í•ëª©ì€ 줄 바꿈으로 구분ëœë‹¤. * ìƒëŒ€ 경로를 ì´ìš©í• 때는 매니페스트를 기준으로 하여 URL를 표시한다. * ëª¨ë“ URLì€ ë©”ì¸ íŽ˜ì´ì§€ì™€ ê°™ì€ ë„ë©”ì¸ì— 소ì†ë˜ì–´ì•¼ 한다. * ë©”ì¸ íŽ˜ì´ì§€ * manifest ì†ì„±ì„ ì§€ì •í•œ html 요소를 가진 페ì´ì§€. == 섹션 == * 'CACHE', 'FALLBACK', 'NETWORK' ì„¹ì…˜ì´ ìžˆë‹¤. * ì„¹ì…˜ì„ ì‹œìž‘í•˜ë ¤ë©´ 섹션 ì´ë¦„ì— ì½œë¡ (:)ì„ ë¶™ì¸ ë‹¤ìŒ ì¤„ì„ ë°”ê¾¼ë‹¤. * 섹션 범위는 다른 ì„¹ì…˜ì„ ì‹œìž‘í• ë•Œ 까지ì´ë‹¤. * í•˜ë‚˜ì˜ íŒŒì¼ ì•ˆì— ê°™ì€ ì„¹ì…˜ì„ ì—¬ëŸ¬ë²ˆ 등ë¡í• 수 있다. * ì„¹ì…˜ì„ ëª…ì‹œì 으로 ì§€ì •í•˜ì§€ 않으면 기본값으로 'CACHE' ì„¹ì…˜ì´ ëœë‹¤. === CACHE 섹션 === * ìºì‹œí• ë¦¬ì†ŒìŠ¤ì˜ URLì„ ì§€ì •í•˜ê¸° 위한 섹션ì´ë‹¤. * ë©”ì¸ íŽ˜ì´ì§€ëŠ” CACHE ì„¹ì…˜ì— ì§€ì •í•˜ì§€ ì•Šë”ë¼ë„ ìžë™ìœ¼ë¡œ ìºì‹œëœë‹¤. * 관리나 ë””ë²„ê·¸ì˜ ë¶€ë‹´ì„ ëœê¸° 위해 ë©”ì¸ íŽ˜ì´ì§€ë¥¼ í¬í•¨í•˜ì—¬ ìºì‹œë˜ëŠ” ëª¨ë“ ë¦¬ì†ŒìŠ¤ë¥¼ ìºì‹œ ë§¤ë‹ˆíŽ˜ìŠ¤íŠ¸ì— ì§€ì •í•´ ë‘는 ê²ƒì´ ì¢‹ë‹¤. === FALLBACK 섹션 === * ì§€ì •ëœ URLì˜ ë¦¬ì†ŒìŠ¤ê°€ ì—†ì„ ë•Œ ì´ë¥¼ ëŒ€ì‹ í• ë¦¬ì†ŒìŠ¤ë¥¼ ì§€ì •í•˜ëŠ” 섹션ì´ë‹¤. * 맨 ì²˜ìŒ í´ë°± 대ìƒì´ ë˜ëŠ” URLì„ ì ê³ ê³µë°±ì´ë‚˜ íƒ ë’¤ì— ëŒ€ì²´ ë¦¬ì†ŒìŠ¤ì˜ URLì„ ì 는다. * í´ë°± 대ìƒì´ ë˜ëŠ” URLì€ ì „ë°©ì¼ì¹˜ 검색 ë°©ì‹ìœ¼ë¡œ 확ì¸ëœë‹¤. * í•˜ë‚˜ì˜ URLì´ ì—¬ëŸ¬ ê°œì˜ í´ë°± URLì— ì¼ì¹˜í• 때는 가장 긴 í´ë°± URLì´ ì ìš©ëœë‹¤. * FALLBACK ì„¹ì…˜ì€ ì˜¨ë¼ì¸/오프ë¼ì¸ì— ìƒê´€ì—†ì´ ì ìš©ëœë‹¤. * 예 *{{{ FALLBACK: ./ fallback.html }}} === NETWORK 섹션 === * NETWORK 섹션 ì•ˆì— ì§€ì •ëœ URLê³¼ ì¼ì¹˜í•˜ëŠ” 리소스는 ìºì‹œë˜ì§€ ì•Šê³ ë°˜ë“œì‹œ 네트워í¬ë¥¼ 통해 액세스를 ì‹œë„한다. * NETWORK ì„¹ì…˜ì— ì§€ì •ëœ URLì€ ì „ë°©ì¼ì¹˜ 검색 ë°©ì‹ìœ¼ë¡œ 확ì¸ëœë‹¤. * 예 *{{{ NETWORK: /api/ }}} * '/api/user'나 '/api/friend'ë“±ì˜ URLì€ ì–´ëŠ ê²ƒì´ë“ 반드시 온ë¼ì¸ìœ¼ë¡œ 액세스하게 ëœë‹¤. * NETWORK ì„¹ì…˜ì— ì§€ì •í•œ URLì´ ë‹¤ë¥¸ 섹션 ë‚´ìš©ê³¼ 충ëŒí• 경우 브ë¼ìš°ì €ì— ë”°ë¼ ì˜ˆì¸¡í•˜ì§€ 못하는 ë™ìž‘ì„ ë³´ì¼ ë•Œë„ ìžˆë‹¤. * NETWORK ì„¹ì…˜ì— ì§€ì •í•œ ëŒ€ìƒ URLì€ íŠ¹ì • ë””ë ‰í„°ë¦¬ ì´í•˜ë¡œ í•œì •í•˜ëŠ” 등 ì‹ ê²½ì„ ì¨ì•¼ 한다. ==== 온ë¼ì¸ í™”ì´íŠ¸ 리스트 ==== = API와 ì´ë²¤íŠ¸ = = TIPS =