ホームページ > 記事 > ウェブフロントエンド > Raid on HTML5 Javascript API Extension 5—その他の拡張機能 (アプリケーション キャッシュ/サーバー メッセージ/デスクトップ通知)_html5 チュートリアルのヒント
Raid on HTML5 Javascript API Extension 5—その他の拡張機能 (アプリケーション キャッシュ/サーバー メッセージ/デスクトップ通知)_html5 チュートリアルのヒント
- WBOYオリジナル
- 2016-05-16 15:49:571281ブラウズ
主な API 拡張機能については以前にまとめました。次の拡張機能は特別な場合にのみ最大の役割を果たします。ここで簡単に説明します。以下の機能は例外なく IE ではサポートされていません。アプリケーション キャッシュとサーバー側メッセージングは、他の主要なブラウザーでサポートされています。デスクトップ通知は現在 Chrome でのみサポートされています。
アプリケーション キャッシュ
多くの場合、アクセス速度を向上させるために、頻繁に変更されない一部のページをキャッシュする必要があります。また、一部のアプリケーションでは、それらのページをオフラインで使用できるようにしたい場合もあります。 HTML5では、「アプリケーションキャッシュ」と呼ばれる技術により、これらの機能を簡単に実装できます。
アプリケーション キャッシュの実装では、HTML5 を使用してキャッシュ マニフェスト ファイルを作成し、アプリケーションのオフライン バージョンを簡単に生成できます。
実装手順:
1. ページのキャッシュを有効にするのは非常に簡単です。
コードをコピーします
コードは次のとおりです:...
ユーザーがアクセスすると、このマニフェスト属性を含むすべてのページがキャッシュされます。マニフェスト属性が指定されていない場合、ページはキャッシュされません (マニフェスト ファイルでページが直接指定されていない限り)。マニフェスト ファイルの拡張子には統一された標準はありません。推奨される拡張子は「.appcache」です。
2. サーバー側でマニフェスト ファイルの MIME タイプを設定します。
マニフェスト ファイルは、正しい MIME タイプでサポートされている必要があります。このファイル タイプは「text/cache-manifest」です。使用する Web サーバー上で設定する必要があります。例: Apache では、.htaccess に AddType text/cache-manifest マニフェストを追加できます。
3. マニフェスト ファイルを作成します
マニフェスト ファイルは、ブラウザにどのコンテンツをキャッシュするか (またはどのコンテンツをキャッシュしないのか) を指示する単純なテキスト ファイルです。
マニフェスト ファイルには、次の 3 つのセクションが含まれています。
• キャッシュ マニフェスト - このリスト ヘッダーの下にあるファイルは、ダウンロード後にキャッシュされます。
• ネットワーク - このリスト タイトルの下にあるファイルはサーバーへの接続が必要であり、キャッシュされません。
• FALLBACK - このリスト タイトルの下のファイルにアクセスできない場合、特定のページを表示します。
完全なファイルを以下の例に示します。
コードをコピーします
コードは次のとおりです:キャッシュ マニフェスト
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js
ネットワーク:
login.asp
FALLBACK:
/html5/ /offline.html
ヒント:
# はコメントで始まります。
* は、他のすべてのリソースまたはファイルを表すために使用できます。例:
コードをコピー
コードは次のとおりです:NETWORK:
*
は、すべてのリソースまたはファイルがキャッシュされないことを意味します。
4. キャッシュを更新します
アプリケーションがキャッシュされると、次のことが起こらない限り、キャッシュされたままになります:
• ユーザーがキャッシュを削除する
• マニフェスト ファイルが変更される
• アプリケーションキャッシュはプログラムによって変更されます
そのため、ファイルがキャッシュされると、人による変更を除いて、たとえサーバー ファイルを変更したとしても、ブラウザはキャッシュされたバージョンのコンテンツを表示し続けます。ブラウザーがキャッシュを更新するには、マニフェスト ファイルを変更するだけです。
: 「#」で始まる行はコメント行ですが、他の目的にも使用できます。変更に画像または JavaScript 関数のみが含まれる場合、それらの変更は再キャッシュされません。コメント内の日付とバージョンを更新することは、ブラウザーにファイルを再キャッシュさせる 1 つの方法です
: ブラウザーでは、キャッシュされたデータに対してさまざまなサイズ制限を設定できます (一部のブラウザーでは、5M のキャッシュ データを許可します)。
コードをコピー
コードは次のとおりです:サーバーメッセージ< ; /strong>
もう 1 つの一般的なシナリオは、サーバー上のデータが変更されたとき、どのようにクライアントに通知するかです。これは過去にも行われていました。ページが率先してサーバーに更新を問い合わせました。前の紹介によると、WebSocket を使用して双方向通信を実現できることがわかりました。ここでは、HTML5 のもう 1 つの新機能であるサーバー送信イベントを紹介します。
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() )
Response.Flush()
%>
3. ブラウザ側のメッセージ受信コード
コードをコピーします コードは次のとおりです。
source.onmessage=function(event); {
document.getElementById(" result").innerHTML =event.data "
"
};
コードの説明:
• EventSource オブジェクトを作成し、更新を送信するページの URL を指定します (ここでは、demo_see.jsp) document.getElementById(" result").innerHTML =event.data "
"
};
コードの説明:
• 更新を受信するたびに、onmessage イベントがトリガーされます
• onmessage 時間がトリガーされると、取得したデータが要素に設定されますid="result"
EventSource オブジェクトは、onmessage イベントに加えて、エラー処理用の onerror イベント、接続確立用の onopen イベントなどがあります。
デスクトップ通知 - 準 HTML5 機能
デスクトップ通知機能を使用すると、ブラウザーが最小化されている場合でもメッセージをユーザーに通知できます。これは WebIM との最も自然な組み合わせです。ただし、現在この機能をサポートしているブラウザは Chrome のみです。ポップアップ ウィンドウは誰もが嫌うものなので、この機能をオンにするにはユーザーの許可が必要です。
コードをコピーしますコードは次のとおりです。
このページをブラウザで開くと、ポップアップが表示されます。デスクトップの右下隅にある 5 秒間のメッセージ ウィンドウ。
この機能の使い方は非常に簡単ですが、実際の操作では、ユーザーへの通知機能の干渉を最小限に抑え、通知機能の発生を最小限に抑える必要があります。
以下は、このアプリケーションを作成する際のオンライン専門家の経験です
1. 複数のメッセージを受信したときに、通知が 1 つだけ表示されるようにします。
この問題は、次の理由で解決しやすくなります。通知オブジェクトには「replaceId」というプロパティがあります。この属性を指定した後、同じ replaceId を持つ通知ウィンドウがポップアップ表示される限り、前のポップアップ ウィンドウは上書きされます。実際のプロジェクトでは、すべてのポップアップ ウィンドウに同じ replaceId が割り当てられます。ただし、この上書き動作は同じドメイン内でのみ有効であることに注意してください。
2. ユーザーが IM が表示されるページにいるとき (ページがフォーカス状態である場合)、通知は表示されません。この問題は主に、ブラウザ ウィンドウがフォーカス状態であるかどうかを判断することです。ウィンドウのオンフォーカスとオンブラーを監視することに加えて、この事件を除けば、これより良い方法はないようです。プロジェクトでは、このメソッドを使用してウィンドウのフォーカス状態を記録し、メッセージが到着したときにフォーカス状態に基づいてウィンドウをポップアップするかどうかを判断します。
コードをコピーします
コードは次のとおりです: $(window).bind ( 'blur ', this.windowBlur).bind( 'focus', this.windowFocus);
この方法を使用する際の注意点は、イベント登録のイベントポイントができるだけ早いほうがよいということです。登録が遅すぎると、ユーザーがページを開いたときとその後のステータスを誤判断しやすくなります。葉。
3. ユーザーが複数のタブを使用して IM で複数のページを開く場合、1 つのページがフォーカス状態にある限り、通知は表示されません。
複数のページ間の状態共有は、ローカル ストレージを通じて実現できます。 > • ブラウザウィンドウが Focus の場合、ローカルストレージの指定キーの値を「focus」に変更
• ブラウザウィンドウが Blur の場合、ローカルストレージの指定キーの値を「blur」に変更。
Chrome でタブから別のタブに切り替える場合、Focus の後に Blur がストレージに書き込まれる可能性があるため、Focus の状態を変更する際には非同期処理が必要になることに注意してください。
4. ユーザーが通知フローティング レイヤーをクリックして特定のチャット ウィンドウを見つけられるようにする方法
通知ウィンドウは onclick およびその他のイベント応答をサポートしており、応答関数のスコープはウィンドウを作成したページに属します。次のコード:
実用的なリファレンス:
この方法を使用する際の注意点は、イベント登録のイベントポイントができるだけ早いほうがよいということです。登録が遅すぎると、ユーザーがページを開いたときとその後のステータスを誤判断しやすくなります。葉。
3. ユーザーが複数のタブを使用して IM で複数のページを開く場合、1 つのページがフォーカス状態にある限り、通知は表示されません。
複数のページ間の状態共有は、ローカル ストレージを通じて実現できます。 > • ブラウザウィンドウが Focus の場合、ローカルストレージの指定キーの値を「focus」に変更
• ブラウザウィンドウが Blur の場合、ローカルストレージの指定キーの値を「blur」に変更。
Chrome でタブから別のタブに切り替える場合、Focus の後に Blur がストレージに書き込まれる可能性があるため、Focus の状態を変更する際には非同期処理が必要になることに注意してください。
コードをコピーしますコードは次のとおりです:
/*フォーカス イベントのウィンドウ*/
//遅延は、複数のタブを切り替えるときに常にフォーカスが他のタブの Blur イベントをカバーできるようにする問題を解決するために使用されます
//注: タブをクリックする前にドキュメントにフォーカスがない場合、 Tab をクリックしても、Focus の
setTimeout( function(){
Storage.setItem( 'kxchat_focus_win_state', 'focus' );
}, 100);
}, 100);
Storage.setItem( 'kxchat_focus_win_state', 'blur' );
上記の状態共有を実現したら、新しいメッセージが到着した後、「kxchat_focus_win_state」の値が有効かどうかを確認するだけで済みます。ローカル ストレージにブラーがある場合、ポップアップ ウィンドウはブラー専用です。 //遅延は、複数のタブを切り替えるときに常にフォーカスが他のタブの Blur イベントをカバーできるようにする問題を解決するために使用されます
//注: タブをクリックする前にドキュメントにフォーカスがない場合、 Tab をクリックしても、Focus の
setTimeout( function(){
Storage.setItem( 'kxchat_focus_win_state', 'focus' );
}, 100);
}, 100);
Storage.setItem( 'kxchat_focus_win_state', 'blur' );
4. ユーザーが通知フローティング レイヤーをクリックして特定のチャット ウィンドウを見つけられるようにする方法
通知ウィンドウは onclick およびその他のイベント応答をサポートしており、応答関数のスコープはウィンドウを作成したページに属します。次のコード:
コードをコピー コードは次のとおりです:
var n = dn.createNotification (
img,
title,
content
);
// リマインダーが 1 つだけであることを確認します
n.replaceId = this.replaceId; n.onclick = function() {
//通知ウィンドウをポップアップ表示するブラウザ ウィンドウをアクティブ化します
window.focus();
//IM ウィンドウを開きます
WM.openWinByID( data ) ;
//通知ウィンドウを閉じる
n.cancel();
};
onclick 応答関数でアクセスされるウィンドウ オブジェクトは現在作成されているページに属します。現在のページを簡単に操作できます。上記のコードは、ポップアップ ウィンドウをクリックすると、対応するブラウザ ウィンドウにジャンプし、IM ウィンドウが開くことを認識しています。
: ページ上の関連イベントのタイミングは不確実であることが多いため、コードでは、特定のイベントがトリガーされる順序が確実であると想定しないようにする必要があります。たとえば、上記のブラー イベントとフォーカス イベント img,
title,
content
);
// リマインダーが 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/
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。