logoDokumen
Cari

Panduan Integrasi

Deskripsi Dukungan Pengguna Luar Negeri di Setiap Channel

Tipe Channel Pengguna di Luar Negeri Pengguna di Tiongkok Daratan Catatan
EngageLab Didukung Didukung Didukung secara default oleh SDK
W3C Didukung Didukung /

Uji Coba Cepat

Demo integrasi dan contoh Engagelab WebPush

Persiapan Pra-Integrasi

  1. Siapkan nama domain layanan web https yang dapat diakses, untuk keperluan pengujian dan debugging. Web push tidak mendukung debugging lokal atau berjalan di non-https.
  2. Kunjungi Engagelab WebPush, atur domain situs web pada Pengaturan Integrasi -> web dan isi domain layanan web https yang telah disiapkan.
    Panduan pengaturan domain WebPush

Tips

Dokumen ini adalah panduan integrasi standar untuk MTpush Web SDK.

Deskripsi

Web SDK menyediakan kerangka kerja pengembangan push untuk aplikasi web berbasis notifikasi kernel dan websocket dari browser, serta antarmuka API yang ringkas untuk memudahkan aplikasi pihak ketiga mengintegrasikan fungsi push dengan cepat. Notifikasi kernel browser mendukung browser utama seperti Edge, Chrome, Safari, Firefox, Opera, dan websocket mendukung sebagian besar browser utama.

Layanan EngageLab WebPush mendukung notifikasi push PWA. Anda perlu menggunakan Web SDK dari EngageLab WebPush untuk mengintegrasikan fungsi Web Push ke aplikasi PWA Anda dan mengikuti contoh kode pada dokumentasi untuk mendaftarkan Service Worker serta menginisialisasi Web Push. Setelah integrasi selesai, Anda dapat menggunakan API EngageLab WebPush untuk mengirim notifikasi push ke pengguna aplikasi PWA Anda.
Selengkapnya lihat dokumentasi

Skenario Utama:

Notifikasi dan pesan yang dapat dikustomisasi.

Isi Paket Terkompresi

  • contoh
    • Halaman web demo penggunaan dasar MTpush SDK. Dapat dijadikan referensi.

Mendapatkan Informasi Aplikasi

Buat aplikasi di konsol. Setelah aplikasi dibuat, AppKey akan otomatis dihasilkan sebagai identitas aplikasi. Info lebih lanjut: Pengaturan aplikasi.

Integrasi SDK

Kunjungi Engagelab WebPush dan unduh SDK. Konfigurasikan file sdk js seperti berikut di halaman web Anda:

<script type="text/javascript" src="./webPushSdk.min.2.1.2.js"></script>
              
              <script type="text/javascript" src="./webPushSdk.min.2.1.2.js"></script>

            
Tampilkan blok kode ini di jendela mengambang

Setelah file sdk js diintegrasikan, objek global MTpushInterface pada Window dapat digunakan.

Tips

Paket mencakup sw.xxx.js. File ini adalah service worker untuk menerima pesan. SDK akan memuat file ini dari direktori root secara default. Cakupan terbesar service worker adalah lokasi file worker (misal, jika skrip sw.js ada di /js/sw.js, hanya bisa mengontrol URL di bawah /js/). Jadi, gunakan konfigurasi default sebisa mungkin dan letakkan di root situs web. Jika harus disimpan di CDN pihak ketiga, gunakan header Service-Worker-Allowed di server untuk menentukan cakupan maksimal worker.
              
              Paket mencakup sw.xxx.js. File ini adalah service worker untuk menerima pesan.
SDK akan memuat file ini dari direktori root secara default.
Cakupan terbesar service worker adalah lokasi file worker (misal, jika skrip sw.js ada di /js/sw.js, hanya bisa mengontrol URL di bawah /js/).
Jadi, gunakan konfigurasi default sebisa mungkin dan letakkan di root situs web.
Jika harus disimpan di CDN pihak ketiga, gunakan header Service-Worker-Allowed di server untuk menentukan cakupan maksimal worker.

            
Tampilkan blok kode ini di jendela mengambang

Inisialisasi SDK

