OneSignal を使って、Webプッシュ配信を行う

Ionic アプリで、OneSignal を使ってWebプッシュ配信を行う手順です。

1. OneSignal とは
2. 実行環境
3. セットアップ手順
4. Apple Safari の場合

OneSignal とは

無料で始められるプッシュ配信サービスです。

https://onesignal.com/

無料プランでは以下の制限がありますが、初期フェーズでは十分なスペックかと考えます。

Webプッシュは30,000ユーザまで
スマホへのプッシュは制限なし
In-Appメッセージング機能は不可
サポートは制限あり
ユーザ権限、配信リストアップロードなどの一部機能制限あり

実行環境

macOS Mojave 10.14.5
nodejs v12.6.0
Ionic 3.9.5

セットアップ手順

Google Chrome, Firefox, Edge

以下のページから、OneSignalの登録を行う

Start sending push notifications for free with OneSignal
https://app.onesignal.com/signup

「Add App」をクリック

OneSignal用の識別名（サイト名やアプリ名など）を入力

Web Push を選択

Typical Site を選択

Webプッシュ配信をしたいサイト名とサイトURLを入力

デフォルトアイコンやHTTPS限定などの制限があれば、変更する

ローカル環境で実行したい場合は、以下のような設定にすると動作します

SITE URL: http://localhost:8100
AUTO RESUBSCRIBE: OFF
LOCAL TESTING: ON

「Add A Prompt」を押下し、通知許可ダイアログの表示方法を選択する

今回は、「Native Prompt」を選択した

通知許可設定時の初期メッセージを設定するかどうか
今回は、「オフ」で設定

その他の設定

今回は、すべてデフォルトのままで設定

「OneSignal-Web-SDK-HTTPS-Integration-Files.zip」をダウンロードし、 Webサイトのルートディレクトリ直下に配置する

src配下のindex.htmlファイルに以下を、タグのすぐ上に追記します

　<link rel="manifest" href="/manifest.json" />
  <script src="https://cdn.onesignal.com/sdks/OneSignalSDK.js" async=""></script>
  <script>
    var OneSignal = window.OneSignal || [];
    OneSignal.push(function() {
      OneSignal.init({
        appId: "xxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxx",
      });
    });
  </script>