HTML5 Javascript API 확장 5에 대한 Raid - 기타 확장(응용프로그램 캐시/서버 메시지/데스크톱 알림)_html5 튜토리얼 팁

주요 API 확장은 이전에 요약되었습니다. 다음 확장은 특별한 경우에만 가장 큰 역할을 합니다. 여기서 간단히 살펴보겠습니다. 다음 기능은 예외 없이 IE에서 지원되지 않습니다. 애플리케이션 캐싱 및 서버 측 메시징은 다른 주요 브라우저에서 지원됩니다. 데스크톱 알림은 현재 Chrome에서만 지원됩니다.
애플리케이션 캐시
액세스 속도를 높이기 위해 자주 변경되지 않는 일부 페이지를 캐시해야 하는 경우가 많으며 일부 애플리케이션의 경우 오프라인에서도 사용할 수 있기를 원합니다. HTML5에서는 "애플리케이션 캐싱"이라는 기술을 통해 이러한 기능을 쉽게 구현할 수 있습니다.
애플리케이션 캐싱 구현 시 HTML5를 사용하면 캐시 매니페스트 파일을 생성하여 애플리케이션의 오프라인 버전을 쉽게 생성할 수 있습니다.
구현 단계:
1. 페이지 캐싱을 활성화합니다. 문서의 HTML에 매니페스트 속성만 포함하면 됩니다.

코드 복사

코드는 다음과 같습니다.

="demo.appcache">
...

이 매니페스트 속성이 포함된 모든 페이지는 사용자가 액세스할 때 캐시됩니다. 매니페스트 속성이 지정되지 않으면 캐시되지 않습니다(페이지가 매니페스트 파일에 직접 지정되지 않는 한). 매니페스트 파일 확장자에 대한 통일된 표준은 없습니다. 권장되는 확장자는 ".appcache"입니다.
2. 서버 측에서 매니페스트 파일의 MIME 유형을 구성합니다.
매니페스트 파일은 올바른 MIME 유형에서 지원되어야 합니다. 이 파일 유형은 "text/cache-manifest"입니다. 사용되는 웹 서버에서 구성되어야 합니다. 예: Apache에서는 .htaccess에 AddType text/cache-manifest 매니페스트를 추가할 수 있습니다.
3. 매니페스트 파일 작성
매니페스트 파일은 캐시할 콘텐츠(또는 캐시하지 않을 콘텐츠)를 브라우저에 알려주는 간단한 텍스트 파일입니다.
매니페스트 파일에는 다음 세 가지 섹션이 포함되어 있습니다.
• 캐시 매니페스트 - 이 목록 헤더 아래의 파일은 다운로드 후 캐시됩니다.
• 네트워크 - 이 목록 제목 아래의 파일은 서버 연결이 필요하며 캐시되지 않습니다.
• FALLBACK - 이 목록 제목 아래의 파일에 액세스할 수 없는 경우 특정 페이지를 표시합니다.
아래 예는 전체 파일을 보여줍니다.

코드 복사코드는 다음과 같습니다.

캐시 매니페스트
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js
네트워크:
login.asp
폴백:
/html5/ /offline.html

팁:
#은 주석으로 시작합니다.
*는 다른 모든 리소스나 파일을 나타내는 데 사용할 수 있습니다. 예:

코드 복사코드는 다음과 같습니다.

NETWORK:
*

은 모든 리소스나 파일이 캐시되지 않음을 의미합니다.
4. 캐시 업데이트
애플리케이션이 캐시되면 다음과 같은 일이 발생하지 않는 한 캐시된 상태로 유지됩니다.
• 사용자가 캐시를 삭제합니다.
• 매니페스트 파일이 수정됩니다.
• 애플리케이션 캐시는 프로그램에 의해 수정됩니다.
따라서 파일이 캐시되면 사람이 수정하는 경우를 제외하고 브라우저는 서버 파일을 수정하더라도 캐시된 버전의 콘텐츠를 계속 표시합니다. 브라우저가 캐시를 업데이트하려면 매니페스트 파일만 수정하면 됩니다.
: "#"으로 시작하는 줄은 주석 줄이지만 다른 용도로 사용될 수 있습니다. 수정 사항에 이미지나 JavaScript 기능만 관련된 경우 해당 변경 사항은 다시 캐시되지 않습니다. 댓글에서 날짜와 버전을 업데이트하는 것은 브라우저가 파일을 다시 캐시하도록 하는 한 가지 방법입니다.
: 브라우저에는 캐시된 데이터에 대해 다양한 크기 제한이 있을 수 있습니다(일부 브라우저에서는 5M의 캐시 데이터를 허용함).

