path: root/files/ja/web/api/notification/index.html

---
title: Notification
slug: Web/API/Notification
tags:
  - API
  - Interface
  - Notifications
  - Reference
  - インターフェイス
translation_of: Web/API/Notification
---
<p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p>

<p><span class="seoSummary"><code>Notification</code> は <a href="/ja/docs/Web/API/Notifications_API">Notifications API</a> のインターフェイスで、ユーザーへのデスクトップ通知の設定と表示に使われます。</span>これらの通知の表示方法や機能はプラットフォームによって異なりますが、一般にユーザーに対して非同期に情報を提供する方法を提供します。</p>

<h2 id="Constructor" name="Constructor">コンストラクター</h2>

<dl>
 <dt>{{domxref("Notification.Notification", "Notification()")}}</dt>
 <dd><code>Notification</code> オブジェクトの新しいインスタンスを生成します。</dd>
</dl>

<h2 id="Properties" name="Properties">プロパティ</h2>

<h3 id="Static_properties" name="Static_properties">静的プロパティ</h3>

<p>これらのプロパティは <code>Notification</code> オブジェクト自身のみで利用することができます。</p>

<dl>
 <dt>{{domxref("Notification.permission")}} {{readonlyinline}}</dt>
 <dd>文字列で、通知の表示についての現在の権限を表します。取りうる値は次の通りです。
 <ul>
  <li><code>denied</code> — ユーザーが通知の表示を拒否した。</li>
  <li><code>granted</code> —通知が表示されることをユーザーが受け入れた。</li>
  <li><code>default</code> — ユーザーの選択が不明であるため、ブラウザーは値が denied であるかのように動作します。</li>
 </ul>
 </dd>
 <dt>{{domxref("Notification.maxActions")}} {{readonlyinline}}</dt>
</dl>

<h3 id="Instance_properties" name="Instance_properties">インスタンスプロパティ</h3>

<p>これらのプロパティは <code>Notification</code> オブジェクトのインスタンスでのみ使用可能です。</p>

<dl>
 <dt>{{domxref("Notification.actions")}} {{readonlyinline}}</dt>
 <dd>コンストラクターの <code><var>options</var></code> 引数で指定された、通知のアクションの配列です。</dd>
 <dt>{{domxref("Notification.badge")}} {{readonlyinline}}</dt>
 <dd>通知自体を表示する空間が充分にない場合に通知を表す画像の URL です。</dd>
 <dt>{{domxref("Notification.body")}} {{readonlyinline}}</dt>
 <dd>コンストラクターの <code><var>options</var></code> 引数で指定された、通知の本文文字列です。</dd>
 <dt>{{domxref("Notification.data")}} {{readonlyinline}}</dt>
 <dd>通知のデータの構造化されたクローンを返します。</dd>
 <dt>{{domxref("Notification.dir")}} {{readonlyinline}}</dt>
 <dd>コンストラクターの <code><var>options</var></code> 引数で指定された、通知の書字方向です。</dd>
 <dt>{{domxref("Notification.lang")}} {{readonlyinline}}</dt>
 <dd>コンストラクターの <code><var>options</var></code> 引数で指定された、通知の言語コードです。</dd>
 <dt>{{domxref("Notification.tag")}} {{readonlyinline}}</dt>
 <dd>コンストラクターの <code><var>options</var></code> 引数で指定された、通知の ID です。</dd>
 <dt>{{domxref("Notification.icon")}} {{readonlyinline}}</dt>
 <dd>コンストラクターの <code><var>options</var></code> 引数で指定された、通知のアイコンの画像 URL です。</dd>
 <dt>{{domxref("Notification.image")}} {{readonlyinline}}</dt>
 <dd>コンストラクターの <code><var>options</var></code> 引数で指定された、通知の一部として表示される画像の URL です。</dd>
 <dt>{{domxref("Notification.renotify")}} {{readonlyinline}}</dt>
 <dd>古い通知が新しい通知に置き換えられた後、ユーザーに通知するかどうかを指定します。</dd>
 <dt>{{domxref("Notification.requireInteraction")}} {{readonlyinline}}</dt>
 <dd>{{jsxref("Boolean")}} で、ユーザーがクリックするか閉じるかするまで、通知が自動的に閉じずに残るべきであることを示します。</dd>
 <dt>{{domxref("Notification.silent")}} {{readonlyinline}}</dt>
 <dd>静かに通知をするかどうかを明示します。つまり、デバイスの設定に関係なく、通知の際に無音やバイブレーションさせない状態を設定できます。</dd>
 <dt>{{domxref("Notification.timestamp")}} {{readonlyinline}}</dt>
 <dd>通知が生成されたとき、または適用されるとき (過去、現在、未来) の時刻を示します。</dd>
 <dt>{{domxref("Notification.title")}} {{readonlyinline}}</dt>
 <dd>コンストラクターの第1引数で指定された通知のタイトルです。</dd>
 <dt>{{domxref("Notification.vibrate")}} {{readonlyinline}}</dt>
 <dd>バイブレーションハードウェアを持つ端末のためのバイブレーションパターンを指定します。</dd>
