Веб

Перш ніж запускати веб-інтеграцію, переконайтеся, що налаштування Налаштування - Firebase було повністю завершено.

  1. Налаштуйте Google Analytics на головній сторінці:

    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. Додати Firebase SDK:

    1. Якщо ви використовуєте npm і модульний пакувальник, такий як Webpack або Rollup, ви можете встановити Firebase SDK за допомогою: 

      npm install firebase

    2. Ініціалізуйте Firebase SDK за допомогою коду:

     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: "",
}; // використовувати config з початкового налаштування веб-застосунку Firebase

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: "",
}; // використовувати config з початкового налаштування веб-застосунку Firebase

const app = initializeApp(firebaseConfig);

    Помістіть скрипт в 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: "",
  }; // використовувати config з початкового налаштування веб-застосунку Firebase

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

     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: "",
  }; // використовувати config з початкового налаштування веб-застосунку Firebase

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

  3. Налаштування хмарних повідомлень:

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

getToken(messaging, { vapidKey: '<ВАШ_ПУБЛІЧНИЙ_VAPID_KEY_FROM_FIREBASE_INITIAL_SETUP>' })
  .then(token => {
    // надсилаємо запит до методу NeuCurrent на реєстрацію токену згідно з інтерфейсом NeuCurrent API Swagger UI. Дивіться приклад нижче
  })
  .catch(err => {
  // обробити помилку або відмовити у видачі дозволу 
  });

    Надсилання запиту до NeuCurrent API

    Зверніть увагу, що в коді ви повинні відправити HTTP-запит до NeuCurrent API з отриманим токеном пристрою. Дивіться приклад нижче:

     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
    getToken(messaging, { vapidKey: '<Ваш_PUBLIC_VAPID_KEY_FROM_FIREBASE_INITIAL_SETUP>' })
  .then(token => {
    // надсилаємо запит до методу NeuCurrent на реєстрацію токену згідно з інтерфейсом NeuCurrent API Swagger UI. Дивіться приклад нижче
    const googleAnalyticsData = () => {}; const data = {}; const token = {}; const data = {}; const
        const data = {};
        gtag('get', '<YOUR_GTAG>', 'client_id', clientId => { data.clientId = clientId; })
        повернути дані;
    };


    let gaData = googleAnalyticsData();

    let credentials = {{}.
        ім'я користувача: '<>',
        password: '<>'
    }; // запитуємо облікові дані у команди NeuCurrent

    fetch('https://app.neucurrent.com/push/api/v1/oauth/rotate-token/', {
      метод: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify(credentials)
    })
      .then(async response => {
        let {токен_доступу, тип_токена_доступу} = await response.json();
        let body = {
          "device_data": {
            "device_token": token,
            "платформа": "WEB",
            "event_name": "device_token_event",
            "device_id": gaData.clientId
          },
          "client_keys": {
            "device_id": gaData.clientId,
            "client_id": gaData.clientId,
            "email": "<EMAIL_КОРИСТУВАЧА_ЯКЩО_ІСНУЄ>",
            "phone": "<ТЕЛЕФОН_КОРИСТУВАЧА_ЯКЩО_ІСНУЄ>",
            "номер_картки_лояльності": "<НОМЕР_КАРТКИ_ЛОЯЛЬНОСТІ_ЯКЩО_ІСНУЄ>"
          }

        };

        fetch('https://app.neucurrent.com/push/api/v1/device-token/add/', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            Авторизація: `${access_token_type} ${access_token}`
          },
          body: JSON.stringify(body)
        })
          .catch(err => {
            console.error(err)
          })
  })
  .catch(err => {
    console.error(err) // обробити помилку або відмовити в дозволі
  });
    1. Повний приклад:
     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
    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: "",
}; // використовувати config з початкового налаштування веб-застосунку Firebase

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

