Web

First to start Web integration, be sure that Setup – Firebase setup was fully completed.

  1. Setup Google Analytics on your main page:

    index.html
     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
    <html lang="en">
  <script type="text/javascript" async="" src="https://www.google-analytics.com/analytics.js"></script>
  <script type="text/javascript" async="" src="https://www.googletagmanager.com/gtag/js?id=<YOUR_ID>&amp;l=dataLayer&amp;cx=c"></script>
  <script type="module" src="chrome-extension://jdkknkkbebbapilgoeccciglkfbmbnfm/hook.js"></script>
  <head>
    <meta charset="UTF-8">
    <title>Push test</title>
    <link rel="manifest" href="manifest.json"/>
    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async="" src="https://www.googletagmanager.com/gtag/js?<YOUR_ID>"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());

      gtag('config', '<YOUR_ID>');
    </script>
  </head>

  2. Add Firebase SDK:

    1. If you're using npm and a modular bundler such as Webpack or Rollup, you can install the Firebase SDK using: 

      npm install firebase

    2. Initialize the Firebase SDK using the code:

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
    import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";

const firebaseConfig = {
  apiKey: "",
  authDomain: "",
  projectId: "",
  storageBucket: "",
  messagingSenderId: "",
  appId: "",
  measurementId: "",
};  // use config from the initial Firebase Web App setup

const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
    import { initializeApp } from "firebase/app";

const firebaseConfig = {
  apiKey: "",
  authDomain: "",
  projectId: "",
  storageBucket: "",
  messagingSenderId: "",
  appId: "",
  measurementId: "",
};  // use config from the initial Firebase Web App setup

const app = initializeApp(firebaseConfig);

    Put the script in the site HTML:

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
    <script type="module">
  import { initializeApp } from "https://www.gstatic.com/firebasejs/9.4.1/firebase-app.js";
  import { getAnalytics } from "https://www.gstatic.com/firebasejs/9.4.1/firebase-analytics.js";

  const firebaseConfig = {
    apiKey: "",
    authDomain: "",
    projectId: "",
    storageBucket: "",
    messagingSenderId: "",
    appId: "",
    measurementId: "",
  };  // use config from the initial Firebase Web App setup

  const app = initializeApp(firebaseConfig);
  const analytics = getAnalytics(app);
</script>

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
    <script type="module">
  import { initializeApp } from "https://www.gstatic.com/firebasejs/9.4.1/firebase-app.js";

  const firebaseConfig = {
    apiKey: "",
    authDomain: "",
    projectId: "",
    storageBucket: "",
    messagingSenderId: "",
    appId: "",
    measurementId: "",
  };  // use config from the initial Firebase Web App setup

  const app = initializeApp(firebaseConfig);
</script>

  3. Setup Cloud Messaging:

    1
2
3
4
5
6
7
8
9
    import { getMessaging, getToken } from "firebase/messaging";

getToken(messaging, { vapidKey: '<YOUR_PUBLIC_VAPID_KEY_FROM_FIREBASE_INITIAL_SETUP>' })
  .then(token => {
    // send request to the NeuCurrent method for token registartion according to NeuCurrent API Swagger UI. See example below
  })
  .catch(err => {
  // handle error or pemission deny 
  });

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
    <script type="module">
    import { getMessaging, getToken } from "https://www.gstatic.com/firebasejs/9.4.1/firebase-messaging.js";

    getToken(messaging, { vapidKey: '<YOUR_PUBLIC_VAPID_KEY_FROM_FIREBASE_INITIAL_SETUP>' })
      .then(token => {
        // send request to the NeuCurrent method for token registartion according to NeuCurrent API Swagger UI. See example below
      })
      .catch(err => {
        // handle error or pemission deny 
      });
