javaScript One Signal Push7 Push通知 PWA Service Worker

OneSignalでWEBサイトにPush通知を実装するサンプル（SDK編）

先日Push7のAPIを試したばかりですが、5000送信の上限とユーザーの現状はグループ別け・送信振り分けが出来ない難点から、他も調べたところOne Signalが良さそうだったのでお試し導入してみます



One Signal
https://onesignal.com/

コントロールパネルのドキュメント
https://documentation.onesignal.com/docs/dashboard

WEB Push SDKのドキュメント
https://documentation.onesignal.com/docs/web-push-sdk

APIのドキュメント
https://documentation.onesignal.com/reference#create-notification

これほど丁寧なドキュメントには滅多に出会えないだろうってくらい、
OneSignalのドキュメントは素晴らしい！
APIコードなんて各言語の基本部分の完成形が記載されていて、素直に嬉しいです

アカウント作成

ログインはメールアドレスもしくはFB、Github、Googleアカウントで可能

アプリケーション作成

Add a new app
アプリケーション名

Select one platform


プッシュ通知アプリケーションを導入するプラットフォームの選択
iPhoneアプリならならAplle IOS、WEBならWebsite Pussh

Configure Platform
※Website Pusshを選択した場合
Site URL:ウェブサイトのURL
Default Notification Icon URL:アイコンのURL
My site is not fully HTTPS:非HTTPならチェック

 ※プラットフォーム設定は選択したものが初期状態でアクティブに設定されるだけで、ダッシュボード「App Settings」から全て追加設定が可能

Select SDK　Install SDK
SDKの種類の選択、Website Pussh、WordPress

 ※ApiIDを取得するだけで同一アプリケーションで動くのか、アプリケーションを作成時に別にしなければいけないのかは不明
ApiIDが表示され（いつでも見れる）「Done」完了なのだが、ユーザーを確認して1人以上いないとこの部分は完了出来ない
アプリケーションは作成されダッシュボードは使えます
ApiIDとSOKを使ってテスト実装、自分で登録してから完了することになるかと

SDKセットアップ（Webプッシュ）

WEB Push セットアップのドキュメントに沿って必要なファイルを設置
ドキュメントから必要なファイルをダウンロードします
manifest.json
OneSignalSDKWorker.js
OneSignalSDKUpdaterWorker.js

ファイルパスを指定すれば好きな場所にアップロードしても使えますが、ほかのservice worker.js（sw.js）と互換性があるようですのでひとまずはルートトップに配置しても問題なさそうです

push通知を実装するhtml
<head>
  <link rel="manifest" href="/manifest.json">
  <script src="https://cdn.onesignal.com/sdks/OneSignalSDK.js" async></script>
  <script>
    var OneSignal = window.OneSignal || [];
    OneSignal.push(["init", {
      appId: "YOUR_APP_ID",//API ID
      autoRegister: false,//ブラウザの通知許可を自動表示設定

      notifyButton: {
        enable: true //通知ボタンの有効設定
      }

    }]);
  </script>
</head>
ドキュメントのままです
API_IDを変更するだけで動きます

OneSignalSDKWorker.jsがルートディレクトリとは別の場所に置いた場合はpathで場所を指定します
...
appId: "xxx",
path:"URL",
...


Push通知SDK設定パラメータ

ほかパラメータも同様に追記していけます

記述のベースサンプル
<head>
  <link rel="manifest" href="/manifest.json">
  <script src="https://cdn.onesignal.com/sdks/OneSignalSDK.js" async></script>
  <script>
    var OneSignal = window.OneSignal || [];
    OneSignal.push(["init", {
      appId: "YOUR_APP_ID",//API ID
      autoRegister: false,//ブラウザの通知許可を自動表示設定

      notifyButton: {
        enable: true //通知ボタンの有効設定
      },

      promptOptions:{
      showCredit;true
      },

      welcomeNotification: {
        disable: false;
　　　　title:;"ウェルカム",
　　　　message:"ようこそ"
      },
　　　
　　　notifyButton:{
      ....
      ....
      }


    }]);
  </script>
</head>

OneSignal.push([int])

プッシュ通知のデフォルト設定を指定できます
優先度はpush([int])＞ダッシュボードでの設定

promptOptionsパラメータ
初期化時に基本パラメータを指定するようです、未記入自はデフォルトが反映

welcomeNotificationパラメータ
ウェルカムメッセージの有無やタイトル、本文を編集します

notifyButtonパラメータ
Subscription Bellの挙動などを編集します
Subscription Bell

OneSignal.push()

様々な処理や情報を実行・取得できます

OneSignal.getUserId()
ユーザーIDの取得
OneSignal.push(function() {
  /* These examples are all valid */
  OneSignal.getUserId(function(userId) {
    console.log("OneSignal User ID:", userId); 
  });
               
  OneSignal.getUserId().then(function(userId) {
    console.log("OneSignal User ID:", userId);   
  });
});

OneSignal.registerForPushNotifications()
登録ボタンの表示

OneSignal.getNotificationPermission()
ブラウザの通知パーミッションの取得

OneSignal.isPushNotificationsSupported()
ブラウザがWEB pushに対応しているか取得

OneSignal.isPushNotificationsEnabled()
プッシュ通知が正常に通ったユーザーかどうか取得できる？

subscribed()
登録しているユーザーかどうかで分岐



などなどドキュメントみた方が早いですね

APIを使ったコンテンツでユーザーの設定などで送信を分ける場合に必要なのが「ユーザーID」かな思います
（キャッシュに設定でAPIでの送信時にタグやフラグパラメータを利用すればそれも普通に可能そうですが）

続けてAPIを使った送信についても記事にしておきたいと思います


0 件のコメント :

コメントを投稿