How to trigger the native notification permission prompt on Firefox and Safari?

Adapting your web push implementation to display Firefox and Safari's native permission prompt using user gestures.

Unlike the majority of browsers, Firefox and Safari do not allow publishers to trigger the push permission prompt without a prior user gesture (version 72 and above for Firefox). That user action should be a click on a webpage element (the click must not be a redirection, and the scroll doesn't work as a user gesture).

If no user gesture is defined, the native behaviour of these browsers would be hiding the permission prompt and either displaying an icon in the search bar for Firefox or nothing on Safari, thus making it hardly noticeable for website visitors:

Therefore, when integrating Batch web push, you should take into account these browsers' specificities. We suggest you do that by either:

A - Defining a user gesture (or several)

That user gesture will trigger the display of the native permission prompt. This can be a click on your cookie consent request for example:

This can be done by calling the following Javascript function at the chosen event:

function displayNativePermissionRequest(){ 

   if (navigator.userAgent.indexOf("Firefox") !== -1 || (navigator.userAgent.indexOf("Safari") !== -1 && navigator.userAgent.indexOf("Chrome") === -1)) {

      batchSDK(function(api){api.ui.show('native', true)});
 
    } 
}

Ideally, you should set several user gestures in order to display the opt-in request to a majority of users during their browsing.

Depending on the browsers' requirements, this method might not always trigger the native notification prompt. You should always test this implementation, and optionally consider option B below.

B - Using Batch pre-permission prompts

You can also use Batch pre-permission prompts. A click on the "Accept" button will be considered as a user gesture, thereby triggering the display of the native permission request:

This is a great solution to quickly launch a web push on your website.

To implement this, you would have to define a Custom UI object for Firefox and Safari only (the permission request remains native for other browsers):

var batchSDKUIConfig = { native: {} 
} 

if(navigator.userAgent.indexOf("Firefox") !== -1 || navigator.userAgent.indexOf("Safari") !== -1 && navigator.userAgent.indexOf("Chrome") === -1) {

    batchSDKUIConfig = {

       alert: { icon: 'https://mydomain.com/icon.png', 
       backgroundColor: '#FFFFFF',
       text: 'Subscribe to our notifications!', 
       }
    } 
}

batchSDK('setup', { 
  ... 
  ui: batchSDKUIConfig 
});

However, we observe that the opt-in rate is not as good with this pre-permission prompt, compared to the native prompt only. That's why you should deploy it only on Firefox and Safari, and not on other browsers which don't have the same restrictions.

We also encourage you to implement one or several custom user gestures on Firefox and Safari for the next release, as detailed in the first section of this article.