หน้านี้ได้รับการแปลโดย Cloud Translation API
Switch to English

ส่งข้อความทดสอบไปยังแอปที่มีพื้นหลัง

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

ตั้งค่า SDK

หากคุณยังไม่ได้ เพิ่ม Firebase ให้กับโครงการ JavaScript ของคุณ

เข้าถึงโทเค็นการลงทะเบียน

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

โทเค็นการลงทะเบียนอาจเปลี่ยนแปลงเมื่อ:

  • เว็บแอปพลิเคชันจะลบโทเค็นการลงทะเบียน
  • ผู้ใช้ล้างข้อมูลเบราว์เซอร์ ในกรณีนี้โทร getToken เพื่อดึงโทเค็นใหม่

ดึงโทเค็นการลงทะเบียนปัจจุบัน

เมื่อคุณต้องการดึงโทเค็นปัจจุบันให้โทร getToken หากไม่ได้รับอนุญาตการแจ้งเตือนวิธีนี้จะถามผู้ใช้สำหรับสิทธิ์การแจ้งเตือน มิฉะนั้นจะส่งคืนโทเค็นหรือปฏิเสธสัญญาเนื่องจากข้อผิดพลาด

บริการส่งข้อความต้องใช้ไฟล์ firebase-messaging-sw.js ยกเว้นว่าคุณมีไฟล์ firebase-messaging-sw.js แล้วให้สร้างไฟล์ว่างที่มีชื่อนั้นและวางไว้ในรูทโดเมนของคุณก่อนดึงโทเค็น คุณสามารถเพิ่มเนื้อหาที่มีความหมายลงในไฟล์ในภายหลังในกระบวนการตั้งค่าไคลเอนต์

วิธีดึงโทเค็นปัจจุบัน:

// Get Instance ID token. Initially this makes a network call, once retrieved
// subsequent calls to getToken will return from cache.
messaging.getToken().then((currentToken) => {
  if (currentToken) {
    sendTokenToServer(currentToken);
    updateUIForPushEnabled(currentToken);
  } else {
    // Show permission request.
    console.log('No Instance ID token available. Request permission to generate one.');
    // Show permission UI.
    updateUIForPushPermissionRequired();
    setTokenSentToServer(false);
  }
}).catch((err) => {
  console.log('An error occurred while retrieving token. ', err);
  showToken('Error retrieving Instance ID token. ', err);
  setTokenSentToServer(false);
});

ตรวจสอบการรีเฟรชโทเค็น

การเรียกกลับของ onTokenRefresh เกิดขึ้นทุกครั้งที่มีการสร้างโทเค็นใหม่ดังนั้นการเรียกใช้ getToken ในบริบทจะทำให้แน่ใจได้ว่าคุณกำลังเข้าถึงโทเค็นการลงทะเบียนปัจจุบันและพร้อมใช้งาน

// Callback fired if Instance ID token is updated.
messaging.onTokenRefresh(() => {
  messaging.getToken().then((refreshedToken) => {
    console.log('Token refreshed.');
    // Indicate that the new Instance ID token has not yet been sent to the
    // app server.
    setTokenSentToServer(false);
    // Send Instance ID token to app server.
    sendTokenToServer(refreshedToken);
    // ...
  }).catch((err) => {
    console.log('Unable to retrieve refreshed token ', err);
    showToken('Unable to retrieve refreshed token ', err);
  });
});

หลังจากที่คุณได้รับโทเค็นแล้วให้ส่งไปยังเซิร์ฟเวอร์แอปของคุณและจัดเก็บโดยใช้วิธีที่คุณต้องการ คุณสามารถใช้ API เซิร์ฟเวอร์ ID อินสแตนซ์เพื่อ รับข้อมูลเกี่ยวกับการสมัครสมาชิก

ส่งข้อความแจ้งเตือนการทดสอบ

  1. ติดตั้งและเรียกใช้แอปบนอุปกรณ์เป้าหมาย

  2. ตรวจสอบว่าแอปอยู่ในพื้นหลังของอุปกรณ์

  3. เปิดเครื่องมือการ แจ้งเตือน แล้วเลือกการ แจ้งเตือนใหม่

  4. ป้อนข้อความ

  5. เลือก ส่งข้อความทดสอบ

  6. ในฟิลด์ที่มีข้อความ เพิ่มโทเค็นการลงทะเบียน FCM ให้ป้อนโทเค็นการลงทะเบียนที่คุณได้รับในส่วนก่อนหน้าของคู่มือนี้

  7. คลิก ทดสอบ

