web-dev-qa-db-ja.com

Chromeデスクトップ通知の例

Chromeデスクトップ通知をどう使うのですか ？私は自分のコードでそれを使って欲しいのです。

更新 ：こちらが ブログ投稿 webkitの通知を例に説明.

javascriptdesktopgoogle-chromenotifications
377
Sridhar Ratnakumar

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

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

API呼び出しは同じパラメータを使用します（アクションを除く - デスクトップ通知では使用できません）。これは MDN およびサービス担当者向けに GoogleのWeb Fundamentals サイトで詳しく説明されています。

以下はChrome、Firefox、Opera、Safari向けの desktop notificationの実用的な例です。セキュリティ上の理由から、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 Notifications APIを使っています。これを Chrome extensions notifications API と混同しないでください。 Chrome拡張機能の通知は明らかにChrome拡張機能でのみ機能し、ユーザーからの特別な許可を必要としません。

W3C通知は多くのブラウザで機能し（ caniuse のサポートを参照）、ユーザーの許可が必要です。ベストプラクティスとして、すぐにこの許可を求めないでください。 最初にユーザに通知が必要な理由 を説明し、他の プッシュ通知パターン を参照してください。

this bug のため、ChromeはLinux上の通知アイコンを尊重しません。

最後の言葉

通知サポートは絶え間なく変化しており、さまざまなAPIがここ数年で非推奨になりました。あなたが興味を持っているならば、Chromeでこれまで働いていたものを見るために、そして豊富なHTML通知の物語を学ぶためにこの答えの前の編集をチェックしてください。

現在の最新の標準は https://notifications.spec.whatwg.org/ です。

サービスワーカーにいるかどうかに応じて、同じ効果に対して2つの異なる呼び出しがある理由については、 Googleで働いている間に私が提出したこのチケット を参照してください。

ヘルパーライブラリについては notify.js もご覧ください。

668
Dan Dascalescu

簡単な例として、 design および API仕様 （まだドラフトです）または（利用できなくなったページからの）ソースをチェックしてください。これは主にwindow.webkitNotifications.createNotificationの呼び出しです。

もっと堅牢な例（あなた自身のGoogle Chromeの拡張機能を作成しようとしていて、アクセス権やローカルストレージなどの扱い方を知りたい場合）は、 Gmail Notifier Extension ：をダウンロードしてください。インストールするのではなくファイルを解凍し、解凍してソースコードを読みます。

84
GmonC

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}`);
  }
}

codepen

33
mpen

私は好きです： http://www.html5rocks.com/en/tutorials/notifications/quick/#toc-examples しかしそれは古い変数を使うのでデモはもう動作しません。 webkitNotificationsはNotificationになりました。

14
Rudie

私はこの簡単な通知ラッパーを作りました。 Chrome、Safari、Firefoxで動作します。

おそらくOpera、IE、そしてEdgeでも同様ですが、まだテストしていません。

Notify.jsファイルをここから入手してください。{ https://github.com/gravmatt/js-notify } _そしてそれをあなたのページに入れてください。

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オブジェクトはオプションです。

4
gravmatt
<!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>
3
Hina Halani

これはAPIに関する素晴らしいドキュメントです。

https://developer.chrome.com/apps/notifications

そして、Googleによる公式ビデオの説明、

https://developers.google.com/live/shows/83992232-1001

3
Altaf Patel

Notify.jsは、新しいWebキット通知のラッパーです。それはかなりうまくいきます。

http://alxgbsn.co.uk/2013/02/20/notify-js-a-handy-wrapper-for-the-web-notifications-api/ /

3
Ashley Davis