Difference between r1.1 and the current

@@ -2,8 +2,126 @@

[[TableOfContents]]

= 오프라인 웹 어플리케이션 =

= ~~애플리케이션~~ 캐시 =

* 네트워크에 연결되어 있지 않아도 동작하는 어플리케이션.

* 스마트폰이나 넷북 등의 모바일 웹 단말기에서 네트워크 상태와 관계없이 계속 사용할 수 있다.

* 클라이언트에 캐시된 리소스를 사용하여 동작한다.

* 어플리케이션의 응답성이 좋다.

* 네트워크 접속이 줄어든다.

* 전원 관리에도 유리하다.

= 어플리케이션 캐시 =

* 웹 어플리케이션을 오프라인에서도 사용할 수 있도록 리소스를 클라이언트 쪽에 캐시하기 위한 기능.

* 리소스

* 웹 어플리케이션을 구성하는 HTML 파일이나 CSS, JavaScript, 이미지 파일 등 URL을 지정하여 브라우조로 액세스하는 파일.

* 어플리케이션 캐시를 이용하면 웹 어플리케이션에 있어 필수적인 리소스는 캐시 매니페스트에 기록하여 브라우저에 의해 자동으로 캐시되게 한다.

* 캐시 매니페스트

* 캐시해야 할 리소스를 브라우저에 전달하는 텍스트 파일.

* 확장자는 '.manifest'로 지정하는 것이 관례이다.

* 브라우저에 의해 다운로드되는 파일이므로 웹 서버에서 공개할 필요가 있다.

* 'text/cache-manifest'라는 MIME 타입으로 배포되도록 설정해야 한다.

* 예) Apache HTTP Server에서 설정할 때는 mime.types 파일을 수정하면 된다.

* 캐시 매니페스트의 URL을 html 요소의 manifest 속성에 지정해야 한다.

* {{{

<!DOCTYPE html>

...

</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은 특정 디렉터리 이하로 한정하는 등 신경을 써야 한다.

==== 온라인 화이트 리스트 ====

* NETWORK 섹션에 지정된 URL

* 화이트 리스트 형식

* 원칙적으로 금지하고 허용할 것들만 정의하는 방식이다.

* 오프라인 웹 어플리케이션이 액세스할 수 있는 URL을 화이트 리스트 형식으로 지정한다.

* 네트워크로 액세스할 URL을 같은 도메인으로 한정하고 URL도 한정하면 보안을 향상시킬 수 있고 디버그하기도 쉬워진다.

* 다른 웹 사이트에 대한 네트워크가 금지되어 매시업을 수행하도록 만들어진 웹 어플리케이션에서 문제가 되기도 한다.

* NETWORK 섹션에 '*'만 지정하여 모든 URL에 대해 네트워크 액세스를 '원칙적 금지'에서 '원칙적 허가'로 변경할 수 있다.

* 제한을 피할 수 있어 편리하지만 사용시 신중을 기해야한다.

* 예

*{{{

NETWORK:

}}}

= 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 ||매니페스트 얻기에 실패하여 캐시를 무효로 함 ||

= TIPS =

* 매니페스트에 버전 문자열을 포함해 둔다.

* 리소스가 변경되면 반드시 매니페스트도 업데이트 되도록 한다.

* 매니페스트 파일을 동적으로 생성한다.

* 개발 중에는 어플리케이션 캐시를 사용하지 않는다.

* 오프라인 때 이루어지는 데이터 업데이트는 로컬 스토리지에 저장한다.

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 ¶

매니페스트에 버전 문자열을 포함해 둔다.
리소스가 변경되면 반드시 매니페스트도 업데이트 되도록 한다.
- 매니페스트 파일을 동적으로 생성한다.
- 개발 중에는 어플리케이션 캐시를 사용하지 않는다.
오프라인 때 이루어지는 데이터 업데이트는 로컬 스토리지에 저장한다.

html5/offline-web-application

Difference between r1.1 and the current

Contents

1. 오프라인 웹 어플리케이션 ¶

2. 어플리케이션 캐시 ¶

3. 캐시 업데이트 ¶

4. 캐시 매니페스트 ¶

4.1. 규칙 ¶

4.2. 섹션 ¶

4.2.1. CACHE 섹션 ¶

4.2.2. FALLBACK 섹션 ¶

4.2.3. NETWORK 섹션 ¶

4.2.3.1. 온라인 화이트 리스트 ¶

5. API와 이벤트 ¶

6. TIPS ¶