ホーム » Web API » JavaScript通知

JavaScript通知

概要：このチュートリアルでは、JavaScript通知APIを使用してユーザーにデスクトップ通知を表示する方法を学習します。

通知APIを使用すると、JavaScriptを使用してユーザーにデスクトップ通知を表示できます。

通知の許可

通知APIは悪用されやすいため、デフォルトで2つのセキュリティ機能が厳密に適用されます。

  • まず、ユーザーはオリジンごとに通知を受信することに明示的に同意する必要があります。
  • 次に、セキュアコンテキスト（HTTPS）で実行されるコードのみが通知を送信できます。

通知の許可をユーザーにリクエストすると、ユーザーは同意するか拒否するかを選択できます。

ユーザーが明示的に拒否した場合、ブラウザはその選択を記憶します。そして、あなたは再び許可をリクエストする二度目のチャンスはありません。

ユーザーが同意も拒否もしない場合、つまり無視した場合、通知の許可を再度リクエストできます。

通知の許可をリクエストするには、Notificationグローバルオブジェクトを使用します。このオブジェクトには、requestPermission()メソッドがあり、これはユーザーが許可ダイアログボックスでアクションを実行すると解決されるPromiseを返します。

let permission = await Notification.requestPermission();Code language: JavaScript (javascript)

許可は、次の文字列'granted'、'denied'、または'default'のいずれかになります。

  • 'granted' – ユーザーは通知の受信を受け入れます。
  • 'denied' – ユーザーは通知の受信を拒否します。
  • 'default' – ユーザーの選択は不明であり、ブラウザは値が'denied'であるかのように動作します。

通知の表示と非表示

通知を作成するには、Notificationコンストラクターを使用します。以下は、タイトル付きの単純な通知を作成する例です。

const greeting = new Notification('Hi, How are you?');Code language: JavaScript (javascript)

通知は、2番目のoptionsパラメーターで高度にカスタマイズできます。

たとえば、以下は、本文テキストとアイコン付きの通知を作成して表示します。

const greeting = new Notification('Hi, How are you?',{
  body: 'Have a good day',
  icon: './img/goodday.png'
});Code language: JavaScript (javascript)

通知を閉じるには、Notificationコンストラクターから返されたNotificationオブジェクトのclose()メソッドを呼び出します。

greeting.close();Code language: CSS (css)

一定時間後に通知を閉じるには、setTimeout()関数を使用します。たとえば、以下は、10秒後にgreeting通知を閉じる方法を示しています。

setTimeout(() => greenting.close(), 10*1000);Code language: JavaScript (javascript)

通知イベント

Notificationオブジェクトは、次のイベントを提供します。

  • show – 通知が表示されるときに発生します。
  • click – 通知がクリックされるときに発生します。
  • close – 通知が閉じられたか、close()メソッドによって閉じられたときに発生します。
  • error – エラーが発生し、通知の表示がブロックされたときに発生します。

これらのイベントを処理するには、NotificationオブジェクトのaddEventListener()メソッドを使用します。

次の例では、通知がクリックされたときにURL https://javascripttutorial.dokyumento.jp/に移動します。

// create a notification object
const greeting = new Notification('Hi, How are you?',{
  body: 'Have a good day',
  icon: './img/goodday.png'
});

// navigate to the https://javascripttutorial.dokyumento.jp/ on click
greeting.addEventListener('click', function(){
    window.open('https://javascripttutorial.dokyumento.jp/web-apis/javascript-notification/');
});Code language: JavaScript (javascript)

addEventListener()を使用する他に、Notificationオブジェクトのonclickプロパティにイベントハンドラーを割り当てることもできます。例えば

greeting.onclick = () => window.open('https://javascripttutorial.dokyumento.jp/web-apis/javascript-notification/');Code language: JavaScript (javascript)

Notificationオブジェクトには、対応するイベントのonshow、onclick、onclose、およびonerrorがあります。

JavaScript通知APIの例

この例では、ユーザーにデスクトップ通知を表示する簡単なWebアプリケーションを構築します。

プロジェクト構造の作成

まず、notificationという新しいフォルダーを作成し、notificationフォルダー内にjs、css、およびimgの3つのサブフォルダーを作成します。

次に、cssフォルダーにstyle.css、jsフォルダーにapp.js、notificationフォルダーにindex.htmlを作成します。

3番目に、次のアイコンをダウンロードしてimgフォルダーにコピーします。通知のアイコンとして使用します。

