주요 API 확장은 앞서 요약되었습니다. 다음 확장은 전용 경우에만 가장 큰 역할을합니다. 여기서 간단히 살펴 보겠습니다. 예외없이 IE는 다음 기능을 지원하지 않습니다. 응용 프로그램 캐시 및 서버 메시지는 다른 주류 브라우저에서 지원됩니다. 데스크탑 알림은 현재 Chrome에서만 지원됩니다.
응용 프로그램 캐시여러 번, 우리는 액세스 속도를 향상시키기 위해 자주 변경되지 않은 일부 페이지를 캐시해야합니다. 그리고 일부 응용 프로그램의 경우 오프라인으로 사용하기를 희망합니다. HTML5에서는 Application Caching이라는 기술을 통해 이러한 기능을 쉽게 구현할 수 있습니다.
Application Cache의 구현에서 HTML5를 사용하면 캐시 된 매니페스트 파일을 만들어 오프라인 버전의 응용 프로그램을 쉽게 생성 할 수 있습니다.
구현 단계 :1. 페이지 캐싱 활성화는 매우 간단합니다. 문서의 HTML에 매니페스트 속성 만 포함하면됩니다.
<! doctype html>
<html manifest = "demo.appcache">
...
</html>
이 매니페스트 속성이 포함 된 각 페이지는 사용자가 액세스 할 때 캐시됩니다. 매니페스트 속성이 지정되지 않은 경우 캐시되지 않습니다 (웹 페이지가 매니페스트 파일에 직접 지정되지 않는 한). 매니페스트 파일 확장에 대한 통합 표준은 없으며 권장 확장자는 .appcache입니다.
2. 서버 측에서 MAME 유형의 매니페스트 파일을 구성합니다.
매니페스트 파일은 텍스트/캐시 매니페스트 인 올바른 마임 유형에 의해 지원되어야합니다. 사용 된 웹 서버에서 구성해야합니다. 예를 들면 : Apache에서는 다음을 추가 할 수 있습니다.
3. Manifest 파일을 쓰십시오
매니페스트 파일은 브라우저에 캐시 할 내용 (또는 캐시 할 내용)을 알려주는 간단한 텍스트 파일입니다.
매니페스트 파일에는 다음 세 부분이 포함되어 있습니다.
• 캐시 매니페스트 -이 목록 제목의 파일은 다운로드 후 캐시됩니다.
• 네트워크 -이 목록 제목의 파일은 서버에 연결해야하며 캐시되지 않습니다.
• 폴백 -이 목록 제목의 파일에 액세스 할 수없는 경우 특정 페이지가 표시됩니다.
전체 파일은 다음 예에 표시됩니다.
캐시가 나타납니다
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js
회로망:
로그인 .asp
폴백 :
/html5 //ffline.html
힌트:
#로 시작하는 대표적인 의견.
* 다른 모든 리소스 또는 파일을 나타내는 데 사용될 수 있습니다. 예를 들어:
회로망:
*
그것은 모든 자원이나 파일이 캐시되지 않음을 의미합니다.
4. 캐시를 업데이트하십시오
앱이 캐시되면 다음 상황이 발생하지 않는 한 캐시로 유지됩니다.
• 사용자는 캐시를 삭제했습니다
• 매니페스트 파일이 수정되었습니다
• 응용 프로그램 캐시는 프로그램에 의해 수정됩니다
따라서 파일이 캐시되면 인공 수정 외에도 브라우저는 서버 파일을 수정하더라도 캐시 버전 컨텐츠를 계속 표시합니다. 브라우저가 캐시를 업데이트하기 위해 Manifest 파일 만 수정할 수 있습니다.
: #로 시작하는 줄은 주석 줄이지만 다른 용도로 사용할 수 있습니다. 수정에 하나의 이미지 또는 JavaScript 함수 만 포함되면 해당 변경 사항이 다시 나타나지 않습니다. 주석의 날짜 및 버전 업데이트는 브라우저가 파일을 재건 할 수있는 방법입니다.
: 브라우저는 크기 제한이 다른 많은 캐시 데이터를 가질 수 있습니다 (일부 브라우저는 5m 캐시 데이터를 허용합니다).
<strong> 서버 메시지 </strong>
또 다른 일반적인 시나리오는 다음과 같습니다. 서버의 데이터가 변경되면 클라이언트에게 알리는 방법은 무엇입니까? 이것은 이전 관행이었습니다. 페이지는 서버에 업데이트가 있는지 적극적으로 확인합니다. 이전 소개에 따르면 WebSocket을 사용하면 양방향 통신을 달성 할 수 있습니다. 여기서 우리는 HTML5에서 또 다른 새로운 기능 : 서버-중앙 이벤트를 소개합니다.
HTML5 에서이 기능을 호스팅하는 객체는 EventSource 객체입니다.
사용할 단계는 다음과 같습니다.
1. EventSource 객체에 대한 브라우저의 지원을 확인하십시오. 모두가 이것을 알고 있습니다.
if (typeof (EventsOurce)! == "undefined")
{
// 예! 서버에 대한 이벤트 지원!
// 일부 코드 ...
}또 다른 {
// 죄송합니다! 서버에 대한 이벤트 지원이 없습니다 ..
}
2. 서버 측 전송 메시지 코드
서버 측에서 업데이트 메시지를 보내는 것은 매우 간단합니다. 컨텐츠 유형 헤더 정보를 텍스트/이벤트 스트림으로 설정 한 후 이벤트를 보낼 수 있습니다. 예를 들어 ASP 코드를 사용하십시오.
<%
응답 .ContentType = "텍스트/이벤트 스트림"
응답 .expires = -1
response.write ( "데이터 : >> 서버 시간"& now ())
응답. 플러시 ()
%>
3. 브라우저쪽에 메시지 코드를받습니다
var source = new EventSource ( "demo_sse.php");
source.onmessage = function (이벤트) {
document.getElementById ( "결과"). innerHtml+= event.data+"
";
};
코드 설명 :
• eventsource 객체를 만들고 업데이트를 보내도록 페이지 URL을 지정합니다 (여기서 demo_see.jsp)
• 각 업데이트가 접수 된 후 OnMessage 이벤트가 트리거됩니다.
• OnMessage 시간이 트리거되면 결과 데이터를 ID = 결과로 요소로 설정하십시오.
OnMessage 이벤트 외에도 EventsOURCE 객체는 오류 ONERROR 이벤트, 연결로 설정된 OnOpen 이벤트 등을 처리합니다.
데스크탑 알림 -Quasi -HTML5 기능데스크탑 알림 기능을 사용하면 브라우저가 상태를 최소화하더라도 사용자에게 메시지를 알릴 수 있습니다. 이것은 Webim과 가장 자연스러운 조합입니다. 그러나 현재 Chrome 만이이 기능을 지원하는 브라우저입니다. 팝업 Windows는 모든 사람이 싫어하는 것이므로이 기능을 활성화하려면 사용자의 권한을 얻어야합니다.
<cript>
함수 requestPermission (콜백) {
Window.WebKitNotifications.requestPermission (콜백);
}
함수 shownotification () {
// 브라우저가 Window.WebKitNotifications를 통해 알림을 지원하는지 여부를 용어합니다
if (!! window.weind.webkitnotifications) {
if (window.webkitNotifications.checkpermission ()> 0) {
requestPermission (showotification);
} 또 다른 {
var notification = wind
notification.ondisplay = function () {
settimeout ( 'notification.cancel ()', 5000);
}
알림. 쇼우 ();
}
}
}
</스크립트>
브라우저 에서이 페이지를 열면 데스크탑의 오른쪽 하단에 5 초 동안 지속되는 메시지 창이 나타납니다.
이 기능은 사용하기가 매우 간단하지만 실제 작동에서는 사용자에게 알림 기능의 간섭을 최소화해야하며 알림 기능의 발생을 최소화해야합니다.
다음은이 응용 프로그램을 만드는 온라인 전문가의 경험입니다 .1. 여러 메시지를받을 때 하나의 알림 만 나타나는지 확인하십시오.
알림 객체에 replarid라는 속성이 있기 때문에이 문제는 해결하기가 더 쉽습니다. 이 속성을 지정한 후, 동일한 replarid가 팝업 된 알림 창이 팝업되는 한 이전에 팝업 된 창을 덮어 씁니다. 실제 프로젝트에서는 모든 팝업 창에 동일한 대체품이 할당됩니다. 그러나이 적용 범위 동작은 동일한 영역에서만 유효합니다.
2. 사용자가 IM이 나타나는 페이지에있을 때 (페이지는 초점 상태에 있음) 알림이 없습니다.
이 문제는 주로 브라우저 창이 초점 상태인지 여부를 결정하는 것입니다. 현재 Window의 Onfocus 및 Onblur 이벤트를 모니터링하는 더 좋은 방법은없는 것 같습니다. 프로젝트 에서이 방법은 창의 초점 상태를 기록한 다음 팝업 창이 메시지가 도착했을 때 초점 상태를 기반으로하는지 여부를 결정합니다.
$ (창).
이 방법을 사용할 때주의를 기울여야 할 것은 이벤트 등록 지점이 가능한 한 높아야한다는 것입니다. 등록이 너무 늦으면 사용자가 페이지를 엽니다면 상태 잘못 판단이 쉽습니다.
3. 사용자가 여러 탭을 사용하여 IM을 사용하여 여러 페이지를 열면 한 페이지가 포커스 상태에있는 한 알림이 나타나지 않습니다.
여러 페이지 간의 상태 공유는 로컬 스토리지를 통해 달성 할 수 있습니다.
• 브라우저 창에 집중할 때 로컬 스토리지에서 지정된 키의 값을 수정하여 초점을 맞추십시오.
• 브라우저 창이 블러가 수정되어 로컬 스토리지의 지정된 키 값을 블러로 수정합니다.
Chrome에서 한 탭에서 다른 탭으로 전환 할 때 Blur가 Focus보다 저장에 쓰기로 작성 될 수 있으므로 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,
제목,
콘텐츠
);
// 하나의 알림 만 있는지 확인하십시오
n.replaceId = this.replaceId;
n.onclick = function () {
// 알림 창을 팝업하는 브라우저 창을 활성화합니다.
Window.focus ();
// IM 창을 엽니 다
wm.openwinbyid (데이터);
// 알림 창을 닫습니다
n.cancel ();
};
OnClick 응답 함수에서 액세스 한 창 객체는 현재 생성 된 페이지에 속하므로 현재 페이지와 쉽게 상호 작용할 수 있습니다. 위의 코드는 팝업 창을 클릭하면 해당 브라우저 창으로 이동하여 IM 창을 열 수 있습니다.
: 페이지의 관련 이벤트는 종종 무기한 시계열이므로 코드는 특정 이벤트를 유발하는 순서가 확실하다고 가정하지 않으려 고합니다. 예를 들어, 위의 흐림 및 초점 이벤트
실제 참조 :공식 문서 : http://www.w3schools.com/html5/
html5에 대한 중국 자습서 : http://www.gbin1.com/tutorials/html5-tutorial/