Skip to main content

Implementing Web Push Notification

Once the Actito team has done the necessary configuration and you have retrieved the SDK file, you are now ready to implement the Notificare Web library on your website.

Installing through NPM​

Using a module bundler like webpack or Rollup in your development environment is strongly recommended. Otherwise, you won't be able to take advantage of the modular API's main benefits , i.e., reducing your app's bundle size.

npm install notificare-web

Once the package is installed in your project, you can include the necessary functions for your app.

import { } from 'notificare-web/core';
import { } from 'notificare-web/assets';
import { } from 'notificare-web/geo';
import { } from 'notificare-web/in-app-messaging';
import { } from 'notificare-web/inbox';
import { } from 'notificare-web/push';
import { } from 'notificare-web/push-ui';
import { } from 'notificare-web/user-inbox';

// CSS files
import 'notificare-web/in-app-messaging/in-app-messaging.css';
import 'notificare-web/push/push.css';
import 'notificare-web/push-ui/push-ui.css';

The example above demonstrates the import of CSS files through JavaScript. However, you can adjust this to match the preferred import for your application stack. For instance, if you have global.css file, you can import our CSS files like the following:

@import "notificare-web/in-app-messaging/in-app-messaging.css";
@import "notificare-web/push/push.css";
@import "notificare-web/push-ui/push-ui.css";

Installing through the CDN​

You can also load Notificare packages as script modules in browsers that support native ES modules.

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.notifica.re/libs/web/v4/{{version}}/notificare-in-app-messaging.css" />
  <link rel="stylesheet" href="https://cdn.notifica.re/libs/web/v4/{{version}}/notificare-push.css" />
  <link rel="stylesheet" href="https://cdn.notifica.re/libs/web/v4/{{version}}/notificare-push-ui.css" />
</head>
<body>
<script type="module">
  import { } from 'https://cdn.notifica.re/libs/web/v4/{{version}}/notificare-core.js';
  import { } from 'https://cdn.notifica.re/libs/web/v4/{{version}}/notificare-assets.js';
  import { } from 'https://cdn.notifica.re/libs/web/v4/{{version}}/notificare-geo.js';
  import { } from 'https://cdn.notifica.re/libs/web/v4/{{version}}/notificare-in-app-messaging.js';
  import { } from 'https://cdn.notifica.re/libs/web/v4/{{version}}/notificare-inbox.js';
  import { } from 'https://cdn.notifica.re/libs/web/v4/{{version}}/notificare-push.js';
  import { } from 'https://cdn.notifica.re/libs/web/v4/{{version}}/notificare-push-ui.js';
  import { } from 'https://cdn.notifica.re/libs/web/v4/{{version}}/notificare-user-inbox.js';

  // more code ...
</script>
</body>
</html>

We recommend using a pinned version when including our libraries and managing their updates as necessary. However, you can also use the latest placeholder to always be up-to-date.

import { } from 'https://cdn.notifica.re/libs/web/v4/latest/notificare-core.js';
note

When using Google Tag Manager to include our libraries, make sure to enable support for document.write.

alt text

Configuration file​

In order to connect your app to Notificare, you need to download the SDK configuration file that was dropped in the transfer box by the Actito team.

For reference, here's what this file should look like:

{
"applicationKey": "{{ YOUR APPLICATION KEY }}",
"applicationSecret": "{{ YOUR APPLICATION SECRET }}",
}
tip

While not mandatory for Web Push, we recommended to create two different configurations in Notificare using separated environments for development and production. For each app you will have a different set of keys, resulting in two different configuration files.

Launching Notificare​

Launching Notificare is as simple as calling launch(). A small code sample can be found below.

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

// Launch Notificare! 🚀
await launch();

You can delay launching Notificare for the first time. Otherwise, make sure you launch() when the page loads to prevent missing important updates.

You can use the onReady() event as shown below when you want to control the state of dependencies in your application initialization flow.

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

onReady((application) => {
// Notificare is now safe to use.
});

Un-launch Notificare​

It is possible to completely remove all data for a device, both locally in your app and remotely in our servers. You want to avoid doing so, but for cases when the user requests their account to be removed, you can use the following method:

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

await unlaunch();

After invoking this, all the device's data will be destroyed and cannot be undone. Once the process is complete, the onUnlaunched() event will be executed.

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

onUnlaunched(() => {
// All device data was deleted.
// Notificare cannot be used until it's launched again.
});

At this point, invoking any other method in Notificare will fail, and the only way to start using the SDK again, is by invoking its counterpart, the launch method.