index.htmlページの作成

index.htmlページでは、style.cssおよびapp.jsファイルへのリンクを配置します。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Notification API</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="container">
        <h1>JavaScript Notification API Demo</h1>
        <div class="error"></div>
    </div>
    <script src="js/app.js"></script>
</body>
</html>Code language: HTML, XML (xml)

index.htmlには、見出し1と、通知の許可が付与されていない場合にエラーメッセージを表示する<div>要素があります。

app.jsファイルの作成

即時実行関数式Notification.requestPermission()メソッドの呼び出しにawaitキーワードを使用するため、app.jsのすべてのコードを非同期IIFEに配置する必要があります。

(async () => {
   // place js code here
})();Code language: JavaScript (javascript)

まず、通知を作成して表示し、10秒後に閉じ、クリックされた場合はURL（https://javascripttutorial.dokyumento.jp/web-apis/javascript-notification/）を開く関数を定義します。

// create and show the notification
const showNotification = () => {
    // create a new notification
    const notification = new Notification('JavaScript Notification API', {
        body: 'This is a JavaScript Notification API demo',
        icon: './img/js.png',
        vibrate: true
    });

    // close the notification after 10 seconds
    setTimeout(() => {
        notification.close();
    }, 10 * 1000);

    // navigate to a URL
    notification.addEventListener('click', () => {
        window.open('https://javascripttutorial.dokyumento.jp/web-apis/javascript-notification/', '_blank');
    });
}Code language: JavaScript (javascript)

次に、通知が許可されていない場合にエラーメッセージを表示する別の関数を定義します。

// show an error message
const showError = () => {
    const error = document.querySelector('.error');
    error.style.display = 'block';
    error.textContent = 'You blocked the notifications';
}Code language: JavaScript (javascript)

3番目に、通知の許可が付与されているかどうかを確認します。ユーザーが何のアクションも起こさなかった場合は、リクエストします。

通知の許可が付与されている場合、grantedフラグはtrueになります。それ以外の場合は、falseです。 grantedフラグの値に基づいて、showNotification()またはshowError()関数が呼び出されます。

let granted = false;

if (Notification.permission === 'granted') {
    granted = true;
} else if (Notification.permission !== 'denied') {
    let permission = await Notification.requestPermission();
    granted = permission === 'granted' ? true : false;
}

// show notification or the error message 
granted ? showNotification() : showError();Code language: JavaScript (javascript)

以下は、app.jsファイルの完全なコードです。

(async () => {
    // create and show the notification
    const showNotification = () => {
        // create a new notification
        const notification = new Notification('JavaScript Notification API', {
            body: 'This is a JavaScript Notification API demo',
            icon: './img/js.png'
        });

        // close the notification after 10 seconds
        setTimeout(() => {
            notification.close();
        }, 10 * 1000);

        // navigate to a URL when clicked
        notification.addEventListener('click', () => {

            window.open('https://javascripttutorial.dokyumento.jp/web-apis/javascript-notification/', '_blank');
        });
    }

    // show an error message
    const showError = () => {
        const error = document.querySelector('.error');
        error.style.display = 'block';
        error.textContent = 'You blocked the notifications';
    }

    // check notification permission
    let granted = false;

    if (Notification.permission === 'granted') {
        granted = true;
    } else if (Notification.permission !== 'denied') {
        let permission = await Notification.requestPermission();
        granted = permission === 'granted' ? true : false;
    }

    // show notification or error
    granted ? showNotification() : showError();

})();Code language: JavaScript (javascript)

こちらがデモページです。

ページを開くと、通知の許可がリクエストされます。

許可ボタンをクリックすると、デスクトップに次の通知が表示されます。

10秒で閉じます。通知をクリックすると、URL https://javascripttutorial.dokyumento.jp/web-apis/javascript-notification/が開きます。

まとめ

  • JavaScript Notification APIを使用すると、ユーザーにデスクトップ通知を表示できます。
  • 通知は、オリジンに基づいてユーザーによって明示的に許可される必要があり、セキュアコンテキスト（https）で実行されているコードによってのみトリガーされる必要があります。
  • 通知を作成して表示するには、Notificationコンストラクターを使用します。
  • 通知をよりインタラクティブにするには、Notificationイベントを使用します。
このチュートリアルは役に立ちましたか？
JavaScript Geolocation
前へ
JavaScriptジオロケーション
次へ
JavaScript History pushState
JavaScript History pushState