Webプッシュ通知¶

このページではWebプッシュ通知を送るまでの手順を説明します。

ServiceWorkerファイルのダウンロードとホスティング¶

管理画面 > Webプッシュ通知設定 から、 ServiceWorkerのファイルをダウンロードしてください。

上記でダウンロードしたファイルをお客様のwebサーバーにホスティングしてください。

例) https://www.example.com のURLでウェブサイトを公開している場合は、https://www.example.com/web-push/sw.js という形でファイルがアクセス出来るようにしてください。

ServiceWorkerのホスト先の指定¶

先にホスティングしたServiceWorkerのファイルへの絶対URLを指定してください。

注釈

ServiceWorkerを設置したパスをscopeに指定してください。

警告

ServiceWorkerのURLおよびスコープについては、一度設定した後には強い必要性がない限りは変えずにそのままにしてください。
ServiceWorkerファイルを設置する場所については、サイトのルートディレクトリ（e.g. https://example.com/sw.js）ではなく別のディレクトリ配下（e.g. https://example.com/web-push/sw.js）に設置することを推奨します。
既にお客様がServiceWorkerをご利用されている場合に関して
- Reproの提供するServiceWorkerとは別のServiceWorkerで "push" や "notificationclick" イベントリスナーが存在しないようにしてください。
- すでにサイトで利用中のServiceWorkerが存在する場合、Reproの提供するServiceWorkerは既存のものと別のURLおよびスコープを設定するようにしてください。
- すでに利用中のServiceWorkerとの干渉や調整が必要だと思われる場合は、あらかじめ弊社担当CSにご相談ください。

manifestファイルの作成とホスティング（iOS用）¶

iOS端末に対してWebプッシュ通知を配信するためには、ServiceWorkerに加えてサイト上にmanifestファイルを設置する必要があります。manifestファイルの詳細については https://developer.mozilla.org/ja/docs/Web/Manifest を参照してください。

通知許諾を表示する¶

A）Web SDKのAPIを使う¶

お客様のwebサイト上の任意のタイミングで下記のようなAPIを呼び出すことで、Webプッシュ通知許諾ダイアログを出すことが可能です。すでにサイトで許諾している場合はダイアログは出ず、プッシュを購読したことになります。

reproio('subscribeToPushNotification');

警告

セットアップ計測タグの直後にこのAPIを呼び出すと、許諾ダイアログが出てこないことがあります。下記のような実装を検討してください。
- セットアップ計測タグから数秒遅延させAPIを実行する
- Webメッセージを利用する（下記参照）

B）Webメッセージ経由¶

カスタムメッセージを選択した上で、JavaScript内で下記のAPIを呼び出すことで、Webプッシュ通知許諾ダイアログを出すことが可能です。すでにサイトで許諾している場合はダイアログは出ず、プッシュを購読したことになります。

reproio('subscribeToPushNotification');

警告

ブラウザの制約により、Webプッシュ通知の 通知許諾ダイアログをユーザに出すタイミングは基本的に１回 のみです。
上記の制約があるため、Webプッシュ通知の通知許諾ダイアログを出せるタイミングに関しては、熟慮した上で決めることを推奨しております。
- 通知許諾ダイアログを出すタイミングのベストプラクティスに関しては https://repro.io/contents/why-people-are-turning-off-push/ をご参照ください。
当該のWebサイトでContent-Security-Policyを利用している場合は、Content-Security-Policy ヘッダに worker-src: https://cdn.reproio.com を追加してください。

Webプッシュ通知が利用可能であることを確認する¶

下記 WebSDK API をページの JavaScript から、もしくはカスタムWebメッセージ内で呼び出すことにより、そのユーザーに対してWebプッシュ通知が配信可能であるかが確認できます。この API の返り値を使ってページの要素の変更やメッセージの出し分けを行うことにより、Webプッシュ通知の対応環境でないユーザに通知の受け取りをオススメしてしまう、といったギャップを避けることができます。

reproio('isPushNotificationSubscribeAllowed');

この API は現在のユーザが通知許可を未決定な場合も含み、潜在的に Webプッシュ通知を受け取り可能な状態であるかどうかを判定します。具体的には以下の確認を行い、全ての条件に合致する場合に true を、それ以外の場合には false を返します。

Repro の Webプッシュ通知に対応していているブラウザを使用している
既に通知を拒否済みでない (許可済みであるか、もしくは未決定状態である)
管理画面の Webプッシュ通知機能が有効になっており、ServiceWorker URL が入力済みである
管理画面で設定した ServiceWorker の URL オリジンと、アクセス中のものが合致している