主なAPI拡張機能は以前に要約されています。次の拡張機能は、専用の機会で最大の役割のみを果たします。ここを簡単に見てみましょう。例外なく、IEは次の機能をサポートしていません。アプリケーションキャッシュとサーバーメッセージは、他の主流ブラウザでサポートされています。デスクトップ通知は現在、Chromeによってのみサポートされています。
アプリケーションキャッシュ多くの場合、アクセス速度を向上させるために頻繁に変更されないいくつかのページをキャッシュする必要があります。また、一部のアプリケーションでは、オフラインで使用することも望んでいます。 HTML5では、アプリケーションキャッシングと呼ばれるテクノロジーを使用して、これらの機能を簡単に実装できます。
アプリケーションキャッシュの実装では、HTML5を使用すると、キャッシュされたマニフェストファイルを作成して、アプリケーションのオフラインバージョンを簡単に生成できます。
実装手順：1.ページキャッシュを有効にすると、非常に簡単です。ドキュメントのHTMLにマニフェスト属性を含める必要があります。
<！doctype html>
<html manifest = "demo.appcache">
...
</html>
このマニフェスト属性を含む各ページは、ユーザーがアクセスするとキャッシュされます。マニフェストプロパティが指定されていない場合、キャッシュされません（Webページがマニフェストファイルで直接指定されていない限り）。マニフェストファイル拡張機能の統一された標準はなく、推奨される拡張機能は.AppCacheです。
2。サーバー側にマニフェストファイルのmimeタイプを構成する
マニフェストファイルは、テキスト/キャッシュマニフェストである正しいMIMEタイプでサポートする必要があります。使用するWebサーバーで構成する必要があります。たとえば、Apacheでは、.htaccessのaddTypeテキスト/キャッシュマニフェストマニフェストを追加できます。
3.マニフェストファイルを書き込みます
マニフェストファイルは、ブラウザに何をキャッシュするか（またはキャッシュするもの）に伝える単純なテキストファイルです。
マニフェストファイルには、次の3つの部分が含まれています。
•キャッシュマニフェスト - このリストタイトルに基づくファイルは、ダウンロード後にキャッシュされます。
•ネットワーク - このリストタイトルに基づくファイルには、サーバーへの接続が必要であり、キャッシュされません。
•フォールバック - このリストタイトルに基づくファイルにアクセスできない場合、特定のページが表示されます。
完全なファイルを次の例に示します。
キャッシュマニフェスト
＃2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js
ネットワーク：
login.asp
後退する：
/html5 /offline.html
ヒント：
＃から始まる代表的なコメント。
*他のすべてのリソースまたはファイルを表すために使用できます。例えば：
ネットワーク：
*
これは、すべてのリソースまたはファイルがキャッシュされないことを意味します。
4.キャッシュを更新します
アプリがキャッシュされると、次の状況が発生しない限り、キャッシュされたままになります。
•ユーザーはキャッシュを削除しました
•マニフェストファイルが変更されます
•アプリケーションキャッシュはプログラムによって変更されます
したがって、ファイルがキャッシュされたら、人工的な変更に加えて、サーバーファイルを変更しても、ブラウザはキャッシュバージョンのコンテンツを引き続き表示します。ブラウザにキャッシュを更新させるために、マニフェストファイルのみを変更できます。
：＃で始まる行はコメント行ですが、他の用途を持つことができます。変更が1つの画像またはJavaScript関数のみを伴う場合、それらの変更は再編成されません。コメントで日付とバージョンを更新することは、ブラウザにファイルを再確認できるようにする方法です
：ブラウザは、さまざまなサイズの制限で多くのキャッシュデータを持つことができます（一部のブラウザは5mキャッシュされたデータを許可します）。
<strong>サーバーメッセージ</strong>
別の一般的なシナリオは、サーバー上のデータが変更されたとき、クライアントに知らせる方法です。これは以前のプラクティスでした。ページは、サーバーに更新があるかどうかを積極的にチェックします。前の紹介によると、WebSocketを使用すると双方向通信が達成できることがわかっています。ここでは、HTML5：サーバーセントイベントに別の新機能を紹介します。
HTML5では、この機能をホストするオブジェクトはEventSourceオブジェクトです。
使用の手順は次のとおりです。
1. EventSourceオブジェクトに対するブラウザのサポートを確認してください。誰もがこれを知っています。
if（typeof（eventsource）！== "未定義"）
{
// はい！サーバーセントイベントサポート！
//いくつかのコード...
}それ以外 {
// ごめん！サーバーセントイベントはサポートされていません。
}
2。サーバー側の送信メッセージコード
サーバー側で更新メッセージの送信は非常に簡単です。コンテンツタイプのヘッダー情報をテキスト/イベントストリームに設定した後、イベントを送信できます。例としてASPコードを取ります：
<％
Response.ContentType = "Text/Event-Stream"
Response.Expires = -1
Response.write（ "データ：>>サーバー時間"＆now（））
Response.flush（）
％>
3.ブラウザ側でメッセージコードを受信します
var source = new eventsource（ "demo_sse.php"）;
source.onmessage = function（event）{
document.getElementById（ "result"）。innerhtml+= event.data+"
";
};
コード説明：
•eventSourceオブジェクトを作成し、更新を送信するページURLを指定します（ここにdemo_see.jspです）
•各更新が受信された後、オンメッサージイベントがトリガーされます
•無視時間がトリガーされたら、結果のデータをID = resultで要素に設定します
Onmessageイベントに加えて、Eventsourceオブジェクトは、エラーOnerrorイベント、接続によって確立されたオープンイベントなども処理します。
デスクトップ通知 - Quasi -HTML5機能デスクトップ通知機能により、ブラウザは、ステータスを最小限に抑えても、ユーザーにメッセージを通知できます。これは、Webimとの最も自然な組み合わせです。ただし、現在、Chromeのみがこの機能をサポートするブラウザです。ポップアップウィンドウは誰もが嫌いなものなので、この機能を有効にするためにユーザーの許可を取得する必要があります。
<スクリプト>
function requestPermission（callback）{
window.webkitnotifications.requestpermission（callback）;
}
functionshowsotification（）{
//用語ブラウザがwindow.webkitnotificationsを介して通知をサポートするかどうか
if（!! window.webkitnotifications）{
if（window.webkitnotifications.checkpermission（）> 0）{
RequestPerision（shownotification）;
} それ以外 {
var notification = window.webkitnotifications.createNotification（ "[imgurl]"、 "title"、 "body"）;
notification.ondisplay = function（）{
setimeout（ 'notification.cancel（）'、5000）;
}
notification.show（）;
}
}
}
</script>
ブラウザでこのページを開くと、デスクトップの右下隅に5秒間続くメッセージウィンドウが表示されます。
この機能は非常に簡単ですが、実際の操作では、ユーザーへの通知関数の干渉を最小限に抑え、通知関数の発生を最小限に抑える必要があります。
このアプリケーションを作成するオンライン専門家の経験は次のとおりです。1.複数のメッセージが受信されたときに1つの通知が表示されることを確認してください。
通知オブジェクトにはreplaceIDという名前のプロパティがあるため、この問題は解決しやすいです。このプロパティを指定した後、同じLeplageIDを使用した通知ウィンドウがポップアップする限り、以前にポップアップしたウィンドウを上書きします。実際のプロジェクトでは、すべてのポップアップウィンドウに同一の置換が割り当てられています。ただし、このカバレッジの動作は同じドメインでのみ有効であることに注意する必要があります。
2。ユーザーがIMが表示されるページにある場合（ページはフォーカス状態にあります）、通知はありません。
この問題は、主にブラウザウィンドウがフォーカス状態にあるかどうかを判断することです。現在、ウィンドウのオンフォーカスイベントやオンブルルイベントを監視するより良い方法はないようです。プロジェクトでは、このようにしてウィンドウのフォーカスステータスを記録し、メッセージが届くときにポップアップウィンドウがフォーカスステータスに基づいているかどうかを判断します。
$（window）.bind（ 'blur'、this.windowblur）.bind（ 'focus'、this.windowfocus）;
この方法を使用するときに注意する必要があるのは、イベント登録ポイントができるだけ高くなることです。登録が遅すぎる場合、ユーザーがページを開いて出発すると、ステータスの誤判定を引き起こすのは簡単です。
3.ユーザーが複数のタブを使用してIMを使用して複数のページを開くと、1つのページがフォーカス状態にある限り、通知は表示されません。
複数のページ間の状態共有は、ローカルストレージを使用して達成できます。
•ブラウザウィンドウに焦点を当てるときは、ローカルストレージの指定されたキーの値を変更して焦点を合わせます。
•ブラウザウィンドウのぼかしが変更された場合、ローカルストレージの指定されたキーの値を変更してぼやけします。
Chromeで1つのタブから別のタブに切り替えると、ぼやけがフォーカスよりもストレージに書き込まれる可能性があるため、フォーカス状態を変更する際に非同期処理が必要であることに注意する必要があります。
/*フォーカスイベントのウィンドウ*/
// Delayは、複数のタブ間の切り替えの問題を解決するために、他のタブのぼかしイベントを常に上書きします。
//注：タブをクリックする前にドキュメントに焦点を合わせない場合、[タブ]をクリックするとフォーカスがトリガーされません。
setimeout（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、
タイトル、
コンテンツ
）;
//リマインダーが1つしかないことを確認してください
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/