Ch 06. 오프라인에서 동작하기
6.1 오프라인 애플리케이션 캐시의 기본 오프라인 애플리케이션 캐시의 주요 구성요소 웹서버에서 호스트를 담당하는 cache manifest 파일 이전에 배운 Kilo 예제가 동작할 때 어떻게 적용되는지를 통해 설명 manifest 파일 웹서버에 존재하는 간단한 텍스트 문서 cache-manifest라는 콘텐츠 타입으로 사용자 디바이스에 전달 manifest에는 사용자 디바이스가 내려받아야 하는 파일 목록이 들어 있고 동작하려면 먼저 저장돼야 함
6.1 오프라인 애플리케이션 캐시의 기본 오프라인 캐시 작동 Ex) 다음과 같은 파일이 들어 있는 웹디렉터리 index.html logo.jpg scripts/demo.js styles/screen.css 사용자가 애플리케이션을 방문할 때 브라우저가 로드하는 페이지 다른 파일은 index.html 내에서 참조 오프라인에서 모든 것을 사용할 수 있도록 하려면? index.html이 있는 디렉터리에 demo.manifest*라는 이름의 파일 생성
6.1 오프라인 애플리케이션 캐시의 기본 오프라인 캐시 작동 demo.manifest 변경 CACHE MANIFEST index.html logo.jpg scripts/demo.js styles/screen.css manifest 안의 경로는 manifest 파일의 위치와 상대적 URL 같은 절대 경로를 이용할 수도 있음 Ex) CACHE MANIFEST http://www.example.com/index.html http://www.example.com/logo.jpg http://www.example.com/scripts/demo.js http://www.example.com/styles/screen.css
6.1 오프라인 애플리케이션 캐시의 기본 오프라인 캐시 작동 index.html 안의 HTML 태그에 manifest 속성을 추가하고 링크 <html manifest="demo.manifest"> text/cache-manifest 콘텐츠 타입을 manifest 파일에 제공해야 브라우 저가 그것을 인식 아파치 웹서버나 호환 웹서버를 이용하는 경우 다음처럼 웹디렉터리에 .htaccess 파일을 추가하는 방법도 있음 Ex) AddType text/cache-manifest .manifest 다음 번에 사용자가 http://example.com/index.html을 열면? 페이지와 리소스가 네트워크(example.com/index.html 대신 여러분의 웹앱 의 URL로 교체)에서 정상으로 로드 백그라운드에서는 manifest에 리스트된 모든 파일이 로컬에 내려 받아짐 내려 받기가 끝나면 로컬 파일에만 접근 인터넷이 끊겨도 웹앱에 지속적으로 접근 가능함
6.1 오프라인 애플리케이션 캐시의 기본 웹사이트가 변경되면 어떻게 업데이트 하는가? 사용자가 인터넷에 접속해 웹앱의 URL로 들어올 때, 사용자의 브라우 저는 로컬 복사본과 비교하기 위해 사이트에서 manifest 파일 확인 manifest가 바뀌었다면, 브라우저는 리스트 된 파일을 전부 내려 받기 파일은 임시 캐시의 백그라운드로 내려 받으므로 정상 동작함
6.2 온라인 Whitelist와 Fallback 옵션 화이트 리스트 항상 네트워크를 통해 어떤 리소스에 접근하도록 브라우저에 강제 사용자가 오프라인일 때는 브라우저가 캐시를 이용할 수 없다는 의미 온라인 전용으로 리소스를 사용하려면 manifest 파일 안에 NETWORK: 키 워드가 필요함 manifest 파일의 NETWORK 섹션으로 이동시킨 logo.jpg를 화이트리스트에 넣은 예 CACHE MANIFEST index.html scripts/demo.js styles/screen.css NETWORK: logo.jpg
6.2 온라인 Whitelist와 Fallback 옵션 사용자가 Online/Offline 일 때 화이트 리스트 적용 화면
6.2 온라인 Whitelist와 Fallback 옵션 만일 오프라인일 때 깨져 보이는 것이 싫다면? FALLBACK 키워드 이용 CACHE MANIFEST index.html scripts/demo.js styles/screen.css FALLBACK: logo.jpg offline.jpg
6.2 온라인 Whitelist와 Fallback 옵션 사용자가 Online/Offline 일 때 Fallback 옵션 적용 화면
6.2 온라인 Whitelist와 Fallback 옵션 partial path로 여러 리소스를 이용하려 단일 폴백 지정 Ex) 웹사이트에 images 디렉터리를 추가해 파일을 추가한 예시 /demo.manifest /index.html /images/logo.jpg /images/logo2.jpg /images/offline.jpg /scripts/demo.js /styles/screen.css images 디렉터리에서 offline.jpg를 브라우저가 Fallback하도록 CACHE MANIFEST index.html scripts/demo.js styles/screen.css FALLBACK: images/ images/offline.jpg
6.2 온라인 Whitelist와 Fallback 옵션 사용자의 상태에 따른 이미지 처리 (폴백 이미지는 단일)
6.2 온라인 Whitelist와 Fallback 옵션 오프라인 애플리케이션 캐시 manifest 파일의 NETWORK나 FALLBACK에 리소스를 추가할지 여부는 애플리케이션의 특성에 따라 달라짐 디바이스에 앱을 로컬 저장하는 것이 주요 목적 서버 부하를 줄이는 것이나 성능을 높이는 방안이 아니다 !!! 대부분, 앱을 실행하는 데 필요한 파일을 전부 manifest 파일 안에 리스트로 만들어야 함 동적인 콘텐츠가 많다면 오프라인 애플리케이션 캐시에 적합하지 않기 때문에, 다른 접근법을 고려해야 함
6.3 동적 Manifest 파일 생성하기 Kilo 예제에 오프라인 앱 캐시 작업 적용하기 Kilo는 몇 가지 파일로 구성되어 있고, 이를 manifest 파일 안에 수동으 로 모두 리스트하려면 번거로와짐 이 문제를 해결하려면, 애플리케이션 디렉터리(그리고 서브 디렉터리) 의 내용을 읽어, 파일 리스트를 만드는 PHP 파일을 작성 Kilo 디렉터리에 manifest.php라는 새로운 파일을 만들고, 다음 코드 추가
6.3 동적 Manifest 파일 생성하기 Kilo 예제에 오프라인 앱 캐시 작업 적용하기 manifest.php 분석 ➊ PHP header 함수는 cache-manifest 콘텐츠 타입의 파일로 출력 manifest 파일을 위한 콘텐츠 타입으로 정의된 .htaccess 파일을 이용할 수 있음 ➋ 캐시 manifest 파일의 첫 줄은 ‘CACHE MANIFEST’ 브라우저에 관한 CACHE MANIFEST가 문서의 첫 줄 이 PHP 파일은 웹서버를 구동하고, 브라우저는 echo 같은 텍스트를 내보내는 명령의 결과만을 볼 수 있음 ➌ 현재 디렉터리의 파일을 나열하도록 하는 $dir라는 오브젝트를 만듦 재귀적으로 동작 서브 디렉터리에 어떤 파일을 가지고 있다면 그 파일을 찾아냄 ➍ 프로그램이 이 루프를 통과할 때마다, 현재 디렉터리에서 파일 중 하나를 대표하는 오브젝트에 $file 변수 설정 ‘매번 현재 디렉터리나 그것의 서브 디렉터리에서 찾아낸 다음 파일에 파일 변수를 세팅한다’는 의미
6.3 동적 Manifest 파일 생성하기 Kilo 예제에 오프라인 앱 캐시 작업 적용하기 manifest.php 분석 (2) manifest.php나 .으로 시작하거나(.htaccess 같은), .으로 시작하는 디렉터리(.svn 같은)가 포함된 파일은 무시 ➏ 각 파일의 이름 출력
6.3 동적 Manifest 파일 생성하기 Kilo 예제에 오프라인 앱 캐시 작업 적용하기 manifest.php 파일을 브라우저에서 열어본 결과
6.3 동적 Manifest 파일 생성하기 Kilo 예제에 오프라인 앱 캐시 작업 적용하기 manifest.php 파일을 브라우저에서 열어본 결과 (2)
6.3 동적 Manifest 파일 생성하기 Kilo 예제에 오프라인 앱 캐시 작업 적용하기 index.html을 열고 head에 manifest.php 추가 <html manifest="manifest.php"> 디렉터리 안의 파일에 변경이 일어날 때 콘텐츠도 변경되도록 수정 manifest의 내용이 변경된다면? 클라이언트는 애플리케이션만 다시 내려 받음 manifest.php 수정
6.3 동적 Manifest 파일 생성하기 Kilo 예제에 오프라인 앱 캐시 작업 적용하기 manifest.php 코드 분석 ➊ 파일의 해시 값을 저장할 문자열 초기화 ➋ PHP의 md5_file 함수(Message-Digest 알고리즘 5)를 이용해 각 파일의 해시를 계산하여 $hashes 문자열의 끝에 추가 파일에 어떤 변화라도 일어나면 md5_file 함수의 결과도 변경 해시는 4ac3c9c004cac7785fa6b132b4f18efc 같은 32자의 문자열 ➌ 해시(각 파일의 32자의 문자열이 함께 연결된 경우)의 큰 문자열을 받아, 그 문자열의 MD5 해시를 계산 주석(# 문자로 시작하는)을 포함하는 짧은 문자열(32자 문자열 대신 파일의 수만큼 32를 곱한)을 반환 내용은 의미가 없지만 파일 중 하나가 수정된다면, manifest가 변경되었음을 의미하므로 이 코드도 바뀜
6.3 동적 Manifest 파일 생성하기 Kilo 예제에 오프라인 앱 캐시 작업 적용하기 전체 디렉터리 트리 안의 파일 안에 있는 단일 문자를 변경하면? manifest에 새로운 해시 문자열 삽입 Kilo 파일을 조작한다는 의미 manifest 파일을 기본적으로 수정하는 것을 의미함
6.4 디버깅 오프라인 애플리케이션 캐시를 이용시 디버깅 내부에서 어떻게 돌아가는지를 거의 알 수 없어 디버깅이 힘들어짐 자바스크립트로 콘솔 로깅을 설정하면 원인 파악이 쉬워짐 $ cd /var/log/apache2/ $ tail -f access?log
6.4 디버깅 자바스크립트 콘솔 이용한 피드백 디버깅 개발하는 동안 웹앱에 다음의 자바스크립트를 더하면 콘솔에 피드백 을 보내므로 브라우저 윈도우를 지속적으로 리프레시할 필요 없음
6.4 디버깅 자바스크립트 콘솔 이용한 피드백 디버깅
6.4 디버깅 자바스크립트 콘솔 이용한 피드백 디버깅 예제 코드 분석 ➊ 애플리케이션 캐시 오브젝트를 위한 상태 값들로 구성된 배열 설정 HTML5 스펙에 따라 여섯 가지 값이 선언 짧게 처리한(예를 들어, 3번 상태의 뜻은 ‘내려받기 중’입니다) 정수 값을 가짐. 3번으로 나오는 함수의 경우 logEvent 함수에서 더 상세한 설명 포함 가능 ➋ 스펙에 의해 정의된 가능한 모든 이벤트를 위한 이벤트 리스너 세팅 각각 logEvent 함수 불러옴 ➌ logEvent 함수는 로그 메시지를 구성하기 위해 입력으로 이벤트를 받고 간단한 계산 이벤트 타입이 에러이고, 사용자가 온라인이라면? 리모트 manifest에서 구문 오류 발생 구문 오류는 manifest에서 일어나기 쉬운데 이유는 모든 경로가 유효하기 때문 파일 이름을 바꾸거나, 이동시키고 manifest 업데이트를 잊는다면, 이후 업데이트가 실패
6.4 디버깅 자바스크립트 콘솔 이용한 피드백 디버깅 예제 코드 분석 ➍ 콘솔에 구성된 메시지를 보냄 크롬에서 보기 → 개발자 정보 → 자바스크립트 콘솔을 선택 콘솔 메시지를 분석가능 [그림 6-7]처럼 10초마다 새로운 메시지를 볼 수 있음