Skip to main content

Web Push - Customizations

In this page we'll dive deeper into several aspects of our Web library that can be customized to match your needs.

Setting keys in code​

Instead of relying on the notificare-services.json configuration file, which is the file you retrieved in your TransferBox, it is possible to set those in code. To configure Notificare, you must run the following code before any other interactions with the library.

import { configure } from 'notificare-web/core';

configure({
  applicationKey: '{{ YOUR APPLICATION KEY }}',
  applicationSecret: '{{ YOUR APPLICATION SECRET }}',
});

The configure() method takes in the same object as the notificare-services.json file and should be called before calling launch() to make sure the correct keys are used. After setting the keys programmatically you can safely delete the notificare-services.json file.

Configuration options​

Both the configure() function and the notificare-services.json file take in the same object. Below is a description and requirements for each property.

applicationKey required​

You can find the application key in the notificare-services.json file provided in your TransferBox.

applicationSecret required​

You can find the application key in the notificare-services.json file provided in your TransferBox.

applicationVersion​

The version of your application (e.g. 1.0.0). This property is registered to the device and it's useful to handle upgrades.

language​

Define the language of the website. This is used for the managed Push on-boarding with localized content.

ignoreTemporaryDevices​

Prevent the registration of temporary devices. When this flag is enabled, the SDK will only register a device when remote notification have been enabled.

ignoreUnsupportedWebPushDevices​

Prevent the registration of temporary devices that are not capable of receiving remote notifications. When this flag is enabled, the SDK will continue to register temporary devices provided it is capable of receiving remote notification. You can target these devices with in-app messages to promote the enrollment of remote notifications.

serviceWorker​

The location of the service worker file on your application. Defaults to /sw.js.

serviceWorkerScope​

The scope of your service worker. You can check this guide for more information.

Override default theme​

Our SDK's UI elements adapt to the preferred appearance of the operating system. If you wish to enforce a specific light or dark mode, you can achieve this by utilizing the data-notificare-theme attribute to override the default theme.

<html data-notificare-theme='light'>
  <!-- more code ... -->
</html>