回答:
最新のブラウザには、2種類の通知があります。
API呼び出しは同じパラメーターを使用します(アクションを除く-デスクトップ通知では使用できません)。これらは、MDNおよびサービスワーカー向けに、GoogleのWeb Fundamentalsサイトで詳細に文書化されています。
以下は、Chrome、Firefox、Opera、Safari のデスクトップ通知の実際の例です。セキュリティ上の理由から、Chrome 62以降、Notification APIの許可はクロスオリジンのiframeから要求されない可能性があるため、 StackOverflowのコードスニペットを使用してこれをデモすることはできません。この例をサイト/アプリケーションのHTMLファイルに保存し、localhost://
またはHTTPS を使用する必要があります。
// request permission on page load
document.addEventListener('DOMContentLoaded', function() {
if (!Notification) {
alert('Desktop notifications not available in your browser. Try Chromium.');
return;
}
if (Notification.permission !== 'granted')
Notification.requestPermission();
});
function notifyMe() {
if (Notification.permission !== 'granted')
Notification.requestPermission();
else {
var notification = new Notification('Notification title', {
icon: 'http://cdn.sstatic.net/stackexchange/img/logos/so/so-icon.png',
body: 'Hey there! You\'ve been notified!',
});
notification.onclick = function() {
window.open('http://stackoverflow.com/a/13328397/1269037');
};
}
}
<button onclick="notifyMe()">Notify me!</button>
W3C通知 API を使用しています。これをChrome 拡張機能通知APIと混同しないでください。Chrome拡張機能の通知は明らかにChrome拡張機能でのみ機能し、ユーザーからの特別な許可は必要ありません。
W3C通知は多くのブラウザーで動作し(caniuseのサポートを参照)、ユーザーの許可が必要です。ベストプラクティスとして、この許可をすぐに要求しないでください。最初にユーザーに通知が必要な理由を説明し、他のプッシュ通知パターンを確認するます。
このバグのため、ChromeはLinuxの通知アイコンを受け入れません。。
通知のサポートは絶え間なく変化しており、さまざまなAPIがこの数年間非推奨になっています。興味があれば、この回答の以前の編集をチェックして、Chromeで何が機能していたかを確認し、リッチHTML通知のストーリーを学んでください。
現在、最新の標準はhttps://notifications.spec.whatwg.org/にあります。
サービスワーカーであるかどうかに応じて、同じ効果に対する2つの異なる呼び出しがある理由について-Googleで働いている間に私が提出したこのチケットを参照してください。
ヘルパーライブラリについては、notify.jsもご覧ください。
簡単な例については、デザインとAPI仕様(まだドラフトです)またはソース(ページは使用できなくなりました)を確認してください。これは主にへの呼び出しwindow.webkitNotifications.createNotification
です。
より堅牢な例が必要な場合(独自のGoogle Chromeの拡張機能を作成しようとしていて、権限やローカルストレージなどの処理方法を知りたい場合)、Gmail Notifier Extensionを確認してください。インストールする代わりにcrxファイルをダウンロードしてくださいそれを解凍し、ソースコードを読み取ります。
その表示されwindow.webkitNotifications
、すでに非推奨と削除されました。ただし、新しいAPIがあり、最新バージョンのFirefoxでも動作するようです。
function notifyMe() {
// Let's check if the browser supports notifications
if (!("Notification" in window)) {
alert("This browser does not support desktop notification");
}
// Let's check if the user is okay to get some notification
else if (Notification.permission === "granted") {
// If it's okay let's create a notification
var notification = new Notification("Hi there!");
}
// Otherwise, we need to ask the user for permission
// Note, Chrome does not implement the permission static property
// So we have to check for NOT 'denied' instead of 'default'
else if (Notification.permission !== 'denied') {
Notification.requestPermission(function (permission) {
// Whatever the user answers, we make sure we store the information
if(!('permission' in Notification)) {
Notification.permission = permission;
}
// If the user is okay, let's create a notification
if (permission === "granted") {
var notification = new Notification("Hi there!");
}
});
} else {
alert(`Permission is ${Notification.permission}`);
}
}
else
最後にエキストラを追加して、問題が何であるかを説明します。私のような通知をグローバルに無効にしたと思います:\
私は好きです:http : //www.html5rocks.com/en/tutorials/notifications/quick/#toc-examplesが古い変数を使用しているため、デモは動作しません。webkitNotifications
ですNotification
。
この簡単な通知ラッパーを作成しました。Chrome、Safari、Firefoxで動作します。
おそらくOpera、IE、Edgeでも同様ですが、まだテストしていません。
こちらのhttps://github.com/gravmatt/js-notifyからnotify.jsファイルを入手してくださいして、ページに配置するだけです。
Bowerで入手する
$ bower install js-notify
これがどのように機能するかです:
notify('title', {
body: 'Notification Text',
icon: 'path/to/image.png',
onclick: function(e) {}, // e -> Notification object
onclose: function(e) {},
ondenied: function(e) {}
});
タイトルを設定する必要がありますが、2番目の引数としてのjsonオブジェクトはオプションです。
Notify.jsは、新しいWebkit通知のラッパーです。それはかなりうまくいきます。
http://alxgbsn.co.uk/2013/02/20/notify-js-a-handy-wrapper-for-the-web-notifications-api/
<!DOCTYPE html>
<html>
<head>
<title>Hello!</title>
<script>
function notify(){
if (Notification.permission !== "granted") {
Notification.requestPermission();
}
else{
var notification = new Notification('hello', {
body: "Hey there!",
});
notification.onclick = function () {
window.open("http://google.com");
};
}
}
</script>
</head>
<body>
<button onclick="notify()">Notify</button>
</body>