SP用メニューボタン
ソレゾレブログ

技術的な事だったり日常の気になる事だったり

PWA(Progressive web apps) とはいったいどんな機能なのか?サービスワーカー編②

スポンサーリンク

設定前にOSの通知設定を確認してください

単に私が躓いただけなのですが、検証環境にWindows10を使っている場合、Windows自体の通知設定をカスタマイズしてオフにしていると通知がポップアップしてきません。Windowsの [設定] – [システム] – [通知とアクション] で、「通知」設定がオンになっていること、[送信元ごとの通知の受信設定]でChromeの通知がオンになっていること、[送信元ごとの通知の受信設定]でChromをクリックすると個別設定画面が表示されますが、その通知設定が適切に設定されていないと、私のように通知がされなくて1日苦しむことになります。盲点でした。笑。事前に確認されることをお勧めします。

設定に入る前にOSの通知設定を確認してください1
設定に入る前にOSの通知設定を確認してください2

尚、Windowsのプッシュ通知は画面右下のポップアップとアクションセンターに表示されます。

設定に入る前にOSの通知設定を確認してください3
設定に入る前にOSの通知設定を確認してください4

Notifications APIによるプッシュ通知

プッシュ通知には、Notifications APIとPush APIを利用する方法があります。

Notifications APIでは、サーバーからメッセージを送信してユーザーに通知することが出来ます。通知にあたっては、ユーザー側でブラウザ(サービスワーカー)が起動していないと通知を受け取ることはできません。

対してPush APIは、ブラウザ(サービスワーカー)が起動していなくてもメッセージの受信が可能となっています。

Notifications APIとPush APIの詳細については、下記を参照してください。

まずは簡単なNotifications APIから設定とその検証結果を記載していきます。pushイベント + Notifications APIを使った方法と、messageイベント + Notifications API を使った二つの設定例をご紹介します。

スポンサーリンク

プッシュ通知のユーザー許可

プッシュ通知をユーザーが受信するには、まずはユーザー側の許可が必要です。ユーザー側の許可設定値は「granted(許可)」「denied(拒否)」「default(初期値)」の3つがあり、初期値は通知の許可申請を受け入れる状態です。通知サーバーは、NotificationオブジェクトのrequestPermissionメソッドで許可を申請することが出来ます。このスクリプトは、サービスワーカーJavascriptファイル(sw.js)ではなく、通常のJavascriptファイルに記載します。下記がそのコードです。

Notification.requestPermission().then(function(result) {
    console.log(result);
});

2行目のconsole.logは、通知の許可設定が問題なくされたか確認するために設定値をコンソールに出力しているだけです。必須ではありません。

設定後ブラウザを再読み込みすると、下記の許可要求ボックスがポップアップしてきます。ここで「許可」を選択することで、ユーザーが通知の許可をします。この設定はブラウザの設定情報に記録されます。

メッセージ通知のユーザー許可1

尚、設定した通知の許可を検証などで初期値(default)に戻したい場合は、URL入力欄左端の錠マークを右クリックし、[通知] をオフにするか、[権限のリセット] をクリックしてください。他にカスタマイズした権限があった場合は、それも含めてリセットされてしまうので、複数の権限が表示された場合は[通知] をオフにすることで、通知の許可設定を初期値(default)に戻してください。ブラウザによって方法が微妙に異なりますが、ほぼ同じです。

メッセージ通知のユーザー許可2

尚、私が検証しているChromeバージョン94では、通知の許可をリセットして再アクセスすると、通知の許可設定のポップアップがブロックされてしまいます。これは、初回アクセス時にChromeの [設定] – [プライバシーとセキュリティ] – [サイトの設定] – [すべてのサイトに保存されている権限とデータを表示] – [対象サイト] – [ポップアップとリダイレクト] の設定が「ブロック」に設定されてしまう為です。機能上の差異は無いので気にしなくても良いです。

メッセージ通知のユーザー許可3
メッセージ通知のユーザー許可4
メッセージ通知のユーザー許可5

これで、メッセージの通知がユーザーによって許可されたので、次にメッセージの送信設定を行っていきます。メッセージの送信は、プッシュサーバーから送信する方法と、Webサイト内の特定のイベントをトリガーに送信する方法2例を記載します。

スポンサーリンク

Notifications APIによる通知例① ~ プッシュサーバーから通知を受け取る方法

pushイベント

プッシュサーバーから通知を受け取る方法は、サービスワーカー(ServiceWorkerGlobalScope)のpushイベントを利用します。pushとは、サーバー側からクライアント側に情報を送ることを言います。サービスワーカー(ServiceWorkerGlobalScope)のpushイベントは、プッシュ通知をトリガーにブラウザにメッセージを表示するなどの任意のスクリプトを実行することが出来ます。

