[OneSignalで実現する]WebPush通知配信承認システムをListsとPower Automateとカスタムコネクタで作成してみた

夏休みの課題が、諸事情で遅れてしまいましたが、ようやく形に出来たので、ブログにまとめました。

昨年ぐらいから海外のサイトを閲覧していると、ブラウザへのWebPush通知を確認するダイアログがよく表示されだしたので、個人情報を収集せず、ライトな顧客へのアプローチが可能なサービスとして目をつけていたので、ブラウザの対応状況とか有用なソリューションが無いか調べて、実装までやってみようというのが夏休みの目標でした。

どうやってブラウザでPush通知を受け取ってるの？

そもそもブラウザでPush通知をどうやって受けとっているのか不思議でした。
モバイルみたいに常にプロセスが起動している訳でもないので、何らかの監視するバックグラウンドのプロセス制御が必要なると予想はしていましたが、PWAで利用される「Service Worker」で実現しているんですねー！

[HTMLページ側でPush通知の登録を行って]→[サーバー側から配信したメッセージ内容をService WorkerがPush通知を受信する]という形になっています。

Push APIについて詳しく知りたい方はW3C-Push APIのシーケンスダイアグラムを参照してください。

OneSignalについて

各ブラウザ会社が用意しているPush通知のAPIへ直接データを送れるものかと考えていましたが、前述の通り送信内容の暗号化やプロセスとしての常駐など、Javascriptで作られたService Workerが必要なので、統合的なPush通知サービスOneSignalというサービスが、APIにも対応しておりましたので、今回はこちらのサービスで作成することにしました。

OneSignalが対応するサービスとしましては、

• モバイルPush
• WebPush
• SMS
• Email
• アプリ内のメッセージ表示

など幅広く通知を一つのサービスでサポートしています。
モバイルはモバイルのみ、ブラウザはブラウザのみとサービスが別れていることが多く、１社で幅広くサポートしているのが魅力です。

管理画面から、ブラウザPushの設定を行うだけで、Service Workerファイルも作成してくれますし、配信全般の送信・結果・分析まで行えます。（ホントに素晴らしいサービスです！）

今回作成した配信承認システム概要

想定したシチュエーションとしては、広報担当者がWebPush通知を使って、社外へ情報発信をするのに、配信内容を上司へ承認を行い、許可が出れば自動的に配信され、却下されればTeamsで通知される流れとなっております。

作ってみましょう！

1. OneSignalのサイトで、WebPushの設定をおこないます。

全部説明すると、長くなってしまうので、ここではOneSignalのサイトの設定方法は割愛します。とてもわかり易く説明されているドキュメントを参考にして設定してください。
WebPushクイックスタート

作業としては、OneSignalのサイトで、WebPushサービスを設定して、設置したいウェブサイトにJavascriptのファイルを設置する非常に簡単な作業です。

2. カスタムコネクタの作成

まずは、OneSignalのAPIへ接続するために、カスタムコネクタを作成します。
OneSignalのAPI仕様書については、リンク先のページを参照してください。

今回はPush通知を送信する機能を利用したいので、「Create notification」をカスタムコネクタで設定します。

[参考]いきなり複雑なカスタムコネクタを作成するのは難しいので、Postmanを利用して確認しながら作成するのをオススメします。Postman上で完成したら、設定ファイルをカスタムコネクタへ取り込めますので、ぜひ活用してください。

新規に「一から作成」を選んでコネクタ名を設定してください。私は[OneSignal]としました。

[全般]タブの内容

[セキュリティ]タブの内容

[定義]タブの内容
「新しいアクション」を「SendPush」として追加して、要求の「サンプルからのインポート」に

動詞：POST
URL：https://onesignal.com/api/v1/notifications
ヘッダー：Content-Type
本文：

{
    "app_id": "OneSignalで登録したapp_idをここに記入",
    "include_player_ids": [
"送信先を限定する場合には、ここにデバイス登録されたIDを入力"
    ],
    "data": {
        "url": "リンクする先のURLを記載"
    },
    "contents": {
        "en": "本文メッセージ"
    },
    "headings": {
        "en": "タイトル"
    }
}

ヘッダーの「Content-Type」を「編集」を選び

既定値に「 application/json; charset=utf-8」を記入して戻ります。

ここまで入力が終わったら「コネクタの更新」でコネクタを保存してください。

[テスト]タブの内容
最後に「テスト」で送信できるのかテストします。
新しい接続を選んで、APIキーをOneSignalのページで発行し作成してください。

※OneSignalのREST API Keysは、ここから見れます。

REST API Keysをコピペしましょう。

[テスト]タブの内容

app_id
OneSignalで登録したapp_idをここに記入してください。

include_player_ids
送信先を限定する場合には、ここにデバイス登録されたIDを入力します。

url
Push通知の内容へリンクするURLを入力します。

contents
本文のメッセージ

headings
タイトル

Listsの設定

タイトル、本文、URLの列を作成します。

Power Automateの設定

SharePointコネクタの「項目が作成されたとき」をキッカケにして、シンプルに１回の承認を行います。
承認の可否にて、条件分岐をして、「はい」であれば、カスタムコネクターからPush通知の内容をOneSignalのAPIへ送信します。
「いいえ」の場合には、Push配信を申請した担当者へTeamsで、拒否された内容を送信します。

デスクトップにこの様に通知が届けば完成です！

まとめ

今回は、WebPush配信からヒントを得て、広報担当者が社内から承認を得た上で配信するまでをシステムにしてみました。

メールマガジンのような個人情報を必要とせず、顧客へのつながりを作るWebPush配信は、有用な情報であれば、かなりのエンゲージメントが期待できますが、人気サイト以外では9割が拒否反応というデータもありますので、適切なターゲットを絞り、配信量なども配慮が必要になってくると思います。

ぜひご興味のある方は試して見てください。