코드 복사코드는 다음과 같습니다.

서버 메시지< ; /strong>
일반적으로 사용되는 또 다른 시나리오는 서버의 데이터가 변경되면 클라이언트에 어떻게 알릴까요? 이는 과거에 수행되었습니다. 페이지가 주도적으로 서버에 업데이트를 쿼리했습니다. 이전 소개에 따르면 WebSocket을 사용하여 양방향 통신이 가능하다는 것을 알았습니다. 여기에서는 HTML5의 또 다른 새로운 기능인 서버 전송 이벤트를 소개합니다.
HTML5에서 이 기능을 포함하는 개체는 EventSource 개체입니다.
단계는 다음과 같습니다.
1. EventSource 개체에 대한 브라우저 지원을 확인하세요.

코드 복사

코드는 다음과 같습니다.

if(typeof(EventSource) !== "정의되지 않음")
{
// 예! 서버에서 보낸 이벤트가 지원됩니다.
// 일부 코드.....
}else {
// 아니요! 서버 전송 이벤트 지원..
}

2. 서버 측 메시지 전송 코드
서버 측 전송 업데이트 메시지는 매우 간단합니다. 콘텐츠 유형 헤더 정보를 "text/event-stream" , 이벤트를 보낼 수 있습니다. ASP 코드를 예로 들어 보겠습니다.

코드 복사

코드는 다음과 같습니다.

<%
Response.ContentType="text/event-stream"
Response.Expires=-1
Response.Write("data: >> 서버 시간" & now() )
응답.
%>

3. 브라우저 측 메시지 수신 코드

코드 복사 코드는 다음과 같습니다.

var source=new EventSource("demo_sse.php")
source.onmessage=function(event) {
document.getElementById(" result").innerHTML =event.data "
";
};

코드 설명:
• EventSource 객체를 생성하고 업데이트를 보낼 페이지 URL을 지정하세요. (여기는 데모_see.jsp입니다.)
• 업데이트가 수신될 때마다 onmessage 이벤트가 트리거됩니다.
• onmessage 시간이 트리거되면 획득한 데이터가 다음 요소로 설정됩니다. id="result"
onmessage 이벤트 외에 EventSource 객체가 추가됩니다. 이 외에도 오류 처리를 위한 onerror 이벤트, 연결 설정을 위한 onopen 이벤트 등이 있습니다.

데스크톱 알림 - 준HTML5 기능 데스크탑 알림 기능을 사용하면 브라우저가 메시지가 최소화된 상태에서도 사용자에게 알릴 수 있습니다. 이는 WebIM과의 가장 자연스러운 조합입니다. 하지만 현재 이 기능을 지원하는 유일한 브라우저는 Chrome입니다. 팝업창은 모두가 싫어하는 기능이므로 이 기능을 켜려면 사용자의 허가가 필요합니다.

코드 복사코드는 다음과 같습니다.

