Notifications API スタートガイド

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

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

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

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

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

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

この 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 で通知を処理する」で、さらに詳しく学びましょう。