</script>

    Request sending to the NeuCurrent API

    Please, notice that in the code you should send a HTTP request to NeuCurrent API with a received device token. See example below:

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
    getToken(messaging, { vapidKey: '<YOUR_PUBLIC_VAPID_KEY_FROM_FIREBASE_INITIAL_SETUP>' })
  .then(token => {
    // send request to the NeuCurrent method for token registartion according to NeuCurrent API Swagger UI. See example below
    const googleAnalyticsData = () => {
        const data = {};
        gtag('get', '<YOUR_GTAG>', 'client_id', clientId => { data.clientId = clientId; })
        return data;
    };

    let gaData = googleAnalyticsData();

    let credentials = {
        username: '<>',
        password: '<>'
    };  // request credentials from the NeuCurrent Team

    fetch('https://app.neucurrent.com/push/api/v1/oauth/rotate-token/', {
      method: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify(credentials)
    })
      .then(async response => {
        let {access_token, access_token_type} = await response.json();
        let body = {
          "device_data": {
            "device_token": token,
            "platform": "WEB",
            "event_name": "device_token_event",
            "device_id": gaData.clientId
          },
          "client_keys": {
            "device_id": gaData.clientId,
            "client_id": gaData.clientId,
            "email": "<USER_EMAIL_IF_EXISTS>",
            "phone": "<USER_PHONE_IF_EXISTS>",
            "loyalty_card_number": "<LOYALTY_CARD_NUMBER_IF_EXISTS>"
          }
        };

        fetch('https://app.neucurrent.com/push/api/v1/device-token/add/', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            Authorization: `${access_token_type} ${access_token}`
          },
          body: JSON.stringify(body)
        })
          .catch(err => {
            console.error(err)
          })
  })
  .catch(err => {
    console.error(err) // handle error or pemission deny
  });

  4. Full example:

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
    import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";
import { getMessaging, getToken } from "firebase/messaging";

const firebaseConfig = {
  apiKey: "",
  authDomain: "",
  projectId: "",
  storageBucket: "",
  messagingSenderId: "",
  appId: "",
  measurementId: "",
};  // use config from the initial Firebase Web App setup

const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);

getToken(messaging, { vapidKey: '<YOUR_PUBLIC_VAPID_KEY_FROM_FIREBASE_INITIAL_SETUP>' })
  .then(token => {
    // send request to the NeuCurrent method for token registartion according to NeuCurrent API Swagger UI. See example below
    const googleAnalyticsData = () => {
        const data = {};
        gtag('get', '<YOUR_GTAG>', 'client_id', clientId => { data.clientId = clientId; })
        return data;
    };

    let gaData = googleAnalyticsData();

    let credentials = {
        username: '<>',
        password: '<>'
    };  // request credentials from the NeuCurrent Team

    fetch('https://app.neucurrent.com/push/api/v1/oauth/rotate-token/', {
      method: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify(credentials)
      })
    .then(async response => {
        let {access_token, access_token_type} = await response.json();
        let body = {
          "device_data": {
            "device_token": token,
            "platform": "WEB",
            "event_name": "device_token_event",
            "device_id": gaData.clientId
          },
          "client_keys": {
            "device_id": gaData.clientId,
            "client_id": gaData.clientId,
            "email": "<USER_EMAIL_IF_EXISTS>",
            "phone": "<USER_PHONE_IF_EXISTS>",
            "loyalty_card_number": "<LOYALTY_CARD_NUMBER_IF_EXISTS>"
          }
        };

        fetch('https://app.neucurrent.com/push/api/v1/device-token/add/', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            Authorization: `${access_token_type} ${access_token}`
          },
          body: JSON.stringify(body)
        })
          .catch(err => {
            console.error(err)
          })
  })
  .catch(err => {
    console.error(err) // handle error or pemission deny
  });

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
    <script type="module">
    import { initializeApp } from "https://www.gstatic.com/firebasejs/9.4.1/firebase-app.js";
    import { getAnalytics } from "https://www.gstatic.com/firebasejs/9.4.1/firebase-analytics.js";
    import { getMessaging, getToken } from "https://www.gstatic.com/firebasejs/9.4.1/firebase-messaging.js";;

    const firebaseConfig = {
      apiKey: "",
      authDomain: "",
      projectId: "",
      storageBucket: "",
      messagingSenderId: "",
      appId: "",
      measurementId: "",
    };  // use config from the initial Firebase Web App setup

    const app = initializeApp(firebaseConfig);
    const analytics = getAnalytics(app);

    getToken(messaging, { vapidKey: '<YOUR_PUBLIC_VAPID_KEY_FROM_FIREBASE_INITIAL_SETUP>' })
      .then(token => {
        // send request to the NeuCurrent method for token registartion according to NeuCurrent API Swagger UI. See example below
        const googleAnalyticsData = () => {
            const data = {};
            gtag('get', '<YOUR_GTAG>', 'client_id', clientId => { data.clientId = clientId; })
            return data;
        };

        let gaData = googleAnalyticsData();

        let credentials = {
            username: '<>',
            password: '<>'
        };  // request credentials from the NeuCurrent Team

        fetch('https://app.neucurrent.com/push/api/v1/oauth/rotate-token/', {
          method: 'POST',
          headers: {'Content-Type': 'application/json'},
          body: JSON.stringify(credentials)
        })
        .then(async response => {
            let {access_token, access_token_type} = await response.json();
            let body = {
              "device_data": {
                "device_token": token,
                "platform": "WEB",
                "event_name": "device_token_event",
                "device_id": gaData.clientId
              },
              "client_keys": {
                "device_id": gaData.clientId,
                "client_id": gaData.clientId,
                "email": "<USER_EMAIL_IF_EXISTS>",
                "phone": "<USER_PHONE_IF_EXISTS>",
                "loyalty_card_number": "<LOYALTY_CARD_NUMBER_IF_EXISTS>"
              }
            };

            fetch('https://app.neucurrent.com/push/api/v1/device-token/add/', {
              method: 'POST',
              headers: {
                'Content-Type': 'application/json',
                Authorization: `${access_token_type} ${access_token}`
              },
              body: JSON.stringify(body)
            });
          })
          .catch(err => {
            console.error(err)
          })
      })
      .catch(err => {
        console.error(err) // handle error or pemission deny
      });