getToken(messaging, { vapidKey: '<YOUR_PUBLIC_VAPID_KEY_FROM_FIREBASE_INITIAL_SETUP>' })
  .then(token => {
    // надсилаємо запит до методу NeuCurrent на реєстрацію токену згідно з інтерфейсом NeuCurrent API Swagger UI. Дивіться приклад нижче
    const googleAnalyticsData = () => {}; const data = {}; const token = {}; const data = {}; const
        const data = {};
        gtag('get', '<YOUR_GTAG>', 'client_id', clientId => { data.clientId = clientId; })
        повернути дані;
    };


    let gaData = googleAnalyticsData();

    let credentials = {{}.
        ім'я користувача: '<>',
        password: '<>'
    }; // запитуємо облікові дані у команди NeuCurrent

    fetch('https://app.neucurrent.com/push/api/v1/oauth/rotate-token/', {
      метод: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify(credentials)
      })
    .then(async response => {
        let {токен_доступу, тип_токена_доступу} = await response.json();
        let body = {
          "device_data": {
            "device_token": token,
            "платформа": "WEB",
            "event_name": "device_token_event",
            "device_id": gaData.clientId
          },
          "client_keys": {
            "device_id": gaData.clientId,
            "client_id": gaData.clientId,
            "email": "<EMAIL_КОРИСТУВАЧА_ЯКЩО_ІСНУЄ>",
            "phone": "<ТЕЛЕФОН_КОРИСТУВАЧА_ЯКЩО_ІСНУЄ>",
            "номер_картки_лояльності": "<НОМЕР_КАРТКИ_ЛОЯЛЬНОСТІ_ЯКЩО_ІСНУЄ>"
          }
        };

        fetch('https://app.neucurrent.com/push/api/v1/device-token/add/', {
          метод: 'POST',
          headers: {
            'Content-Type': 'application/json',
            Авторизація: `${access_token_type} ${access_token}`
          },
          body: JSON.stringify(body)
        })
          .catch(err => {
            console.error(err)
          })
  })
  .catch(err => {
    console.error(err) // обробити помилку або відмовити в дозволі
  });


     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
75
    <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: "",
    }; // використовувати config з початкового налаштування веб-застосунку Firebase

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

    getToken(messaging, { vapidKey: '<YOUR_PUBLIC_VAPID_KEY_FROM_FIREBASE_INITIAL_SETUP>' })
      .then(token => {
        // надсилаємо запит до методу NeuCurrent на реєстрацію токену згідно з інтерфейсом NeuCurrent API Swagger UI. Дивіться приклад нижче
        const googleAnalyticsData = () => {}; const data = {}; const token = {}; const data = {}; const
            const data = {};
            gtag('get', '<YOUR_GTAG>', 'client_id', clientId => { data.clientId = clientId; })
            повернути дані;
        };


        let gaData = googleAnalyticsData();

        let credentials = {{}.
            ім'я користувача: '<>',
            password: '<>'
        }; // запитуємо облікові дані у команди NeuCurrent

        fetch('https://app.neucurrent.com/push/api/v1/oauth/rotate-token/', {
          метод: 'POST',
          headers: {'Content-Type': 'application/json'},
          body: JSON.stringify(credentials)
        })
        .then(async response => {
            let {токен_доступу, тип_токена_доступу} = await response.json();
            let body = {
              "device_data": {
                "device_token": token,
                "платформа": "WEB",
                "event_name": "device_token_event",
                "device_id": gaData.clientId
              },
              "client_keys": {
                "device_id": gaData.clientId,
                "client_id": gaData.clientId,
                "email": "<EMAIL_КОРИСТУВАЧА_ЯКЩО_ІСНУЄ>",
                "phone": "<ТЕЛЕФОН_КОРИСТУВАЧА_ЯКЩО_ІСНУЄ>",
                "номер_картки_лояльності": "<НОМЕР_КАРТКИ_ЛОЯЛЬНОСТІ_ЯКЩО_ІСНУЄ>"
              }
            };

            fetch('https://app.neucurrent.com/push/api/v1/device-token/add/', {
              метод: 'POST',
              headers: {
                'Content-Type': 'application/json',
                Авторизація: `${access_token_type} ${access_token}`
              },
              body: JSON.stringify(body)
            });
          })
          .catch(err => {
            console.error(err)
          })
      })
      .catch(err => {
        console.error(err) // обробити помилку або відмовити в дозволі
      });
</script>
    5. Створіть та запустіть додаток 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
62
    importScripts('https://www.gstatic.com/firebasejs/8.2.1/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/8.2.1/firebase-messaging.js');
// Для оптимальної роботи з Cloud Messaging також додайте Firebase SDK для аналітики.
importScripts("https://www.gstatic.com/firebasejs/8.2.1/firebase-analytics.js");

firebase.initializeApp({
  apiKey: "",
  projectId: "",
  messagingSenderId: "",
  appId: "",
}); // використовуємо конфіг з початкового налаштування Firebase Web App

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 потребує явного закриття.
  let url = event.action;
   if (url == '') { // клік на будь-якій області на кнопці, окрім кнопок
    event.notification.close();
    return clients.openWindow(event.notification.data.options.clickAction);
  }

 event.waitUntil(
    clients.matchAll({type: 'window'}).then( windowClients => {
      // Перевіряємо, чи вже відкрито вікно/вкладка з цільовим URL
      for (var i = 0; i < windowClients.length; i++) {
        var client = windowClients[i];
        if (client.url === url && 'focus' in client) {
          return client.focus();
        }
      }
      // Якщо ні, то відкриваємо цільовий URL у новому вікні/вкладці.
      if (clients.openWindow) {
        return clients.openWindow(url);
      }
    })
  );
});
    6. Вітаємо! Ви завершили процес інтеграції.

Додаткові джерела