RichFlyer SDK for WebPush 利用手順¶

RichFlyer SDK for WebPushは、RichFlyerを使用してWebプッシュ通知を配信する際に使用します。
提供するJavaScriptファイルをWebサーバに配備することで、RichFlyerが提供する機能が使用できるようになります。

JavaScriptファイルはこちらより取得できます。

提供ファイル¶

区分	ファイル・ディレクトリ	用途
ライブラリ本体	`rf-functions.js` `rf-serviceworker.js` `css/rf-dialog-style.css`	RichFlyerのWebプッシュ機能を利用するために設置するファイルです。
サンプル	`example/`	スマートフォン・PWA向けの実装例と、動作確認用ページを含みます。サンプルを利用する場合は配下の構成を保ったまま配置してください。

rf-functions.js¶

RichFlyerの機能を利用するためのライブラリです。RichFlyerをご利用する上で必要なファイルです。
※本ファイルは改変しないでください。

rf-serviceworker.js¶

RichFlyer専用のService Workerです。通知の受信・表示、通知クリック時の処理、購読情報が再発行された場合の再登録を行います。RichFlyerをご利用する上で必要なファイルです。
※本ファイルは改変しないでください。

css/rf-dialog-style.css¶

通知許可前に表示するカスタムポップアップダイアログ用のスタイルシートです。rf_init_popup() を利用する場合に読み込みます。
※本ファイルは改変しないでください。見た目を変更する場合は、読み込み後にページ側のスタイルで上書きしてください。

example/ 配下のサンプル¶

example/index.html¶

スマートフォン・PWA向けのサンプルページです。iOS/iPadOSでWebプッシュを利用するために必要なホーム画面への追加、通知の購読・解除、セグメント登録、イベント投稿の実装例を含みます。実際のサイトへ組み込む際の参考にしてください。

example/rf-serviceworker.js、example/js/rf-functions.js、example/css/rf-dialog-style.css¶

example/index.html が参照するService Worker、ライブラリ本体、カスタム許可ダイアログ用スタイルです。リポジトリ直下の同名ファイルのコピーで、サンプルをそのまま配置する場合に必要です。ライブラリ本体とService Workerは編集せず、リポジトリ直下のファイルと同じバージョンを使用してください。

example/js/rf-sample-app.js¶

example/index.html 用のJavaScriptです。SDK実行キーの設定、通知の購読・解除、セグメント登録、イベント投稿を実装しています。サンプルをベースに実装する場合は、このファイルを編集してください。

example/css/rf-sample-style.css¶

example/index.html の画面デザイン用スタイルシートです。RichFlyerライブラリの動作には影響しないため、サイトのデザインに合わせて編集または置き換えられます。

example/manifest.json、example/icon/¶

PWAとして動作させるためのマニフェストとアイコン画像です。iOS/iPadOSでWebプッシュを利用する場合は必要です。example/index.html からの相対パスを保ち、サービス名・アイコン画像を実際のサイト用に変更してください。

example/index-sample.html、example/js/rf-webpush-sample.js¶

ライブラリの動作確認用ページと補助スクリプトです。各関数の戻り値・エラー、ブラウザやService Workerの状態を確認できます。実際のサイトへの組み込みには example/index.html と example/js/rf-sample-app.js を参考にしてください。

更新時の注意¶

ライブラリを更新する場合は、提供ファイル一式を同じバージョンへ置き換えてください。example/index.html を利用する場合は、example/ 配下の構成を保ったまま配置してください。特に manifest.json、icon/、rf-serviceworker.js、js/rf-functions.js、css/rf-dialog-style.css を欠けさせないでください。
Safari独自のプッシュ通知（Website Push ID／APNs証明書）はサポートしていません。Safariでは標準Web Pushをご利用ください。

提供ファイルの編集について

サンプルファイルのみ編集してご利用いただくことが可能です。
ただし、いずれのファイルについても編集した結果生じた不具合や損害については責任は負いかねますのでご了承ください。

動作環境¶

OS	Google Chrome	Microsoft Edge	Firefox	Safari
Windows	○	○	○	×
Mac	○	×	○	○
Android	○	○	×	×
iOS	×	○	×	○

いずれのブラウザも最新バージョンが動作環境となります。
iOSは、iOS16.4以降で"Home Screen web apps"(PWA)に対応したWebサイトに配信が可能です。

Webブラウザによる挙動の違い

プッシュ通知受信処理はWebブラウザにごとに実装されているため、挙動が異なることがあります。
ブラウザ別のサポート状況

Safariについて¶

v2.5.0は標準Web Pushのみをサポートします。macOSではmacOS 13 / Safari 16以降が対象です。macOS 12以前のSafariで使われていたApple独自仕様のSafari Push Notificationsには対応していません。
Safari用にWebsite Push ID、証明書、APNsキーを作成・設定する必要はありません。

iOSへのWebプッシュについて¶

iOSへのWebプッシュ通知は以下の条件を満たしている場合に受信が可能になります。

iOS16.4以降
「ホーム画面に追加」機能が実装されているWebブラウザでウェブサイトを表示
ウェブサイトが"Home Screen web apps"(PWA)に対応している

Webブラウザのシェアメニュー

「ホーム画面に追加」を実行