初期化¶

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

RichFlyerより発行されるSDK実行キーとドメインを登録し、通知許可の確認、Service Workerの登録、購読情報の登録を行います。
ユーザーが「通知を受け取る」などのボタンを操作したタイミングで呼び出してください。
RichFlyerライブラリ（rf-functions.js）を使用します。

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

パラメータ	内容
rfServiceKey	SDK実行キー
domain	通知を受信するサイトのドメイン
戻り値	`"granted"`（許可）、`"denied"`（拒否）、`"default"`（確認画面を閉じた）のいずれか。Web Push非対応環境では `undefined`。

Safari独自プッシュはサポート終了

v2.5.0では、macOS 12以前向けのSafari Push Notifications（Website Push ID／APNs証明書）は利用できません。旧実装との互換性のため第3・第4引数は渡してもエラーになりませんが、値は使用されません。macOS 13 / Safari 16以降およびiOS/iPadOS 16.4以降は、標準Web Pushとして第1・第2引数だけで実装してください。

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

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

Info

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

Example

function initialize() {
    rf_init(
        "11111111-aaaa-bbbb-cccc-dddddddddddd",
        location.hostname
    ).then((result) => {
        if (result === "granted") {
            // 通知登録が許可された場合の処理
        }
    }).catch((error) => {
        // RichFlyer APIのエラーでは error.status / error.code / error.apiMessage を参照可能
        console.error(error);
    });
}

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

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

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

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

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

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

実装方法¶

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

パラメータ	内容
rfServiceKey	SDK実行キー
domain	通知を受信するサイトのドメイン
第3引数	互換性用の予約引数。v2.5.0では常に `null` を指定してください。
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",
        location.hostname,
        null,
        popupSettingValue
    );
}