Перейти к содержанию

Сафарі

Налаштування облікового запису розробника

Примітка

Для повного налаштування облікового запису розробника вам потрібен MacBook.

  1. Перейдіть за адресою https://developer.apple.com/account/resources/identifiers/list і створіть новий індентифікатор.
  2. Виберіть "Webite Push IDs" і натисніть "Продовжити".
  3. Вкажіть опис та індентифікатор (бажано використовувати зворотне доменне ім'я додатку) і натисніть "Продовжити".
  4. Отримайте certSigningRequest, відкривши Keychain.app > Keychain Access > Certificate Assistant > Request a Certificate From a Certificate Authority..., заповніть поля та натисніть "Продовжити".
  5. Поверніться до створеного Website Push ID і натисніть "Створити сертифікат", щоб завантажити сертифікат з попереднього кроку. Після декількох невеликих кроків ви зможете завантажити файл website_aps_production.cer.
  6. Додайте завантажений файл сертифіката до Keychain.app і натисніть "Експортувати 2 елементи...", щоб отримати сертифікат і приватний ключ (.p12).

Front-end integration

  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. Налаштуйте скрипт APNS: 

     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
    <скрипт
  const googleAnalyticsData = () => {}; const data = {}; const data = {}; const
    const data = {};
    gtag('get', '<YOUR_GTAG>', 'client_id', clientId => { data.clientId = clientId; })
    повернути дані;
  };

  const requestPerm = () => {
    if ('safari' in window && 'pushNotification' in window.safari) {
      let permissionData = window.safari.pushNotification.permission('web.com.artemHrytsenko.fcmflutternotification');
      checkRemotePermission(permissionData);
    }
  };

  let gaData = googleAnalyticsData();

  const checkRemotePermission = (permissionData) => { } }.
    if (permissionData.permission === 'default') { { window.safari.pushRemotePermission = (permissionData.permission === 'default')
      window.safari.pushNotification.requestPermission(
        'https://app.neucurrent.com/push/api', // URL веб-сервісу.
        '<WEBSITE_PUSH_ID>',
        {
          "retailer_name": "<RETAILER_NANE>",
          "назва_сайту": "<WEBSITE_TITLE>",
          "дозволені_домени": '["https://app.neucurrent.com"]'',
          "url_format_string": "https://app.neucurrent.com/push/api/v2",
          "url_сервісу": "https://app.neucurrent.com/push/api",
          "device_id": gaData.clientId

        },
        checkRemotePermission
      );
    } 
    else if (permissionData.permission === 'denied') {
      // Користувач відмовився.
      console.log('denied')
    } 
    else if (permissionData.permission === 'granted') { // Користувачеві дозволено використовувати токен.
      // permissionData.deviceToken тепер можна використовувати.
      // надсилаємо запит до методу NeuCurrent на реєстрацію токену згідно Swagger UI API NeuCurrent. Дивіться приклад нижче
    }
  };
</script>

    Надсилання запиту до 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
    else if (permissionData.permission === 'granted') {
  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": permissionData.deviceToken,
          "платформа": "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)
        })
    })
}

  3. Повний приклад: 

     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
76
77
78
79
80
81
    <скрипт
  const googleAnalyticsData = () => {}; const data = {}; const
    const data = {};
    gtag('get', '<YOUR_GTAG>', 'client_id', clientId => { data.clientId = clientId; })
    повернути дані;
  };

  const requestPerm = () => { {\i1
    if ('safari' in window && 'pushNotification' in window.safari) {
      let permissionData = window.safari.pushNotification.permission('<WEBSITE_PUSH_ID>');
      checkRemotePermission(permissionData);
    }
  };

  let gaData = googleAnalyticsData();

  const checkRemotePermission = (permissionData) => { } }.
    if (permissionData.permission === 'default') { { window.safari.pushRemotePermission = (permissionData.permission === 'default')
      window.safari.pushNotification.requestPermission(
        'https://app.neucurrent.com/push/api',
        '<WEBSITE_PUSH_ID>',
        {
          "retailer_name": "<RETAILER_NANE>",
          "назва_сайту": "<WEBSITE_TITLE>",
          "дозволені_домени": '["https://app.neucurrent.com"]'',
          "url_format_string": "https://app.neucurrent.com/push/api/v2",
          "url_сервісу": "https://app.neucurrent.com/push/api",
          "device_id": gaData.clientId
        },
        checkRemotePermission
      );
    } 
    else if (permissionData.permission === 'denied') {
      // Користувач відмовився.
      console.log('denied')

    }
    else if (permissionData.permission === 'granted') { {
      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": permissionData.deviceToken,
              "платформа": "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)
            })
        })
    }
  };
</script>

  4. Вітаємо! Ви завершили процес інтеграції.

Інтеграція з NeuCurrent

Будь ласка, надайте команді NeuCurrent сертифікат *.p12, пароль до нього та набір іконок (icon_16x16.png, icon_16x16@2x.png, icon_32x32.png, icon_32x32@2x.png, icon_128x128.png, icon_128x128@2x.png).