Raid on HTML5 Javascript API Extension 5—その他の拡張機能 (アプリケーション キャッシュ/サーバー メッセージ/デスクトップ通知)_html5 チュートリアルのヒント

主な API 拡張機能については以前にまとめました。次の拡張機能は特別な場合にのみ最大の役割を果たします。ここで簡単に説明します。以下の機能は例外なく IE ではサポートされていません。アプリケーション キャッシュとサーバー側メッセージングは​​、他の主要なブラウザーでサポートされています。デスクトップ通知は現在 Chrome でのみサポートされています。
アプリケーション キャッシュ
多くの場合、アクセス速度を向上させるために、頻繁に変更されない一部のページをキャッシュする必要があります。また、一部のアプリケーションでは、それらのページをオフラインで使用できるようにしたい場合もあります。 HTML5では、「アプリケーションキャッシュ」と呼ばれる技術により、これらの機能を簡単に実装できます。
アプリケーション キャッシュの実装では、HTML5 を使用してキャッシュ マニフェスト ファイルを作成し、アプリケーションのオフライン バージョンを簡単に生成できます。
実装手順:
1. ページのキャッシュを有効にするのは非常に簡単です。

ユーザーがアクセスすると、このマニフェスト属性を含むすべてのページがキャッシュされます。マニフェスト属性が指定されていない場合、ページはキャッシュされません (マニフェスト ファイルでページが直接指定されていない限り)。マニフェスト ファイルの拡張子には統一された標準はありません。推奨される拡張子は「.appcache」です。
2. サーバー側でマニフェスト ファイルの MIME タイプを設定します。
マニフェスト ファイルは、正しい MIME タイプでサポートされている必要があります。このファイル タイプは「text/cache-manifest」です。使用する Web サーバー上で設定する必要があります。例: Apache では、.htaccess に AddType text/cache-manifest マニフェストを追加できます。
3. マニフェスト ファイルを作成します
マニフェスト ファイルは、ブラウザにどのコンテンツをキャッシュするか (またはどのコンテンツをキャッシュしないのか) を指示する単純なテキスト ファイルです。
マニフェスト ファイルには、次の 3 つのセクションが含まれています。
• キャッシュ マニフェスト - このリスト ヘッダーの下にあるファイルは、ダウンロード後にキャッシュされます。
• ネットワーク - このリスト タイトルの下にあるファイルはサーバーへの接続が必要であり、キャッシュされません。
• FALLBACK - このリスト タイトルの下のファイルにアクセスできない場合、特定のページを表示します。
完全なファイルを以下の例に示します。


ヒント:
# はコメントで始まります。
* は、他のすべてのリソースまたはファイルを表すために使用できます。例:


は、すべてのリソースまたはファイルがキャッシュされないことを意味します。
4. キャッシュを更新します
アプリケーションがキャッシュされると、次のことが起こらない限り、キャッシュされたままになります:
• ユーザーがキャッシュを削除する
• マニフェスト ファイルが変更される
• アプリケーションキャッシュはプログラムによって変更されます
そのため、ファイルがキャッシュされると、人による変更を除いて、たとえサーバー ファイルを変更したとしても、ブラウザはキャッシュされたバージョンのコンテンツを表示し続けます。ブラウザーがキャッシュを更新するには、マニフェスト ファイルを変更するだけです。
: 「#」で始まる行はコメント行ですが、他の目的にも使用できます。変更に画像または JavaScript 関数のみが含まれる場合、それらの変更は再キャッシュされません。コメント内の日付とバージョンを更新することは、ブラウザーにファイルを再キャッシュさせる 1 つの方法です
: ブラウザーでは、キャッシュされたデータに対してさまざまなサイズ制限を設定できます (一部のブラウザーでは、5M のキャッシュ データを許可します)。

コードをコピーします

コードは次のとおりです。

if(typeof(EventSource) !== "未定義")
{
// はい! サーバー送信イベントをサポートしています!
// 一部のコード....
}else {
// 申し訳ありません。サーバー送信イベントのサポート..
}

2. サーバー側メッセージ送信コード
サーバー側で更新メッセージを送信するのは非常に簡単です。コンテンツ タイプ ヘッダー情報を次のように設定した後です。 「text/event-stream」でイベントを送信できます。 ASP コードを例に挙げます。

コードをコピーします

コードは次のとおりです:

<%
Response.ContentType="text/event-stream"
Response.Expires=-1
Response.Write("data: >> サーバー時間" & 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)
• 更新を受信するたびに、onmessage イベントがトリガーされます
• onmessage 時間がトリガーされると、取得したデータが要素に設定されますid="result"
EventSource オブジェクトは、onmessage イベントに加えて、エラー処理用の onerror イベント、接続確立用の onopen イベントなどがあります。

デスクトップ通知 - 準 HTML5 機能
デスクトップ通知機能を使用すると、ブラウザーが最小化されている場合でもメッセージをユーザーに通知できます。これは WebIM との最も自然な組み合わせです。ただし、現在この機能をサポートしているブラウザは Chrome のみです。ポップアップ ウィンドウは誰もが嫌うものなので、この機能をオンにするにはユーザーの許可が必要です。

コードをコピーしますコードは次のとおりです。

<script> >function RequestPermission (callback) { <div class="msgborder" id="phpcode192">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 notification =window.webkitNotifications.createNotification ("[ imgurl]","タイトル","本文"); <br>notification.ondisplay = function() { <br>setTimeout('notification.cancel()', 5000); notification.show (); <br>} <br>} <br>} <br></script>


このページをブラウザで開くと、ポップアップが表示されます。デスクトップの右下隅にある 5 秒間のメッセージ ウィンドウ。
この機能の使い方は非常に簡単ですが、実際の操作では、ユーザーへの通知機能の干渉を最小限に抑え、通知機能の発生を最小限に抑える必要があります。

以下は、このアプリケーションを作成する際のオンライン専門家の経験です