Notifications API スタートガイド

この Codelab では、 Notifications API で以下を行います。

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

対応ブラウザ

  • Chrome: 20。 <ph type="x-smartling-placeholder">
  • Edge: 14。 <ph type="x-smartling-placeholder">
  • Firefox: 22。 <ph type="x-smartling-placeholder">
  • Safari: 7. <ph type="x-smartling-placeholder">

ソース

埋め込み 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. ライブアプリで、[Request permission to send notifications] ボタンと [Send a notification] ボタンをクリックします。

    コンソールに「TODO」と出力されるrequestPermissionsendNotification という 2 つの関数スタブからのメッセージが表示されます。これらは、この 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. 実際のアプリのインターフェースで、[Request permission to send notifications] をクリックします。ポップアップが表示されます。

ユーザーは権限のポップアップに対して、次の 3 つの対応のいずれかを行うことができます。

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

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

  • Notification.permissiongranted に設定されている。

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

  • その後の Notification.requestPermission の呼び出しは、ポップアップなしで granted に解決されます。

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

  • Notification.permissiondenied に設定されている。

  • サイトはユーザーに通知を表示できません

  • その後の Notification.requestPermission の呼び出しは、ポップアップなしで denied に解決されます。

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

  • Notification.permissiondefault のままです。

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

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

    ただし、ユーザーがポップアップを閉じ続けると、ブラウザがサイトをブロックし、Notification.permissiondenied に設定されます。その場合、権限リクエストのポップアップや通知のいずれもユーザーに表示されません。

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

で確認できます。

通知を送信する

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

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 コンストラクタは、titleoptions の 2 つのパラメータを取ります。options は、通知に含めることができるビジュアル設定とデータを表すプロパティを持つオブジェクトです。詳細については、通知パラメータに関する MDN のドキュメントをご覧ください。

  2. ライブアプリが表示されている Chrome タブを更新する [通知を送信] ボタンをクリックします。 Test body というテキストを含む通知が表示されます。

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

このステップでは、数行のコードを追加して、処理の結果を確認します。 ユーザーの許可なく通知を表示しようとした場合。

  • public/index.jssendNotification 関数の最後に、 新しい通知の 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 で通知を処理する」に進み、詳細をご確認ください。