Membuat user_str

Disarankan menggunakan fingerprint browser untuk menghasilkan user_str unik agar mencegah registrasi pengguna tidak valid:

// Dihilangkan: kode fingerprint Canvas, WebGL, dan plugin (tidak berubah) const visitorId = getFingerprint(); console.log('user_str', visitorId);
              
              // Dihilangkan: kode fingerprint Canvas, WebGL, dan plugin (tidak berubah)
const visitorId = getFingerprint();
console.log('user_str', visitorId);

            
Tampilkan blok kode ini di jendela mengambang

Contoh Kode

// Daftarkan event listener sebelum inisialisasi // Callback jika channel Aurora terputus MTpushInterface.mtPush.onDisconnect(function () { console.log("onDisconnect"); }); // Menerima pesan push (Web Push, channel vendor browser) MTpushInterface.onMsgReceive((msgData) => { // Struktur msgData: {data:{xxx},type:0} type:0 Aurora, 1 channel sistem console.log("Pesan push diterima:", msgData); }); // Inisialisasi push MTpushInterface.init({ appkey: "", // Wajib, lihat info aplikasi di atas user_str: visitorId, // Wajib, pengenal pengguna fail(err) { console.log("Pengaturan push online gagal", err); }, success(data) { console.log("Pengaturan push online berhasil", data); }, webPushcallback(code, tip) { console.log("Kode status dan pesan pengguna", code, tip); }, swUrl: '', // Default: "/sw.min." + sdkEnv.version + ".js". Path file service worker, harus di bawah domain saat ini dan menentukan cakupan worker. canGetInfo(data) { // Pada tahap ini, data konfigurasi notifikasi dapat diambil. Setelah callback ini, RegId dapat diperoleh. console.log(data); // Info konfigurasi terkait console.log("RegId diperoleh", MTpushInterface.getRegistrationID()); }, custom: (fuc) => { // Jika menggunakan prompt kustom, panggil fuc() manual untuk meminta izin notifikasi. Fungsi permintaan izin hanya tersedia melalui 'custom'. // fuc() memicu permintaan izin notifikasi. }, });
              
                // Daftarkan event listener sebelum inisialisasi
  // Callback jika channel Aurora terputus
  MTpushInterface.mtPush.onDisconnect(function () {
    console.log("onDisconnect");
  });
  // Menerima pesan push (Web Push, channel vendor browser)
  MTpushInterface.onMsgReceive((msgData) => {
    // Struktur msgData: {data:{xxx},type:0} type:0 Aurora, 1 channel sistem
    console.log("Pesan push diterima:", msgData);
  });
  // Inisialisasi push
  MTpushInterface.init({
    appkey: "", // Wajib, lihat info aplikasi di atas
    user_str: visitorId, // Wajib, pengenal pengguna
    fail(err) {
      console.log("Pengaturan push online gagal", err);
    },
    success(data) {
      console.log("Pengaturan push online berhasil", data);
    },
    webPushcallback(code, tip) {
      console.log("Kode status dan pesan pengguna", code, tip);
    },
    swUrl: '', // Default: "/sw.min." + sdkEnv.version + ".js". Path file service worker, harus di bawah domain saat ini dan menentukan cakupan worker.
    canGetInfo(data) {
      // Pada tahap ini, data konfigurasi notifikasi dapat diambil. Setelah callback ini, RegId dapat diperoleh.
      console.log(data); // Info konfigurasi terkait
      console.log("RegId diperoleh", MTpushInterface.getRegistrationID());
    },
    custom: (fuc) => {
      // Jika menggunakan prompt kustom, panggil fuc() manual untuk meminta izin notifikasi. Fungsi permintaan izin hanya tersedia melalui 'custom'.
      // fuc() memicu permintaan izin notifikasi.
    },
  });

            
Tampilkan blok kode ini di jendela mengambang

API Lainnya

Untuk detail penggunaan API lainnya, silakan lihat dokumentasi antarmuka: Web SDK API.

Menjalankan Demo

Contoh dalam paket adalah demo API. Anda dapat langsung menjalankannya di browser untuk pengujian.

icon
Hubungi Sales