<script> >function RequestPermission(콜백) { <br>window.webkitNotifications.requestPermission(callback); <br>} <br>function showNotification() { <br>//브라우저가 window.webkitNotifications를 통한 알림을 지원하는지 확인 <br>if (!! window.webkitNotifications) { <br>if (window.webkitNotifications.checkPermission() > 0) { <br>RequestPermission(showNotification) <br>} else { <br>var 알림 =window.webkitNotifications.createNotification ("[ imgurl]","제목","본문"); <br>notification.ondisplay = function() { <br>setTimeout('notification.cancel()', 5000) <br>} <br> notification.show (); <br>} <br>} <br>} <br></script>


이 페이지를 브라우저에서 열면 팝업이 표시됩니다. 5초 메시지 창 오른쪽 하단에 메시지가 표시됩니다.

이 기능은 사용이 매우 간단하지만, 실제 동작 시 알림 기능이 사용자에게 미치는 간섭을 최소화하고 알림 기능의 발생도 최소화해야 합니다.

다음은 이 애플리케이션을 만드는 데 있어 온라인 전문가의 몇 가지 경험입니다
: 1. 여러 메시지를 받을 때 알림이 하나만 표시되는지 확인하세요. 이 문제는 해결하기가 더 쉽습니다. 알림 개체에는 "replaceId"라는 속성이 있습니다. 이 속성을 지정한 후 동일한 교체 ID를 가진 알림 창이 팝업되는 한 이전 팝업 창을 덮어쓰게 됩니다. 실제 프로젝트에서는 모든 팝업 창에 동일한 교체 ID가 할당됩니다. 그러나 이러한 덮어쓰기 동작은 동일한 도메인에서만 유효하다는 점에 유의해야 합니다.
2. 사용자가 IM이 표시되는 페이지(페이지가 포커스 상태)에 있으면 알림이 표시되지 않습니다.
이 문제는 주로 브라우저 창이 포커스 상태인지 확인하는 데 사용됩니다. 창의 온포커스와 온블러를 모니터링하는 것 외에 이번 사건 외에는 더 좋은 방법은 없는 것 같습니다. 프로젝트에서는 이 메소드를 사용하여 창의 Focus 상태를 기록하고, 메시지가 도착하면 Focus 상태에 따라 창을 띄울지 여부를 판단합니다.

코드 복사코드는 다음과 같습니다.

$(window).bind ( 'blur', this.windowBlur).bind( 'focus', this.windowFocus)

이 방법을 사용할 때 주의할 점은 이벤트 등록의 이벤트 시점이 최대한 빨라야 한다는 것입니다. 등록이 너무 늦으면 사용자가 페이지를 열었을 때 상태를 오인하기 쉽습니다. 나뭇잎.
3. 사용자가 여러 탭을 사용하여 IM으로 여러 페이지를 열면 한 페이지가 포커스 상태인 동안에는 알림이 표시되지 않습니다.
로컬 저장소를 통해 여러 페이지 간의 상태 공유가 가능합니다. > • 브라우저 창이 Focus인 경우 로컬 저장소의 지정된 키 값을 "focus"로 수정
• 브라우저 창이 Blur인 경우 로컬 저장소의 지정된 키 값을 "blur"로 수정 .
Chrome에서 한 탭에서 다른 탭으로 전환할 때 Focus 이후 Blur가 저장소에 기록될 수 있으므로 Focus 상태를 수정할 때 비동기 처리가 필요하다는 점에 유의해야 합니다.

코드 복사코드는 다음과 같습니다.

/*window on focus 이벤트 */
//여러 탭 사이를 전환할 때 항상 Focus가 다른 탭의 Blur 이벤트를 덮도록 하는 문제를 해결하기 위해 지연이 사용됩니다.
//참고: Tab을 클릭하기 전에 문서에 Focus가 없으면, Tab을 클릭하면 Focus의
setTimeout( function(){
Storage.setItem( 'kxchat_focus_win_state', 'focus' );
}, 100)이 트리거되지 않습니다.
Storage.setItem( 'kxchat_focus_win_state', 'blur' );


위의 상태 공유를 구현한 후 새 메시지가 도착한 후 'kxchat_focus_win_state' 값만 확인하면 됩니다. 로컬 저장소의 경우 흐림입니다. 팝업 창은 흐림 전용입니다.

4. 사용자가 알림 플로팅 레이어를 클릭하여 특정 채팅창을 찾을 수 있도록 하는 방법
알림창은 onclick 및 기타 이벤트 응답을 지원하며, 응답 기능의 범위는 창을 생성한 페이지에 속합니다. . 다음 코드는

코드 복사 코드는 다음과 같습니다.

var n = dn.createNotification (

img,
title,
content
)
//알림이 하나만 있는지 확인하세요
n.replaceId = this.replaceId
n.onclick = function() {
//알림창을 표시하는 브라우저 창 활성화
window.focus()
//IM 창 열기
WM.openWinByID( data ) ;
//알림 창 닫기
n.cancel();
}


onclick 응답 함수에서 액세스한 창 개체는 현재 생성된 페이지에 속하므로 현재 페이지와 쉽게 상호작용할 수 있습니다. 위의 코드는 팝업 창을 클릭하면 해당 브라우저 창으로 이동하고 IM 창이 열리는 것을 인식합니다.

: 페이지의 관련 이벤트는 타이밍이 불확실한 경우가 많으므로 코드에서는 특정 이벤트가 트리거되는 순서가 확실하다고 가정하지 않도록 노력해야 합니다. 예를 들어 위의 블러 및 포커스 이벤트


실용 참고 자료:

공식 문서: http://www.w3schools.com/html5/
html5 중국어 튜토리얼: http: //www.gbin1.com/tutorials/html5-tutorial/