Chromeデスクトップ通知の例[終了]


409

Chromeデスクトップ通知をどのように使用しますか?それを自分のコードで使用したいのですが。

更新:Webkitの通知と例を説明するブログ投稿です。


2
HTML通知のサポートが終了した後、2012年11月の時点で以下回答を更新しました。あなたが探していたような実際の例があります。
Dan Dascalescu


1
更新:2015年の時点で、ユーザーがWebサイトを閲覧していない場合でも配信される実際のプッシュ通知をWebサイトが送信することもできます。この回答を
collimarco 2016年

3
それを閉業としてマークするためのこれらすべての有権者は、IE / Safari愛好家でなければなりません。これはブラウザ通知に固有であり、特にchromeに固有です。それが話題から外れているのなら、なぜそれを好きで、そもそもスター付きとしてマークする人がそれほど多くいるのですか?
18

2
なぜ話題外?
SmartManoj

回答:


716

最新のブラウザには、2種類の通知があります。

  • デスクトップ通知 -トリガーが簡単で、ページが開いている限り機能し、数秒後に自動的に消えます。
  • Service Worker通知 -少し複雑ですが、バックグラウンドで(ページが閉じられた後でも)機能し、永続的で、アクションボタンをサポートします

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もご覧ください。


4
@mghaoui-人気の!= true(必須)。これを正解としてマークしました。
Sridhar Ratnakumar 2013

2
Chrome以外のブラウザでwindow.webkitNotifications.checkPermission()が例外をスローする
JTテイラー

2
Closeはメソッドではありません。notification.cancel()> decadecity.net/blog/2012/10/12/webkit-notification-api >>も必要だと思います>>また、それ自体で終了するようです。
KingOfHypocrites 2014年

3
サポートに感謝します。Pusherでこれを使用すると、通知システムの構築に役立ちました。
Awijeet 2015年

3
Windows 8上のMozilla Fire foxで作業しているときにChromeバージョン47.0.2526.80 dev-mで動作しない
Sarz

87

簡単な例については、デザインAPI仕様(まだドラフトです)またはソース(ページは使用できなくなりました)を確認してください。これは主にへの呼び出しwindow.webkitNotifications.createNotificationです。

より堅牢な例が必要な場合(独自のGoogle Chromeの拡張機能を作成しようとしていて、権限やローカルストレージなどの処理方法を知りたい場合)、Gmail Notifier Extensionを確認してください。インストールする代わりにcrxファイルをダウンロードしてくださいそれを解凍し、ソースコードを読み取ります。


すべてのブラウザで機能するものはありませんか?
Royi Namir 2012

@ Royi、Firefox拡張機能、および遅かれ早かれ来るネイティブFirefox実装があります。Internet Explorerの場合、考えられる解決策は、サイトのユーザーにChrome Frameをダウンロードするよう依頼することです。これは、通知を機能させるための実行可能な解決策であるためです。他にもいくつかのMicrosoftソリューションがあります。
ブライアンフィールド

7
この答えは、4年後の今では完全に時代遅れです。@RoyiNamir:通知APIがあります。私の答えを確認しください。
Dan Dascalescu

1
サンプルのリンクは無効です。
Vinny

33

その表示され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}`);
  }
}

コードペン


@Miron最初の段落のハイパーリンクをご覧ください。ソースをリンクし、SOのエチケットに従って、コードを回答にコピーしました。MDNがWikiではなかった場合、著者が誰であるかをより明確に示したかもしれませんが、私は何も偽っていません。
mpen 2017年

彼が書いたところがどこにあるのかわかりませんか?
Brandito 2017年

codepenが機能しません
Stepan Yakovenko

1
@StepanYakovenkoもう一度codepenリンクを試してください。else最後にエキストラを追加して、問題が何であるかを説明します。私のような通知をグローバルに無効にしたと思います:\
mpen

14

私は好きです:http : //www.html5rocks.com/en/tutorials/notifications/quick/#toc-examplesが古い変数を使用しているため、デモは動作しません。webkitNotificationsですNotification


そこでのTwitterの例はもはや機能しません。
Dan Dascalescu

html5rocks.com/en/profilesに伝える必要があります。emの 1つはTwitterで機能する必要があります=)
Rudie

へえ。私がたまたま彼のプレゼンテーションフレームワークに貢献したので、ハキムは通知するのに最高の人でした。
Dan Dascalescu

4

この簡単な通知ラッパーを作成しました。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オブジェクトはオプションです。


@gravmatt Firefoxで複数のブラウザウィンドウが開いていると通知が表示されないという問題が発生しましたか?
エラン・オザップ2017

@eranotzap複数のタブで動作するはずです。私はこれが問題のないプロジェクトを実行しています。しかし、複数のウィンドウがあるかどうかはわかりません。
gravmatt 2017

私は複数のタブで同じ問題を抱えています
eran otzap '21 / 02/21

Firefoxの複数のタブから動作しますか?
eran otzap 2017

1
@eranotzap WindowsとMacでテストしました。画面のどの隅にも通知が表示されませんが、通知音が聞こえ、Macではサイドバーに通知が表示されます(複数のタブが開いています)。Firefoxは新しいインターネットエクスプローラです。
グラマット



3
<!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>


1
コードのみの回答の投稿はご遠慮ください。コメントや説明を少し追加して、将来この投稿を読んだときに理解してもらえるようにします。
Adriaan

ただし、この特定のコードスニペットの場合、これは非常に簡単に見えます。他のユーザーもコメントにフォローアップの質問を投稿できますよね?
frostshoxx 2017年

1
上記のコードを使用したJSfiddleは機能しません。「通知APIの許可は、クロスオリジンのiframeから要求されない可能性があります。」ただし、開発者コンソールを開いてと入力するNotification.requestPermission();var notification = new Notification('hello', { body: "Hey there!", });、通知が表示されます。
Kai Noack

申し訳ありませんが、この答えは正確に何を追加しますか?
Dan Dascalescu、
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.