web-dev-qa-db-ja.com

Webアプリからデスクトップ通知を表示する方法は何ですか？

できれば通知のようなトースターを表示したいのですが、デスクトップの更新を「プッシュ」する方法はどれも興味深いものです。

ありがとう

web-applicationsnotificationsdesktop
34
reshefm

以下は、Chrome、Firefox、OperaおよびSafari、 Chromeデスクトップ通知の例 からコピーしたデスクトップ通知の動作例です。
実際に試してみてください JSBinで 。

// request permission on page load
document.addEventListener('DOMContentLoaded', function () {
  if (Notification.permission !== "granted")
    Notification.requestPermission();
});

function notifyMe() {
  if (!Notification) {
    alert('Desktop notifications not available in your browser. Try Chromium.'); 
    return;
  }

  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("https://stackoverflow.com/a/13328397/1269037");      
    };

  }

}

<button onclick="notifyMe()">Notify me!</button>

Chromeデスクトップ通知の例 への回答で、これがどのように機能するかについての詳細をご覧ください。

133
Dan Dascalescu

Chromeでは、デスクトップ通知を使用してこのようなことを実現できます。 Chromeデスクトップ通知の例 をご覧ください。

ユーザーが自分のマシンにうなり声をインストールしている場合は、チェックアウトする必要があります growl developer page

2
Jay Sidri