pushイベントと通知の設定

プッシュサーバーからメッセージを送信するには、Google FirebaseのCloud Messaging機能か、Voluntary Application Server Identification for Web Push (VAPID)を使ってプッシュする方法が一般的ですが、これらは構築の敷居が非常に高いため、ここでは、Chromeの開発者モードに備わっているメッセージの通知テスト機能を利用して検証していきます。

プッシュサーバーからの通知を受け取るにはpushイベントをリッスンし、通知をポップアップさせる設定をします。下記コードを「sw.js」に追記します。

self.addEventListener('push', (event) => {
  event.waitUntil(
    self.registration.showNotification('通知テスト', {
      body: 'これは通知のテストです',
      icon: '/img/icon_192x192.png',
      actions: [
        {action: 'action1', title: 'アクション1', icon: '/img/notificon1.png'},
        {action: 'action2', title: 'アクション2', icon: '/img/notificon2.png'}
      ]
    })
  );
});

1行目は、pushイベントをリッスンしています。

2行目は、pushイベントが進行中または完了したか監視するものです。pushイベントが進行中の間サービスワーカーは終了されません。

3行目のself.registration.showNotificationメソッドは、通知を作成します。第一引数に、通知のタイトルを設定します。

notificationclickイベント

プッシュ通知によって開いたポップアップボックスの中のアクションボタンをクリックすると、サービスワーカーのnotificationclickイベントが発生します。notificationclickイベントをリッスンすることで、アクションボタンに任意の動作を設定できます。設定例では、アクションボタンを押すとyahooやgoogleのページが新しいウィンドウで開き、通知ボックスが閉じるように設定します。 下記コードを「sw.js」に追記します。

self.addEventListener('notificationclick', function(event) {
  console.log('On notification click: ', event);
  event.notification.close();
  if (event.action === 'action1') {
    clients.openWindow("https://www.google.com/");
  } else if (event.action === 'action2') {
    clients.openWindow("https://www.yahoo.co.jp/");
  }
});

1行目は、サービスワーカーのnotificationclickイベントをリッスンしています。eventにはNotificationEventが格納されます。NotificationEventには、アクションに関する情報が格納されています。

2行目は、notificationclickイベントが発生したことがわかるようにコンソールにメッセージを表示させています。

3行目は、通知ボックスを閉じています。

4行目と6行目で、どのアクションボックスをクリックしたか、アクション名で判定しています。アクション名は、NotificationEventのactionプロパティに格納されています。

5行目と7行目は、アクションを記載します。ここでは、「action1」をクリックしたらgoogleを新しいウィンドウで開き、「action2」をクリックしたらyahooが新しいウィンドウで開くように設定しています。

動作確認

設定が完了したらサイトを開き直します。開発者モードから [アプリケーション] – [Service Workers] を開き、[プッシュ]をクリックします。

Notifications API pushイベント動作確認1

下記のような通知が画面右下に表示されます。

Notifications API pushイベント動作確認2

「アクション1」を押すとgoogle、「アクション2」をクリックするとyahooが開き、上記通知ボックスが閉じれば成功です。

スポンサーリンク

Notifications APIによる通知例② ~ ブラウザからの通知を受け取る方法

messageイベント

サービスワーカー(ServiceWorkerGlobalScope)のmessageイベントは、postMessageメソッドなどで送信されたメッセージを受信したときに、任意のスクリプトを実行することが出来ます。

button要素の配置

まずは、ページ内にbutton要素を配置していきます。

<button id="send">SEND</button>

postMessageによるメッセージ送信設定

メインのJavascriptファイルに下記コードを記載します。

document.getElementById('send').addEventListener('click', () => {
  if (Notification.permission === 'granted') {
    navigator.serviceWorker.ready.then(registration => {
      registration.active.postMessage('これはpostMessageの通知テストです');
    });
  }
});

1行目は、「send」というidを持った要素のclickイベントをリッスンしています。

2行目は、ユーザーの通知許可が「granted」になっているか確認しています。

3行目は、現在のブラウザでサービスワーカーが有効になっているか確認しています。

4行目は、postMessageメソッドでメッセージを送信しています。

messageイベントによる通知の受信設定

サービスワーカーのJavascriptファイル「sw.js」に下記コードを記載します。

self.addEventListener('message', function (event) {
  self.registration.showNotification(event.data);
});

1行目は、messageイベントをリッスンしています。

2行目は、受信した通知を表示させています。

スポンサーリンク

動作確認

ページを開きなおしてbutton要素をクリックします。

下記のように通知が表示されれば成功です。

Notifications API messageイベント動作確認