หลังจากที่คุณคลิก ทดสอบ อุปกรณ์ไคลเอ็นต์เป้าหมาย (ที่มีแอปในพื้นหลัง) ควรได้รับการแจ้งเตือนในเบราว์เซอร์

เพิ่มคุณสมบัติการพุชของเว็บไปยังเพย์โหลดการแจ้งเตือน

ด้วย HTTP v1 API คุณสามารถระบุตัวเลือกการแจ้งเตือนเพิ่มเติมเป็น วัตถุ JSON ที่มีคุณสมบัติที่ถูกต้องจาก API การแจ้งเตือนของเว็บ ถ้าฟิลด์ title และ body ในวัตถุนี้มีอยู่ให้แทนที่ฟิลด์ google.firebase.fcm.v1.Notification.body และ google.firebase.fcm.v1.Notification.title เทียบเท่า

คำขอ HTTP POST

 POST https://fcm.googleapis.com/v1/projects/myproject-b5ae1/messages:send HTTP/1.1

Content-Type: application/json
Authorization: Bearer ya29.ElqKBGN2Ri_Uz...PbJ_uNasm

{
  "message": {
    "token" : <token of destination app>,
    "notification": {
      "title": "FCM Message",
      "body": "This is a message from FCM"
    },
    "webpush": {
      "headers": {
        "Urgency": "high"
      },
      "notification": {
        "body": "This is a message from FCM to web",
        "requireInteraction": "true",
        "badge": "/badge-icon.png"
      }
    }
  }
}
 

ด้วยคำขอนี้เว็บไคลเอ็นต์เป้าหมาย (รวมถึงเบราว์เซอร์ที่รองรับที่ทำงานบน Android) จะได้รับข้อความแจ้งเตือนที่มีลำดับความสำคัญสูงและยังคงใช้งานได้จนกว่าผู้ใช้จะโต้ตอบกับมัน มันมีเขตข้อมูล:

  • หัวข้อ: ข้อความ FCM
  • เนื้อหา: นี่คือข้อความจาก FCM ไปยังเว็บ
  • RequireInteraction: true
  • ป้ายสถานะ: /badge-icon.png

แอพเนทีฟสำหรับ Android และ iOS (ซึ่งไม่ใช้การแทนที่เว็บ) ได้รับข้อความแจ้งเตือนที่มีลำดับความสำคัญตามปกติด้วย:

  • หัวข้อ: ข้อความ FCM
  • เนื้อหา: นี่คือข้อความจาก FCM

โปรดทราบว่า RequireInteraction ในปัจจุบันมีการสนับสนุนบางส่วนเท่านั้นในเบราว์เซอร์ นักพัฒนาควรตรวจสอบข้อมูลจำเพาะของ Web Notification API เพื่อตรวจสอบความถูกต้องของแพลตฟอร์มและเบราว์เซอร์

ม้วน

 curl -X POST -H "Authorization: Bearer ya29.ElqKBGN2Ri_Uz...PbJ_uNasm" -H "Content-Type: application/json" -d '{
  "message": {
    "notification": {
      "title": "FCM Message",
      "body": "This is a message from FCM"
    },
    "webpush": {
      "headers": {
        "Urgency": "high"
      },
      "notification": {
        "body": "This is a message from FCM to web",
        "requireInteraction": "true",
        "badge": "/badge-icon.png"
      }
    }
  },
  "token": "bk3RNwTe3H0:CI2k_HHwgIpoDKCIZvvDMExUdFQ3P1..."
  }
}' "https://fcm.googleapis.com/v1/projects/myproject-b5ae1/messages:send"
 

การตอบสนอง HTTP

 {
    "name": "projects/myproject-b5ae1/messages/0:1500415314455276%31bd1c9631bd1c98"
}
 

ดู Build Build Server Send Request เพื่อเรียนรู้เพิ่มเติมเกี่ยวกับข้อความ FCM

ขั้นตอนถัดไป

ส่งข้อความไปยังแอปที่ทำงานเบื้องหน้า

เมื่อคุณส่งข้อความแจ้งเตือนเรียบร้อยแล้วในขณะที่แอปของคุณอยู่ในพื้นหลังให้ดู รับข้อความในไคลเอนต์ JavaScript เพื่อเริ่มต้นส่งไปยังแอปที่ทำงานเบื้องหน้า

ไปไกลกว่าข้อความแจ้งเตือน

หากต้องการนอกเหนือจากข้อความแจ้งเตือนและเพิ่มพฤติกรรมการทำงานขั้นสูงเพิ่มเติมให้กับแอปของคุณโปรดดู: