Skip to main content

Web Push - Implementing Remote Notifications

In this page you'll learn how notifications are handled in your app and what are all the options at your disposal to create a great messaging experience for your users.

info

Please note that all the browsers, except for Safari, will need to be opened to receive notifications. Safari in MacOS will still receive notifications even when the browser is not opened at all. Users will receive notifications even if your website is not focused or opened at all, as long as the browser is running.

Requesting Permission​

To enable remote notifications within your application, it's important to obtain user permissions before sending any notifications. Due to certain constraints imposed by web browsers, this permission request cannot occur automatically during page loading. Instead, it must be triggered as a direct result of a user action, such as clicking a designated button.

There are two primary methods for on-boarding users to enable remote notifications: utilizing the standard features or manually integrating the functionality through your codebase.

When using the standard feature, our SDK will take care of displaying the required user interface components based on the information provided at set-up (logo, languages, ...). Furthermore, the SDK will seamlessly handle the activation of remote notifications when deemed appropriate for the selected configuration. Lastly, make sure to include the Notificare Push CSS file which is necessary to correctly display the managed on-boarding UI.

import 'notificare-web/push/push.css';

Alternatively, should you choose to manually enable remote notifications, the responsibility falls upon you to oversee the on-boarding user interface and the entire associated process.

Enabling Notifications​

In order to enable the device to receive notifications, all that you need to do is invoke a single method.

import { enableRemoteNotifications } from 'notificare-web/push';

await enableRemoteNotifications();

You can check if the user has previously enabled remote notifications.

import { hasRemoteNotificationsEnabled } from 'notificare-web/push';

const enabled = hasRemoteNotificationsEnabled();

Additionally, you can check if the user has disabled notifications in the Browser Settings.

import { getAllowedUI } from 'notificare-web/push';

const allowedUI = getAllowedUI();

Although changes only take place when the user reloads the page, you can also be notified of browser notification permission changes.

import { onNotificationSettingsChanged } from 'notificare-web/push';

onNotificationSettingsChanged((allowedUI) => {
  // more code ...
});

Disabling remote notifications​

Disabling remote notifications can be achieved in the same fashion as enabling them.

import { disableRemoteNotifications } from 'notificare-web/push';

await disableRemoteNotifications();

When this method is called, we will automatically register your device to never receive remote notifications, although you will still maintain the same user profile, inbox messages and enjoy all the other services your plan supports. You can at anytime request a re-register for push notifications if you wish to.

Receiving Notifications​

In order to receive notifications, it's necessary to have a service worker file available at the root directory of your website.

To simplify the process, we offer a worker file that handles incoming notifications, eliminating the need for any manual integration.

Ensure that you serve this file at https://your-website/sw.js. If you integrate this file as part of your build procedure, you can import it from the package using the example below.

import 'notificare-web/push/sw';

Alternatively, you have the option to import it directly from the CDN using the importScripts function. However, it's important to confirm that the imported version aligns with the version of your packages.

importScripts('https://cdn.notifica.re/libs/web/v3/{version}/notificare-push-sw.js');

For more comprehensive insights into Service Workers, refer to the detailed information available here.

In order to support Web Push in iOS 16.4 or higher, it's necessary to serve a manifest file setting the display property to standalone. You can refer to the following manifest.json as a starting point for your application.

{
  "name": "Your app name",
  "short_name": "Your app name",
  "display": "standalone",
  "start_url": "/"
}

Lastly, declare your manifest in your HTML file as illustrated below.

<!DOCTYPE html>
<html>
<head>
  <link rel="manifest" href="/manifest.json" />
</head>
</html>
note

Web Push in iOS 16.4 or higher is only available when the user adds the web app to the Home Screen.

You can find more information about Web App Manifest files here.