Implementation

If you've completed the steps described in the Setup guides, you are now ready to implement our Web library in your app. Don't forget to read the browser support table available here.

If you are upgrading from an older version of our library, it's always a good idea to read our Migration guide.

We understand that not every app will take advantage of every bit of functionality provided by our platform. To help reduce your app's size and dependency footprint, you can cherry-pick which sub-packages you want to include in your app.

Furthermore, our libraries provide a highly modular system with a functional approach that supports tree-shaking.

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.

gtm document write

Configuration file

In order to connect your app to Notificare, you need to download the configuration file from the Dashboard and serve it at the root of your web app. The configuration file can be downloaded by opening your Notificare application and going into the App Keys section via Menu > Settings > App Keys.

app keys v3 download

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

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

It is recommended that you create at least two different apps 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.