Notifications API スタートガイド

この Codelab では、Notifications API の基本機能を使用して以下を行います。

  • 通知を送信する権限をリクエストする
  • 通知を送信する
  • 通知オプションを試す

対応ブラウザ

  • 20
  • 14
  • 22
  • 7

ソース

サンプルアプリをリミックスして新しいタブで表示する

埋め込みの Glitch アプリからの通知は自動的にブロックされるため、このページでアプリをプレビューすることはできません。代わりに、次の手順に沿って対応します。

  1. [Remix to Edit] をクリックしてプロジェクトを編集可能にします。
  2. サイトをプレビューするには、[アプリを表示] を押してから、全画面表示 全画面表示 を押します。

新しい Chrome タブで Glitch が開きます。

リミックスされたライブアプリを新しいタブで表示しているスクリーンショット

この Codelab では、このページの埋め込みの Glitch のコードに変更を加えます。公開中のアプリで新しいタブを更新して、変更を確認します。

開始用アプリとそのコードについて理解を深める

まず、新しい Chrome タブで公開中のアプリをご確認ください。

  1. Ctrl+Shift+J キー（Mac の場合は Command+Option+J キー）を押して DevTools を開きます。 [コンソール] タブをクリックします。

    コンソールに次のメッセージが表示されます。

    Notification permission is default

    よくわからない場合でも、心配はいりません。すべてまもなく明らかになります！

  2. ライブアプリで、[通知を送信する権限をリクエストする] と [通知を送信する] のボタンをクリックします。

    コンソールには、requestPermission と sendNotification の 2 つの関数スタブから「TODO」メッセージが表示されます。これらの関数を、この Codelab で実装します。

次に、このページに埋め込まれた Glitch に含まれているサンプルアプリのコードを見てみましょう。 public/index.js を開き、既存のコードの重要な部分を確認します。

  • showPermission 関数は Notifications API を使用してサイトの現在の権限状態を取得し、コンソールにログを記録します。

    // Print current permission state to console;
// update onscreen message.
function showPermission() {
  let permission = Notification.permission;
  console.log('Notification permission is ' + permission);
  let p = document.getElementById('permission');
  p.textContent = 'Notification permission is ' + permission;
}

    権限をリクエストする前の権限の状態は default です。default 権限の状態では、サイトで通知を送信するには、権限をリクエストして権限を付与してもらう必要があります。

  • requestPermission 関数はスタブです。

    // Use the Notification API to request permission to send notifications.
function requestPermission() {
  console.log('TODO: Implement requestPermission()');
}

    この関数は次のステップで実装します。

  • sendNotification 関数はスタブです。

    // Use the Notification constructor to create and send a new Notification.
function sendNotification() {
  console.log('TODO: Implement sendNotification()');
}

    この関数は、requestPermission を実装した後に実装します。

  • window.onload イベント リスナーは、ページの読み込み時に showPermission 関数を呼び出し、コンソールとページに現在の権限の状態を表示します。

    window.onload = () => { showPermission(); };

通知を送信する権限をリクエストする

このステップでは、通知を送信するユーザーの許可をリクエストする機能を追加します。

Notification.requestPermission() メソッドを使用して、サイトからの通知を許可またはブロックするようにユーザーに求めるポップアップをトリガーします。

  1. public/index.js の requestPermission 関数スタブを次のコードに置き換えます。

    // Use the Notification API to request permission to send notifications.
function requestPermission() {
  Notification.requestPermission()
    .then((permission) => {
      console.log('Promise resolved: ' + permission);
      showPermission();
    })
    .catch((error) => {
      console.log('Promise was rejected');
      console.log(error);
    });
}

  2. 公開中のアプリを表示している Chrome のタブを再読み込みします。

  3. 実際のアプリのインターフェースで、[通知を送信する権限をリクエストする] をクリックします。ポップアップが表示されます。

ユーザーは、権限のポップアップに対して 3 つの応答のいずれかを行います。

ユーザーの返答 通知権限の状態
ユーザーが [許可] を選択する granted
[ブロック] を選択する denied
ユーザーが選択せずにポップアップを閉じた default

ユーザーが [許可] をクリックした場合:

  • Notification.permission が granted に設定されている。

  • サイトで通知を表示できるようになります。

  • その後の Notification.requestPermission の呼び出しは、ポップアップを表示せずに granted に解決されます。

ユーザーが [ブロック] をクリックした場合:

  • Notification.permission が denied に設定されている。

  • サイトでは、ユーザーには通知を表示できなくなります。

  • その後の Notification.requestPermission の呼び出しは、ポップアップを表示せずに denied に解決されます。

