ข้ามไปยังเนื้อหา
คู่มือผู้ใช้การสนับสนุน ขอสาธิต เข้าสู่ระบบ
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__"
    });


    // 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

3. การตั้งค่า Native ของ 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 ของคุณ ตั้งค่า key __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

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

4. การตั้งค่า Native ของ 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. Build และรันโปรเจกต์
  2. ไปที่ Pushwoosh Control Panel และส่ง push notification
  3. คุณควรจะเห็นการแจ้งเตือนในแอป

การผสานรวมเพิ่มเติม

Anchor link to

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

Event listeners ของ Push notification

Anchor link to

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

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

event listeners เหล่านี้ ต้อง ลงทะเบียน ก่อน ที่จะเรียก 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

Tags คือคู่ 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

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

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

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