初期化¶

SDK実行キーとドメインをRichFlyerに登録¶

RichFlyerより発行されるSDK実行キーとドメインを登録します。
必ず最初に呼びます。
Safari Push Notificationsを使用する場合は、Apple Developersで発行したWebsite Push Idとコールバック関数が必要です。
RichFlyerライブラリ（rf-functions.js）を使用します。

//rf-functions.js
rf_init(rfServiceKey, domain, websitePushId, safariCallbackFunc)

パラメータ	内容
rfServiceKey	SDK実行キー
domain	通知を受信するサイトのドメイン
websitePushId	(OPTIONAL)Safari Push Notificationsで使用するWebsite Push Id
safariCallbackFunc	(OPTIONAL)Safari Push Notificationsで登録結果を受信するコールバック関数

Info

websitePushId と safariCallbackFunc は、macOS12以下のSafariへプッシュ通知を配信する場合にのみ必要になります。

iOSとmacOSでの実行タイミングについて

ユーザーのアクションを介して実行します。例えば、「プッシュ通知を受信する」というボタンを設置して、ユーザーがタップしたときに実行します。
ページの読み込み時に自動で実行するとエラーになります。

Info

SDK実行キーは管理サイトのサービス管理画面より取得できます。

Example

function initialize() {
    rf_init(
        "11111111-aaaa-bbbb-cccc-dddddddddddd",
        "webpush.richflyer.net",
        "web.net.richflyer",
        safariCallbackFunc
    ).then((result) => {
        console.log(result);
    }).catch((error) => {
        console.log(error);
    });
}

function safariCallbackFunc(permission) {
    if (permission === "denied") {
        //通知登録が拒否された場合の処理
    }
    if (permission === "granted") {
        //通知登録が許可された場合の処理
    }
}

カスタムポップアップダイアログ¶

初期化を行うと、ウェブブラウザがプッシュ通知の受信の許諾を求めるメッセージを表示します。
RichFlyerでは、このメッセージを表示する前に独自のポップアップダイアログを表示することができます。
プッシュ通知を受信することのメリットをユーザーに訴求することで許諾率を向上させることができます。

Google Chromeが表示するメッセージ

カスタムポップアップの種類¶

カスタムポップアップは、normal・center・bar の３種類があります。

種類	イメージ(PC)	イメージ(スマホ)
normal
center
bar

実装方法¶

//rf-functions.js
rf_init_popup(rfServiceKey, domain, websitePushId, popupSettingValue)

パラメータ	内容
rfServiceKey	SDK実行キー
domain	通知を受信するサイトのドメイン
websitePushId	(OPTIONAL)Safari Push Notificationsで使用するWebsite Push Id
popupSettingValue	ポップアップダイアログの情報

const popupSettingValue = {
    type:         {string} ポップアップの種類(normal || bar || center)
    message:      {string} メッセージ
    img:          {string} イメージファイル
    cancelButton: {string} 通知拒否ボタン名
    submitButton: {string} 通知許可ボタン名
}

Info

SDK実行キーは管理サイトのサービス管理画面より取得できます。

Info

rf_init_popup()を実行した場合は、rf_init()の実行は不要です。

Example

function initialize_popup() {
    // ポップアップダイアログ情報
    const popupSettingValue = {
        type:         "center",
        message:      "プッシュ通知でお得な情報をお届けします！！ぜひ「受け取る」をクリックして通知の許可をお願いします。",
        img:          "./img/notification.jpg",
        cancelButton: "キャンセル",
        submitButton: "受け取る"
    }

    // ポップアップダイアログを表示
    rf_init_popup(
        "11111111-aaaa-bbbb-cccc-dddddddddddd",
        "webpush.richflyer.net",
        "web.net.richflyer",
        popupSettingValue
    );
}