</script>

  5. Create and serve with the app firebase-messaging-sw.js:

    firebase-messaging-sw.js
     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
    importScripts('https://www.gstatic.com/firebasejs/8.2.1/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/8.2.1/firebase-messaging.js');
// For an optimal experience using Cloud Messaging, also add the Firebase SDK for Analytics.
importScripts("https://www.gstatic.com/firebasejs/8.2.1/firebase-analytics.js");

firebase.initializeApp({
  apiKey: "",
  projectId: "",
  messagingSenderId: "",
  appId: "",
});  // use config from the initial Firebase Web App setup

self.addEventListener('push', function(event) {
  let data = event.data.json().notification;
  let options = {
    dir: "ltr",
    body: data.body,
    tag: "",
    image: data.image,
    icon: data.icon,
    badge: data.icon,
    renotify: false,
    actions: JSON.parse(event.data.json().data['gcm.notification.actions']),
    silent: false,
    persistent: true,
    requireInteraction: false,
    sticky: false,
    notificationCloseEvent: true,
    data: {
        options: {
            clickAction: data.click_action
        }
    }
  };
  self.registration.showNotification(data.title, options);
});

self.addEventListener('notificationclick', function(event) {
  event.notification.close(); // Android needs explicit close.
  let url = event.action;
   if (url == '') {  // click on any area on the button except of buttons
    event.notification.close();
    return clients.openWindow(event.notification.data.options.clickAction);
  }

 event.waitUntil(
    clients.matchAll({type: 'window'}).then( windowClients => {
      // Check if there is already a window/tab open with the target URL
      for (var i = 0; i < windowClients.length; i++) {
        var client = windowClients[i];
        if (client.url === url && 'focus' in client) {
          return client.focus();
        }
      }
      // If not, then open the target URL in a new window/tab.
      if (clients.openWindow) {
        return clients.openWindow(url);
      }
    })
  );
});

  6. Congratulations! You've finished the integration process.

Additional sources