ユーザーがポップアップを閉じた場合:

  • Notification.permission は default のままです。

  • サイトでは、ユーザーに対して通知を表示できなくなります。

  • その後 Notification.requestPermission を呼び出すと、さらにポップアップが生成されます。

    しかし、ユーザーがポップアップを閉じ続けると、ブラウザがサイトをブロックして、Notification.permission を denied に設定する可能性があります。権限リクエストのポップアップや通知はユーザーに表示されません。

    執筆時点では、閉じた通知権限のポップアップに対するブラウザの動作は今後変更される可能性があります。最善の対処法は、ユーザーが開始したなんらかの操作に対して常に通知権限をリクエストすることで、ユーザーがそれを予期し、何が起こっているのかを把握できるようにすることです。

通知を送信する

このステップでは、ユーザーに通知を送信します。

Notification コンストラクタを使用して新しい通知を作成し、それの表示を試みます。権限の状態が granted の場合は、通知が表示されます。

  1. index.js の sendNotification 関数スタブを次のコードに置き換えます。

    // Use the Notification constructor to create and send a new Notification.
function sendNotification() {
  let title = 'Test';
  let options = {
    body: 'Test body',
    // Other options can go here
  };
  console.log('Creating new notification');
  let notification = new Notification(title, options);
}

    Notification コンストラクタは、title と options の 2 つのパラメータを取ります。options は、視覚的設定と通知に含めることができるデータを表すプロパティを持つオブジェクトです。詳細については、通知パラメータに関する MDN ドキュメントをご覧ください。

  2. 公開中のアプリを表示している Chrome のタブを更新し、[通知を送信] ボタンをクリックします。 Test body というテキストが付いた通知が表示されます。

許可なく通知を送信するとどうなりますか？

このステップでは、ユーザーの許可を得ずに通知を表示しようとしたときにどうなるかを確認できる数行のコードを追加します。

  • public/index.js の sendNotification 関数の最後に、新しい通知の onerror イベント ハンドラを定義します。
// Use the Notification constructor to create and send a new Notification.
function sendNotification() {
  let title = 'Test';
  let options = {
    body: 'Test body',
    // Other options can go here
  };
  console.log('Creating new notification');
  let notification = new Notification(title, options);
  notification.onerror = (event) => {
    console.log('Could not send notification');
    console.log(event);
  };
}

通知権限エラーを確認するには:

  1. Chrome の URL バーの横にある鍵アイコンをクリックして、サイトの通知権限の設定をデフォルトにリセットします。

  2. [通知を送信する権限をリクエストする] をクリックし、今度はポップアップで [ブロック] を選択します。

  3. [通知を送信] をクリックして、どうなるかを確認します。 エラーテキスト（Could not send notification）とイベント オブジェクトがコンソールに記録されます。

必要に応じて、サイトの通知権限をリセットします。 何度か権限をリクエストしてポップアップを閉じてみて、どうなるかを確認してください。

通知オプションを試す

ここまで、権限をリクエストする方法と通知を送信する基本的な方法を学びました。また、ユーザーの応答がアプリの通知表示機能に及ぼす影響についても確認しました。

通知を作成する際に使用できるさまざまな視覚的オプションとデータ オプションを試してみることができます。 利用可能なすべてのオプションは次のとおりです。 （これらのオプションの詳細については、MDN の通知に関するドキュメントをご覧ください）。

これらのオプションの実装はブラウザとデバイスによって異なるため、さまざまなプラットフォームで通知をテストして、どのように表示されるかを確認することをおすすめします。

let options = {
  dir: 'auto',              // Text direction
  lang: 'en-US',            // A language tag
  badge: '/orange-cat.png', // Display when insufficient room
  body: 'Hello World',      // Body text
  tag: 'mytag',             // Tag for categorization
  icon: '/line-cat.png',    // To display in the notification
  image: '/orange-cat.png', // To display in the notification
  data: {                   // Arbitrary data; any data type
    cheese: 'I like cheese',
    pizza: 'Excellent cheese delivery mechanism',
    arbitrary: {
      faveNumber: 42,
      myBool: true
    }},
  vibrate: [200, 100, 200], // Vibration pattern for hardware
  renotify: false,          // Notify if replaced? Default false
  requireInteraction: false,// Active until click? Default false
  /*
    actions:   // Array of NotificationActions
               // Only usable with a service worker
    [{
      action: 'shop',
      title: 'Shop!',
      icon: '/bags.png'
    },],
  */
}

その他のアイデアについては、Peter Beverloo さんの通知生成ツールをご覧ください。

行き詰まった場合は、この Codelab の完成したコード glitch.com/edit/#!/codelab-notifications-get-started-completed をご覧ください。

このシリーズの次の Codelab「Service Worker で通知を処理する」で詳細をご覧ください。