この Codelab では、 Notifications API で以下を行います。
- 通知を送信する権限をリクエストする
- 通知を送信する
- 通知オプションを試す
対応ブラウザ
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
サンプルアプリをリミックスして新しいタブで表示
埋め込み Glitch アプリからの通知は自動的にブロックされるため、このページではアプリをプレビューできません。代わりに、次のようにします。
- [Remix to Edit] をクリックして、プロジェクトを編集可能にします。
- サイトをプレビューするには、[アプリを表示] を押します。[ 全画面表示 。
Glitch が新しい Chrome タブで開きます。
この Codelab を進めながら、このページに埋め込まれた Glitch のコードを変更します。ライブアプリで新しいタブを更新して、変更を確認します。
開始時のアプリとそのコードについて理解する
まず、新しい Chrome タブで公開中のアプリを確認します。
Ctrl+Shift+J キー(Mac の場合は Command+Option+J キー)を押して DevTools を開きます。 [コンソール] タブをクリックします。
コンソールに次のメッセージが表示されます。
Notification permission is default
その意味がわからなくても心配はいりません。全てまもなく明らかに
ライブアプリで、[Request permission to send notifications] ボタンと [Send a notification] ボタンをクリックします。
コンソールに「TODO」と出力される
requestPermission
とsendNotification
という 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()
メソッドを使用して、サイトからの通知を許可またはブロックするようユーザーに求めるポップアップをトリガーします。
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); }); }
ライブアプリが表示されている Chrome タブを再読み込みします。
実際のアプリのインターフェースで、[Request permission to send notifications] をクリックします。ポップアップが表示されます。
ユーザーは権限のポップアップに対して、次の 3 つの対応のいずれかを行うことができます。
お客様の回答 | 通知権限の状態 |
---|---|
ユーザーが [許可] を選択する | granted |
ユーザーが [ブロック] を選択 | denied |
ユーザーが選択せずにポップアップを閉じた | default |
ユーザーが [Allow] をクリックした場合:
Notification.permission
がgranted
に設定されている。サイトは通知を表示できるようになります。
その後の
Notification.requestPermission
の呼び出しは、ポップアップなしでgranted
に解決されます。
ユーザーが [ブロック] をクリックした場合:
Notification.permission
がdenied
に設定されている。サイトはユーザーに通知を表示できません。
その後の
Notification.requestPermission
の呼び出しは、ポップアップなしでdenied
に解決されます。
ユーザーがポップアップを閉じた場合:
Notification.permission
はdefault
のままです。サイトはユーザーに通知を表示できなくなります。
その後の
Notification.requestPermission
の呼び出しでは、さらにポップアップが生成されます。ただし、ユーザーがポップアップを閉じ続けると、ブラウザがサイトをブロックし、
Notification.permission
がdenied
に設定されます。その場合、権限リクエストのポップアップや通知のいずれもユーザーに表示されません。現時点では、通知権限のポップアップが閉じられた際のブラウザの動作は変更される可能性があります。これに対処する最善の方法は、ユーザーが開始した操作に応じて必ず通知権限をリクエストすることで、ユーザーがそれを予期し、何が起こっているかを把握できるようにすることです。
通知を送信する
このステップでは、ユーザーに通知を送信します。
Notification
コンストラクタを使用して新しい通知を作成し、その通知を表示してみます。
権限のステータスが granted
の場合は、通知が表示されます。
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 のドキュメントをご覧ください。ライブアプリが表示されている 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);
};
}
通知権限エラーを確認するには:
Chrome の URL バーの横にある鍵アイコンをクリックして、サイトの通知許可設定をデフォルトにリセットします。
[通知を送信する権限をリクエスト] をクリックし、今度はポップアップから [ブロック] を選択します。
[通知を送信] をクリックして、どうなるかを確認します。 エラーテキスト(
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 で通知を処理する」に進み、詳細をご確認ください。