ホームページ > 記事 > ウェブフロントエンド > HTML5を使用したデスクトップリマインダー機能の実装コード例
HTML5を使用したデスクトップリマインダー機能の実装コード例
- 零下一度オリジナル
- 2017-04-22 14:37:542622ブラウズ
デスクトップリマインダーの紹介
デスクトップ通知機能を使用すると、ブラウザが最小化されている場合でもメッセージをユーザーに通知できます。これは WebIM との最も自然な組み合わせです。ただし、現在デスクトップ通知機能をサポートしているブラウザは Chrome 5 以降のみです。実際の使用プロセスでは、ユーザーへの通知機能の干渉を最小限に抑え、通知機能の発生を最小限に抑える必要があります。
複数のメッセージを受信する場合、次の点だけを確認してください。通知機能が表示されます。
2. ユーザーが IM が表示されるページにいる場合 (ページがフォーカス状態の場合)、通知は表示されません。
3.ページがフォーカス状態にある限り、IM で複数のページを開くには、通知は表示されません
4. ユーザーが通知フローティング レイヤーをクリックして特定のチャット ウィンドウを見つけられるようにする方法
-
5. さらに、解決する必要がある利便性の問題もあります
デスクトップリマインダー通知API
window.webkitNotifications
requestPermission 通信許可のリクエスト
checkPermission通信許可を確認する
-
createNotification コミュニケーションを作成します
show 通知を表示
コード
<!DOCTYPE HTML>
<html>
<head
<meta charset="gbk">
<title>Creating OS notifications in HTML5</title>
</head>
<body>
<input type="button" value="验证授权" onclick="init();" />
<input type="button" value="弹出消息" onclick="notify();" />
<script type="text/javascript">
const miao = 5;
function init() {
if (window.webkitNotifications) {
window.webkitNotifications.requestPermission();
}
}
function notify() {
var icon = "logo.png";
var title = "Hello World";
var body = "You Are My World (5秒后自动关闭)";
if (window.webkitNotifications) {
if (window.webkitNotifications.checkPermission() == 0) {
var popup = window.webkitNotifications.createNotification(icon, title, body);
popup.ondisplay = function(event) {
setTimeout(function() {
event.currentTarget.cancel();
}, miao * 1000);
}
popup.show();
popup.show();
} else {
window.webkitNotifications.requestPermission();
return;
}
}
}
</script>
</body>
</html>を実現するには、HTML5 を学習する必要がある学生は、php 中国語 Web サイト html5 ビデオ チュートリアル に注目してください。無料で視聴できる！
以上がHTML5を使用したデスクトップリマインダー機能の実装コード例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。