ข้ามไปยังเนื้อหา
คู่มือผู้ใช้การสนับสนุน ขอสาธิต เข้าสู่ระบบ
Pushwoosh.com

คู่มือการผสานการทำงานพื้นฐานของ Cordova SDK

ส่วนนี้มีข้อมูลเกี่ยวกับวิธีการผสานการทำงาน Pushwoosh Cordova SDK เข้ากับแอปพลิเคชันของคุณ

ข้อกำหนดเบื้องต้น

Anchor link to

ในการผสานการทำงาน Pushwoosh Cordova SDK เข้ากับแอปของคุณ คุณจะต้องมีสิ่งต่อไปนี้:

ขั้นตอนการผสานการทำงาน

Anchor link to

1. เพิ่ม Dependency ของ Pushwoosh Cordova SDK

Anchor link to

เพิ่ม dependency ของ Pushwoosh Cordova SDK ไปยังโปรเจกต์ของคุณ:

Terminal window
cordova plugin add pushwoosh-cordova-plugin

2. การเริ่มต้น Cordova SDK

Anchor link to

ใน root component ของไฟล์ index.js ของคุณ ให้เพิ่มโค้ดต่อไปนี้ภายใน event handler deviceready ทำตามขั้นตอนตามลำดับที่ให้ไว้อย่างเคร่งครัด:

index.js
document.addEventListener('deviceready', function() {
    var pushwoosh = cordova.require("pushwoosh-cordova-plugin.PushNotification");


    // 1. Register notification callbacks before initialization
    document.addEventListener('push-receive', function(event) {
        var notification = event.notification;
        console.log("Push received: " + JSON.stringify(notification));
    });


    document.addEventListener('push-notification', function(event) {
        var notification = event.notification;
        console.log("Push opened: " + JSON.stringify(notification));
    });


    // 2. Initialize Pushwoosh
    pushwoosh.onDeviceReady({
        appid: "__YOUR_APP_ID__",
        projectid: "__YOUR_FCM_SENDER_ID__"
    });


    // 3. Register the device to receive push notifications
    pushwoosh.registerDevice(
        function(status) {
            var pushToken = status.pushToken;
            // Handle successful registration
        },
        function(status) {
            // Handle registration error
        }
    );
}, false);

โดยที่:

  • __YOUR_APP_ID__ คือ application code จาก Pushwoosh Control Panel
  • __YOUR_FCM_SENDER_ID__ คือ project number ของ Firebase จาก Firebase Console

3. การตั้งค่าแบบเนทีฟสำหรับ iOS

Anchor link to

3.1 Capabilities

Anchor link to

เพื่อเปิดใช้งาน Push Notifications ในโปรเจกต์ของคุณ คุณต้องเพิ่ม capabilities บางอย่าง

ในส่วน Signing & Capabilities ให้เพิ่ม capabilities ต่อไปนี้:

  • Push Notifications
  • Background Modes หลังจากเพิ่ม capability นี้แล้ว ให้เลือกช่องสำหรับ Remote notifications

หากคุณต้องการใช้ Time Sensitive Notifications (iOS 15+) ให้เพิ่ม capability Time Sensitive Notifications ด้วย

3.2 Info.plist

Anchor link to

ใน Runner/Info.plist ของคุณ ให้ตั้งค่าคีย์ __PUSHWOOSH_DEVICE_API_TOKEN__ เป็น Pushwoosh Device API Token:

info.plist
<key>Pushwoosh_API_TOKEN</key>
<string>__PUSHWOOSH_DEVICE_API_TOKEN__</string>

3.3 การติดตามการส่งข้อความ

Anchor link to

คุณต้องเพิ่ม target Notification Service Extension ไปยังโปรเจกต์ของคุณ นี่เป็นสิ่งจำเป็นสำหรับการติดตามการส่งที่แม่นยำและฟีเจอร์ต่างๆ เช่น Rich Media บน iOS

ทำตาม ขั้นตอนในคู่มือเนทีฟ เพื่อเพิ่ม extension target และโค้ด Pushwoosh ที่จำเป็นภายในนั้น

4. การตั้งค่าแบบเนทีฟสำหรับ Android

Anchor link to

4.1 ติดตั้ง dependencies

Anchor link to

ตรวจสอบให้แน่ใจว่าได้เพิ่ม dependencies และปลั๊กอินที่จำเป็นลงในสคริปต์ Gradle ของคุณแล้ว:

เพิ่มปลั๊กอิน Google Services Gradle ไปยัง dependencies ของ build.gradle ระดับโปรเจกต์ของคุณ:

android/build.gradle
buildscript {
  dependencies {
    classpath 'com.google.gms:google-services:4.3.15'
  }
}

ใช้ปลั๊กอินในไฟล์ build.gradle ระดับแอปของคุณ:

app/build.gradle
apply plugin: 'com.google.gms.google-services'

4.2 เพิ่มไฟล์การกำหนดค่า Firebase

Anchor link to

