【PWA】OneSignalを使ってPush通知を送る。 #JavaScript

はじめに

今回はPWAのアプリにPush通知を送ってみようと思います。
Push通知のサービスはFirebaseとOneSignalで迷いましたが、Firebaseは開封数が記録されないという謎現象に陥ったのでOneSignalを採用しました。
PWAのベースは前回の記事をご確認ください。
https://qiita.com/mojapico/items/bb27b9ff1dd5e93b1e23

前準備

OneSignalにアカウント登録を行い、OneSignalSDKWorker.jsをダウンロードします。（登録の仕方は別の方の記事を確認してください。）
それと、「Add Code to Site」部分のコードをコピーしておいてください。

src

ファイル構成は↓です。
OneSignalSDKWorker.jsはOneSignalからダウンロードしてください。

先ほどコピーしておいたコードindex.htmlのheadに張り付けてください。

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <link rel="manifest" href="manifest.json"/>
    <script src="https://cdn.onesignal.com/sdks/OneSignalSDK.js" defer></script>
  <script>
    window.OneSignal = window.OneSignal || [];
    OneSignal.push(function() {
      OneSignal.init({
        appId: "×××××",
        safari_web_id: "×××××",
        notifyButton: {
          enable: true,
        },
      });
    });

  </script>
  </head>
  <body>

    <p>タスク管理アプリ</p>
    <button onclick="test()">ボタンクリック</button>

    <script>

      if ('serviceWorker' in navigator) {
        window.addEventListener('load', function() {
          navigator.serviceWorker.register('./sw.js').then(function(registration) {
          }, function(err) {
          });
        });
      }
    </script>

    <script>
      function test(){
        OneSignal.getUserId().then(function(userId) {
          console.log("OneSignal User ID:", userId);   
          });
        }
    </script>

  </body>
</html>

こちらはそのままで大丈夫です。

OneSignalSDKWorker.js

    importScripts('https://cdn.onesignal.com/sdks/OneSignalSDKWorker.js');

アプリ

起動後にデベロッパーツールで確認するとUserIDが取得できると思います。
UserIDを通知のAPIで指定してリクエストすると個人宛にPush通知が届きます。

通知のAPI

今回はPostmanを使ってリクエストを実行しました。
リクエストメソッド：POST
◆Header
Authorization:"Basic　×××××"　←OneSignalのRest API Keyです。
accept:application/json
Content-Type:application/json

◆body

include_player_idにはデベロッパーツールに表示されているUserIDを張り付けてください。
app_idはOneSignal App IDです。Rest API Keyと同様にOneSignalからそのままコピーしてください。

{
  "include_player_ids": [
    "×××××"
  ],
  "contents": {
    "en": "こんにちは"

  },
  "name": "はじめまして",
  "app_id":"×××××"

}

↓送った結果です。

おわりに

OneSignalだと管理ページからPush通知の開封率等を確認することができるので非常に便利だと思います。
他にもPush通知を受け取ったユーザーのOSも確認できたりと様々です。
個人的にFireBaseよりOneSignalのほうが使いやすい印象です。
ただし、OneSignalの管理ページやドキュメントは日本語に対応していないので、和訳サイトを使って解読する必要があります。