HTML5에서 웹 어플리케이션을 오프라인 모드로 할 수 있는 방법을 알아보자.
웹의 경우에는 간편하게 들어갈 수 있고 설치가 필요없는 장점이 있다. 반면, 인터넷이 연결되어야 한다.
하지만, 네이티브 앱의 경우에는 인터넷이 필요없을 수는 있으나, 문제는 설치를 해야하는 번거로움이 생긴다.
하지만, 지금 소개할 방법을 사용하게 되면 웹 어플리케이션을 오프라인 상태에서도 사용할 수 있다.
원리는 간단하다. 열어본 웹 페이지를 로컬에 저장해두면 된다.
캐싱을 하는 방법은 매우 간단한데.
cache manifest 파일을 만들어서 간단한 규칙에 맞게 작성해주면 된다. 그리고 이를 웹 페이지에 적용하는 방법 또한 간단하다.
1. CACHE MANIFEST 파일 작성법
CACHE MANIFEST
#주석
CACHE:
NETWORK:
FALLBACK:
다음과 같은 형식으로 작성하면된다.
파일명의 확장자는 대부분 .manifest로 한다. 왠만하면 그냥 그렇게 하자.
각 부분에 대해서 설명을 해보자면 다음과 같다.
CACHE MANIFEST
그냥 무조건 입력해야한다.
#주석
주석 부분이다. 주석은 #으로 한다.
CACHE:
이 뒤에 적힌 파일들은 로컬 저장소에 캐시하고, 로컬 저장소에서 연다.
NETWORK:
이 뒤에 적힌 파일들은 무조건 네트워크에서 받아서 연다.
FALLBACK:
이거는 만약 네트워크가 연결되지 않았을 시 대체할 파일을 지정할 수 있다.
예를 들어서 인터넷이 연결되었을 때는 A.jpg를 불러오고 인터넷이 연결되지 않았을 때는 B.jpg로 대체하는 방법이다.
당연히 B.jpg는 로컬에 저장된다.
다음은 FALLBACK에 대한 예시이다.
FALLBACK:
A.jpg B.jpg
CACHE MANIFEST를 작성할 때는 주의할 사항이 있는데. 우선 여기에 적히지 않은 파일들은 그냥 없는 파일이라고 취급 할 수도 있다.
그래서 캐시할 파일들은 CACHE: 뒤에 넣고나서 나머지 파일은 네트워크에서 받고 싶으면 NETWORK: 하단에 '*'을 적어서 명시하도록 하자.
또한, 클라이언트에서는 캐시 매니페스트의 파일 내용이 변경되지 않을 경우 각 리소스가 변경되어도 다시 캐싱하지 않는다.
즉, 포함된 파일들이 변경되었을 경우에는 캐시 매니페스트의 파일 내용을 반드시 변경해야한다. 파일 내용 변경에는 주석내용을 변경하는 것으로도 변경된 것으로 친다.
2. CACHE MANIFEST 적용법
이제 이를 *.html 파일에서 적용하여야 한다.
적용하는 방법은 어렵지 않다.
<html manifest="캐시파일명">
</html
<html>태그의 속성에 적용하면 된다. 캐시 manifest 파일을 불러온 순간 부터 자동으로 이 불러온 html파일은 캐시대상이 된다.
3. 스타일내의 리소스 캐시
이게 작업을 하다가 어느정도 막힌 것인데.
html파일에서 외부의 css파일을 불러오는 경우에 이 CSS파일은 캐시가 가능하다. 그런데 그 CSS파일에 포함된 다른 리소스는 캐시가 안된다.
이 경우에는 주로 웹 폰트를 적용하고자 할 때 많이 일어나는 일인데.
웹 폰트의 경우에는 css파일을 불러오면 적용되도록 간편하게 제공하고 있는데. 이 css파일 내부에서 웹 폰트 파일을 따로 불러오고 이를 css파일에서 폰트명을 정의해서 사용한다.
다소 어휘력이 부족해서 안타깝게 표현하였지만 그렇다.
이에 대해서 해결하는 방법은 아직까지 고민해봤을 때. 해당 css파일을 내부 스타일로 적용한 다음. 웹 폰트 파일을 캐시하는 경우에는 정상적으로 적용되는 것 같다.
4. 오프라인 웹 어플리케이션 테스트
오프라인 웹 어플리케이션을 실험하는 것이 잘 되었는지 확인을 하기 위해서는 파일들을 서버에 올려야 한다.
애시당초에 그냥 작성해서 로컬에서 실행하면 로컬인데 캐시할 필요가 없지 않은가? 그래서 웹에 올려서 열어야 한다.
간단하게 웹에 올려서 테스트 할 수 있는 것으로 github page를 추천하고, 만약 올렸을 경우에 정상적으로 작동하는가 테스트 하기 위해서 랜선을 뽑아가며 할 까봐 테스트 방법도 제공한다.
크롬, 웨일과 같은 크로뮴 기반의 엔진에는 F12를 누르면 유용한 개발자 도구가 나온다.
현재 우측 하단에 보면 캐시가 잘 불러와졌고 어쩌고 저쩌고 하는 디버그가 출력되어 있다.
Network 탭으로 들어가자.
Disable Cache는 이 페이지의 캐시를 사용하지 않는 것이다.
위 화면은 이미 Disable Cache를 체크한 다음 새로고침한다음에 푼 화면인데. 오른쪽 하단 로그에 보면 리소스를 캐시한 로그를 보여준다.
그 다음은 Offline인데 이걸 체크하면 오프라인 모드로 적용한다.
지금 까지는 기본적인 사용법이며, 추가적으로 자바스크립트를 통해서 이를 컨트롤 하는 방법에 대해서 알아볼 것 이다.
지금까지 HTML5 오프라인 웹 어플리케이션 구현 1편이였습니다.
'프로그래밍 > HTML5' 카테고리의 다른 글
| [HTML] 웹 페이지 검색엔진 소개 (0) | 2017.05.28 |
|---|---|
| 크롬 모바일 상단바 색상 변경 (0) | 2017.05.27 |
| [HTML5] 오픈 그래프 메타 태그 (0) | 2017.05.26 |
| [HTML] 다른 페이지의 스타일, 스크립트 삽입 에러 (0) | 2017.05.17 |
| [HTML5] 네비게이션 a 태그 (0) | 2017.02.22 |