วางไฟล์ google-services.json ลงในโฟลเดอร์ android/app ในไดเรกทอรีโปรเจกต์ของคุณ

4.3 เพิ่ม metadata ของ Pushwoosh

Anchor link to

ใน main/AndroidManifest.xml ของคุณ ให้เพิ่ม Pushwoosh Device API Token ภายในแท็ก <application>:

AndroidManifest.xml
<meta-data android:name="com.pushwoosh.apitoken" android:value="__YOUR_DEVICE_API_TOKEN__" />

สำคัญ: ตรวจสอบให้แน่ใจว่าได้ให้สิทธิ์การเข้าถึงของ token แก่แอปที่ถูกต้องใน Pushwoosh Control Panel ของคุณ เรียนรู้เพิ่มเติม

5. รันโปรเจกต์

Anchor link to
  1. บิวด์และรันโปรเจกต์
  2. ไปที่ Pushwoosh Control Panel และ ส่ง push notification
  3. คุณควรเห็นการแจ้งเตือนในแอป

การผสานการทำงานเพิ่มเติม

Anchor link to

ณ จุดนี้ คุณได้ผสานการทำงาน SDK และสามารถส่งและรับ push notification ได้แล้ว ตอนนี้เรามาดูฟังก์ชันการทำงานหลักกัน

Event listener ของ Push notification

Anchor link to

ใน Pushwoosh SDK มี event listener สองตัวที่ออกแบบมาเพื่อจัดการ push notification:

  • event push-receive จะถูกทริกเกอร์เมื่อได้รับ push notification ขณะที่แอปอยู่ในเบื้องหน้า (foreground)
  • event push-notification จะถูกทริกเกอร์เมื่อผู้ใช้เปิดการแจ้งเตือน

Event listener เหล่านี้ ต้อง ลงทะเบียน ก่อน ที่จะเรียก onDeviceReady() ดังที่แสดงใน ขั้นตอนการเริ่มต้นด้านบน คุณสามารถปรับแต่งตรรกะของ handler ให้เหมาะกับความต้องการของคุณได้:

index.js
// Register before onDeviceReady()
document.addEventListener('push-receive', function(event) {
    var message = event.notification.message;
    var payload = event.notification.userdata;
    console.log("Push received: " + message);
    // Add your custom logic here
});


document.addEventListener('push-notification', function(event) {
    var message = event.notification.message;
    var payload = event.notification.userdata;
    console.log("Push accepted: " + message);
    // Add your custom logic here (e.g., navigate to a specific screen)
});

การกำหนดค่าผู้ใช้

Anchor link to

ด้วยการมุ่งเน้นไปที่พฤติกรรมและความชอบของผู้ใช้แต่ละราย คุณสามารถส่งมอบเนื้อหาที่ปรับให้เป็นส่วนตัว ซึ่งนำไปสู่ความพึงพอใจและความภักดีของผู้ใช้ที่เพิ่มขึ้น

class Registration {
  afterUserLogin(user) {


    // Set user ID
    pushwoosh.setUserId(user.getId());


    // Setting additional user information as tags for Pushwoosh
    pushwoosh.setTags({
      "age": user.getAge(),
      "name": user.getName(),
      "last_login": user.getLastLoginDate()
    });
  }
}

Tags

Anchor link to

Tag คือคู่ของ key-value ที่กำหนดให้กับผู้ใช้หรืออุปกรณ์ ช่วยให้สามารถแบ่งกลุ่มตามคุณลักษณะต่างๆ เช่น ความชอบหรือพฤติกรรม ทำให้สามารถส่งข้อความแบบกำหนดเป้าหมายได้

class UpdateUser {
  afterUserUpdateProfile(user) {


    // Set list of favorite categories
    pushwoosh.setTags({
      "favorite_categories": user.getFavoriteCategoriesList()
    });


    // Set payment information
    pushwoosh.setTags({
      "is_subscribed": user.isSubscribed(),
      "payment_status": user.getPaymentStatus(),
      "billing_address": user.getBillingAddress()
    });
  }
}

Events

Anchor link to

Event คือการกระทำหรือเหตุการณ์ที่เกิดขึ้นโดยเฉพาะของผู้ใช้ภายในแอป ซึ่งสามารถติดตามเพื่อวิเคราะห์พฤติกรรมและทริกเกอร์ข้อความหรือการกระทำที่สอดคล้องกันได้

class Registration {


  // Track login event
  afterUserLogin(user) {
    pushwoosh.postEvent("login", {
      "name": user.getName(),
      "last_login": user.getLastLoginDate()
    });
  }


  // Track purchase event
  afterUserPurchase(product) {
    pushwoosh.postEvent("purchase", {
      "product_id": product.getId(),
      "product_name": product.getName(),
      "price": product.getPrice(),
      "quantity": product.getQuantity()
    });
  }
}

การแก้ไขปัญหา

Anchor link to

หากคุณพบปัญหาใดๆ ในระหว่างกระบวนการผสานการทำงาน โปรดอ้างอิงส่วน การสนับสนุนและชุมชน