Web Push Notification

This page describes the steps involved in sending Web Push Notifications.

Download ServiceWorker file and host it

Download ServiceWorker file from WEB PUSH NOTIFICATION SETTINGS

Host the file downloaded above on your web server.

• For example, if your website is running at https://www.example.com, please host the ServiceWorker file at https://www.example.com/web-push/sw.js and make it accessible.

Specify the ServiceWorker URL

Specify the absolute URL to the previously hosted ServiceWorker file.

Note

• Specify the scope based on the path where the ServiceWorker is hosted.

Warning

• We recommend not to change the URL and scope of the ServiceWorker after you specified them unless it is absolutely necessary.

• We recommend putting ServiceWorker into some separate directory on your website (e.g., https://www.example.com/web-push/sw.js), not in the root directory (e.g., https://www.example.com/sw.js).

• If your site already uses ServiceWorker

  • Repro's ServiceWorker must be the only ServiceWorker to handle "push" and "notificationclick" events.

  • Repro's ServiceWorker must have a different scope and URL than the scope and URL of the ServiceWorker already installed on your website.

  • Please consult with our CS in advance if you think there might be some interference with your ServiceWorker.

Create and host manifest file (for iOS)

If you wish to deliver web push notifications to iOS devices, you have to place a manifest file on your site in addition to ServiceWorker. Please refer to https://developer.mozilla.org/en-US/docs/Web/Manifest for more details about manifest files.

Display notification permission request dialog

A）Use the Web SDK API

By calling the API shown below at any timing on your website, you can display a dialog to request notification permission. If the user has already granted permission to your site, the dialog will not appear and they will automatically be subscribed to notifications.

reproio('subscribeToPushNotification');

Warning

• If this API is called immediately after the setup measurement tag, the authorization dialog may not appear. Please consider the following implementation.

  • Delay the API for a few seconds after the setup measurement tag.

  • Use Web Messages (see below for more details).

B）Use Web Messages

After selecting a custom message, the notification permission dialog can be shown by calling the following API in JavaScript. If the user has already granted permission to your site, the dialog will not appear and they will automatically be subscribed to notifications.

reproio('subscribeToPushNotification');

Warning

• Due to browser limitations, the notification permission dialog can be displayed basically only once.

• Due to the above restrictions, we recommend that you carefully consider and decide when you want to display notification permission dialog.

  • Please refer to https://repro.io/contents/why-people-are-turning-off-push/ for best practices on when to show notification authorization dialogs.

• If your website uses Content-Security-Policy, add worker-src: https://cdn.reproio.com to the Content-Security-Policy header.

Check WebPush availability

The following API can be used to verify the availability of WebPush to current user by calling the API from page script or in a custom web message. By using the results of this API to change page elements and messages, you can avoid to encourage subscription to users who do not have a WebPush-enabled environment.

reproio('isPushNotificationSubscribeAllowed');

This API detects if the current user is potentially ready to receive WebPush, including cases where notification permissions have not yet been determined. The API performs the following checks and returns true if all conditions are met, otherwise it returns false.

1. Current user uses a browser that supports Repro's WebPush

2. Not already rejected (allowed or indetermined status)

3. The WebPush function is enabled and ServiceWorker URL has been configured on the administration screen.

4. The URL origin of the ServiceWorker configured in the administration screen matches the one being accessed.

• « Implement to SPA(Single Page Application) site
• Check that Repro Web measurement tags are working properly »