English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
今日のプロジェクトはほぼテスト完了しており、空き時間を利用して2つの記事を書きました。前回の「nodeプロジェクトの構築方法」は、学びたいと考えている方々は既に見たと思います。この記事で最後に見せた効果は本当に素晴らしく、ここで記録しておきたいと思います。将来的には自分でも見返せるように。
以前と同じ手順で、一つずつ説明します。そうすることで、考え方が明確になります。
まずは効果を見てみましょう：
右下角に注意してください。表示されるポップアップメッセージが、私たちが実現した効果です。
効果を見てから、次に分布解説モードに入ります………..
第1歩：まずは骨組みを作成します
以下のコードはすべてscriptタグ内で書かれています。皆さんはscriptタグ内の内容に注目してください：
<!DOCTYPE html>
<html>
<head lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8">
<meta content="" name="description">
<meta content="" name="keywords">
<meta content="eric.wu" name="author">
<meta content="application/xhtml+xml;charset=UTF-8" http-equiv="Content-Type">
<meta property="qc:admins" />
<meta content="telephone=no, address=no" name="format-detection">
<meta content="width=device"-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
<title>メッセージプッシュの例</title>
</head>
<body>
右下角を見て、メッセージ通知......
</body>
</html>
<script type="text/javascript">
</script>
第2歩：ブラウザがWeb Notifications APIをサポートしているかの判断
ここでWeb Notifications APIがサポートされているかどうかを判断します。このものがサポートされていないと、次のものを続けることができません。
function justify_notifyAPI(){
if (window.Notification) {
// サポートしています
console.log("サポートしています"+"Web Notifications API"
} else {
// サポートしていません
console.log("サポートしていません"+"Web Notifications API"
}
}
第3歩：ブラウザがポップアップインスタンスをサポートしているかどうかを確認します
ここにポップアップがあります。ブラウザがポップアップインスタンスをサポートしているかどうかを確認します（画像のURLを自分のURLに変更してください）。
function justify_showMess(){
if(window.Notification && Notification.permission !== "denied") {
Notification.requestPermission(function(status) {
if (status === "granted") {
var n = new Notification('收到信息:-O', {
body: '这里是通知内容！你想看什么客官？',
icon:"../../images/headerPic/QQ画像20160525234650.jpg"
});
} else{
var n = new Notification("baby! i will leave you!");
}
});
}
}
第4ステップ：インスタンス表示されたコンテンツ
Notification構造関数のtitle属性は必須で、通知のタイトルを指定するために使用されます。options属性はオプションで、設定を設定するために使用されるオブジェクト形式です。このオブジェクトの属性は以下の通りです：
dir：テキストの方向、auto、ltr（左から右）、rtl（右から左）の値が可能です。一般的にはブラウザの設定を継承します。
lang：使用する言語、例えばen-US、zh-CN。
body：通知の内容、文字列形式、通知の目的をさらに説明するために使用されます。
tag：通知のID、文字列形式。同じtagの通知は同時に表示されません。ユーザーが前の通知を閉じた後、元の位置に表示されます。
icon：通知に表示する図のURL
function otification_construct(){
var notification = new Notification('收到新邮件', {
body: 'あなたは、1雪静からの未読メールが届きました。',}}
dir: "auto",
lang:"zh",-CN",
tag: "a",1",
icon:"../../images/headerPic/772513932673948130.jpg"
});
console.log(notification.title); // "新しいメールが届きました"
console.log(notification.body); // "あなたは合計で、3未読メールの封。"
}
第5ステップ：Notifications APIの関連イベント
Notificationインスタンスは以下の3種類のイベントをトリガーします：
show：通知がユーザーに表示された場合に発生。
click：ユーザーが通知をクリックした場合に発生。
close：ユーザーが通知を閉じた場合に発生。
error：通知が正しく表示されない場合に発生（通知が正しく表示できない場合に発生）。
これらのイベントには、onshow、onclick、onclose、onerrorメソッドがあり、対応するコールバック関数を指定するために使用されます。addEventListenerメソッドもこれらのイベントにコールバック関数を指定するために使用できます。
function otification_event(){
var MM = new Notification("Hi! My beautiful little princess！",{
body: 'あなたは、1宇宙から来たメール。',
icon:"../../images/headerPic/20100114212301-1126264202.jpg"
});
MM.onshow = function() {
console.log('Notification showning!');
};
MM.onclick = function() {
console.log('Notification have be click!');
};
MM.onerror = function() {
console.log('Notification have be click!');
// 手動で閉じる
MM.close();
};
}
ここでは基本的な機能が説明されました。上記の効果のデモソースコードを以下に付けています：
<!DOCTYPE html>
<html>
<head lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8">
<meta content="" name="description">
<meta content="" name="keywords">
<meta content="eric.wu" name="author">
<meta content="application/xhtml+xml;charset=UTF-8" http-equiv="Content-Type">
<meta property="qc:admins" />
<meta content="telephone=no, address=no" name="format-detection">
<meta content="width=device"-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
<title>Web Notifications API</title>
</head>
<body>
右下角を見て、メッセージ通知......
</body>
</html>
<script type="text/javascript">
window.onload= function(){
justify_notifyAPI(); //ブラウザが Web Notifications API をサポートしているかどうかを判断
justify_showMess(); //ブラウザが弹出インスタンスをサポートしているかどうか
otification_construct(); //インスタンス表示されたコンテンツ
otification_event(); //Notifications APIの関連イベント
}
//ブラウザが Web Notifications API をサポートしているかどうかを判断
function justify_notifyAPI(){
if (window.Notification) {
// サポートしています
console.log("サポートしています"+"Web Notifications API"
} else {
// サポートしていません
console.log("サポートしていません"+"Web Notifications API"
}
}
//ブラウザが弹出インスタンスをサポートしているかどうか
function justify_showMess(){
if(window.Notification && Notification.permission !== "denied") {
Notification.requestPermission(function(status) {
if (status === "granted") {
var n = new Notification('收到信息:-O', {
body: '这里是通知内容！你想看什么客官？',
icon:"../../images/headerPic/QQ画像20160525234650.jpg"
});
// alert("Hi! this is the notifyMessages!");
} else{
var n = new Notification("baby! i will leave you!");
}
});
}
}
// インスタンス表示されたコンテンツ
function otification_construct(){
var notification = new Notification('收到新邮件', {
body: 'あなたは、1雪静からの未読メールが届きました。',}}
dir: "auto",
lang:"zh",-CN",
tag: "a",1",
icon:"../../images/headerPic/772513932673948130.jpg"
});
console.log(notification.title); // "新しいメールが届きました"
console.log(notification.body); // "あなたは合計で、3未読メールの封。"
}
//Notifications APIの関連イベント
function otification_event(){
var MM = new Notification("Hi! My beautiful little princess！",{
body: 'あなたは、1宇宙から来たメール。',
icon:"../../images/headerPic/20100114212301-1126264202.jpg"
});
MM.onshow = function() {
console.log('Notification showning!');
};
MM.onclick = function() {
console.log('Notification have be click!');
};
MM.onerror = function() {
console.log('Notification have be click!');
// 手動で閉じる
MM.close();
};
}
</script>
これで本文の全てが終わりました。皆様の学習に役立てば幸いですし、呐喊教程を多くの皆様にサポートしていただけると嬉しいです。
声明：本文の内容はインターネットから取得しており、著作権者はすべての権利を持ちます。インターネットユーザーが自発的に貢献し、自己でアップロードしたものであり、本サイトは所有権を持ちません。また、人工的な編集は行われていません。著作権侵害の疑いがある場合は、メールを notice#w までご送信ください。3codebox.com（メールを送信する際には、#を@に変更してください。報告を行い、関連する証拠を提供してください。一旦確認がとりたいとすれば、本サイトは即座に侵害疑いのコンテンツを削除します。）