</dl>

<h4 id="Event_handlers" name="Event_handlers">イベントハンドラー</h4>

<dl>
 <dt>{{domxref("Notification.onclick")}}</dt>
 <dd>{{domxref("Element/click_event", "click")}} イベントのハンドラーです。ユーザーが通知をクリックするたびに起動されます。</dd>
 <dt>{{domxref("Notification.onclose")}}</dt>
 <dd>{{domxref("HTMLDialogElement/close_event", "close")}} イベントのハンドラーです。ユーザーが通知を閉じたときに起動されます。</dd>
 <dt>{{domxref("Notification.onerror")}}</dt>
 <dd>{{domxref("HTMLElement/error_event", "error")}} イベントのハンドラーです。通知がエラーに遭遇するたびに起動されます。</dd>
 <dt>{{domxref("Notification.onshow")}}</dt>
 <dd>{{domxref("Element/show_event", "show")}} イベントのハンドラーです。通知が表示されたときに起動されます。</dd>
</dl>

<h2 id="Methods" name="Methods">メソッド</h2>

<h3 id="Static_methods" name="Static_methods">静的メソッド</h3>

<p>これらのメソッドは <code>Notification</code> オブジェクト自体に対してのみ使用できます。</p>

<dl>
 <dt>{{domxref("Notification.requestPermission()")}}</dt>
 <dd>ユーザーに通知を表示する許可をリクエストします。</dd>
</dl>

<h3 id="Instance_methods" name="Instance_methods">インスタンスメソッド</h3>

<p>これらのメソッドは <code>Notification</code> オブジェクトのインスタンス、または<a href="/ja/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain"><code>prototype</code></a>からのみ使用できます。 <code>Notification</code> オブジェクトは {{domxref("EventTarget")}} インターフェイスも継承しています。</p>

<dl>
 <dt>{{domxref("Notification.close()")}}</dt>
 <dd>プログラムで通知を閉じます。</dd>
</dl>

<h2 id="Examples" name="Examples">例</h2>

<p>以下の基本的な HTML を想定してください。</p>

<pre class="brush: html notranslate">&lt;button onclick="notifyMe()"&gt;Notify me!&lt;/button&gt;</pre>

<p>以下のように通知を送信することが可能で — ここでは、通知に対応しているかどうかを最初にチェックしたい場合に使用できる、かなり冗長で完全なコードのセットを提示します。次に、通知を送信する前に、現在のオリジンに通知を送信するための許可が付与されているかどうかをチェックし、必要に応じて許可を要求します。</p>

<pre class="brush: js notranslate">function notifyMe() {
  // ブラウザーが通知に対応しているかどうかをチェックしましょう
  if (!("Notification" in window)) {
    alert("このブラウザーはデスクトップ通知に対応していません。");
  }

  // 通知の許可が既に得られているかどうかをチェックしましょう
  else if (Notification.permission === "granted") {
    // If it's okay let's create a notification
    var notification = new Notification("こんにちは！");
  }

  // そうでなければ、ユーザーに許可を求める必要があります
  else if (Notification.permission !== "denied") {
    Notification.requestPermission().then(function (permission) {
      // ユーザーが許可したら、通知を作成しましょう
      if (permission === "granted") {
        var notification = new Notification("こんにちは！");
      }
    });
  }

  // 最後に、ユーザーが通知を拒否していて、あなたが敬意を
  // 払いたい場合は、これ以上相手を煩わせることはありません。
}</pre>

<p>このページでライブ例を公開するのはやめました。 Chrome や Firefox が別オリジンの {{htmlelement("iframe")}} から要求された通知の許可をしないようになり、その他のブラウザーも従っているからです。動作する例を見る場合は、 <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do リストの例</a> (また、<a href="https://mdn.github.io/to-do-notifications/">ライブで動作するアプリ</a>) を参照してください。</p>

<div class="blockIndicator note">
<p><strong>注</strong>: 上記の例では、通知をユーザーの操作 (ボタンのクリック) から起動しました。ユーザーが同意していない通知でユーザーに迷惑をかけるべきではないので、これはベストプラクティスであるだけでなく、今後ブラウザーはユーザーの操作によって起動されたものではない通知の許可の要求を明示的に拒否するようになるでしょう。例えば、 Firefox はバージョン72からすでにこれを行っています。</p>
</div>

<h2 id="Specifications" name="Specifications">仕様書</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">仕様書</th>
   <th scope="col">状態</th>
   <th scope="col">備考</th>
  </tr>
  <tr>
   <td>{{SpecName('Web Notifications')}}</td>
   <td>{{Spec2('Web Notifications')}}</td>
   <td>Living standard</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>

<p>{{Compat("api.Notification")}}</p>

<h2 id="See_also" name="See_also">関連情報</h2>

<ul>
 <li><a href="/ja/docs/Web/API/Notifications_API/Using_the_Notifications_API">通知 API の使用</a></li>
</ul>