Implementation of push-notifications via API integration

Implementation

In order to integrate push notifications you need to copy these 2 files to your website's root directory
rr.wpsw.import.js
rr.wpsw.empty.js

And also it's necessary to add in section <head> the following script:

<script src="https://cdn.retailrocket.net/content/javascript/retailrocket.webpush.js"></script>

Once you have copied them, you need to contact Retail Rocket technical support via the feedback form in your personal account to check the integration and enable push-notifications.

Subscription of a user

Once everything has been verified and enabled, you need to start the subscription process for the users.

For that you can use the folllowing function:

<script type="text/javascript">
    retailrocket.modules.webPushSubscription.execute("<<name>>",function(subsription) {
  	// Your code un subscription
    })
</script>

If the user agrees, the callback function will be called. The user's subscription is passed to this callback as a PushSubscription object. Next, you can perform the necessary actions with the subscription, for example, transferring the subscription to Retail Rocket.

An example of processing a "subscription" object to extract the parameters needed for the subscription transfer method:

retailrocket.modules.webPushSubscription.execute("<<name>>", function(subscription) {
    console.log('Endpoit: ', subscription.endpoint);
    navigator.serviceWorker.ready.then(function(registration) {
        registration.pushManager.getSubscription().then(function(subscription) {
            if (subscription) {
                const rawKey = subscription.getKey('p256dh');
                const key = rawKey ? btoa(String.fromCharCode.apply(null, new Uint8Array(rawKey))) : null;

                const rawAuthSecret = subscription.getKey('auth');
                const authSecret = rawAuthSecret ? btoa(String.fromCharCode.apply(null, new Uint8Array(rawAuthSecret))) : null;

                console.log('Public Key: ', key);
                console.log('Auth Secret: ', authSecret);
            } else {
                console.log('No subscription found.');
            }
        }).catch(function(error) {
            console.error('Error getting subscription:', error);
        });
    }).catch(function(error) {
        console.error('Service Worker not ready:', error);
    });
})

In the example above, after the user clicks on permission to receive web push notifications, the console will display the parameter values that need to be passed to the appropriate method.

Detailed information about API method for passing subscription described here.