← คู่มือทั้งหมด

การแจ้งเตือนแบบพุช

คู่มือการเชื่อมต่อการแจ้งเตือนแบบพุช

ส่งการแจ้งเตือนไปยัง iOS, Android และเบราว์เซอร์ด้วย Hibira Push API เข้ากันได้กับ Beams: Beams server SDK อย่างเป็นทางการใช้ได้เมื่อชี้ไปที่ endpoint ของคุณ และ client SDK ของเราแยกมาจากของ Beams โดยกำหนดโฮสต์ได้

ลงชื่อเข้าใช้เพื่อดูโค้ดตัวอย่างเหล่านี้พร้อม endpoint ของคุณเอง และหน้าแอปจะกรอก instance ID ให้ ลงชื่อเข้าใช้

วิธีการทำงาน

  • เปิดการแจ้งเตือนแบบพุชในหน้าแอปบนพอร์ทัล คุณจะได้ instance ID, secret key และ endpoint
  • อุปกรณ์หรือเบราว์เซอร์แต่ละเครื่องลงทะเบียนด้วย client SDK และสมัครรับ interest ซึ่งเป็นหัวข้อ เช่น news หรือ order-1024 เซิร์ฟเวอร์ของคุณเผยแพร่ไปยัง interest หรือไปยัง user ID เมื่ออุปกรณ์เชื่อมโยงกับผู้ใช้ที่ลงชื่อเข้าใช้แล้ว
  • Instance ID และ endpoint ใส่ไว้ในแอปของคุณ secret key เผยแพร่ไปยังทุกอุปกรณ์ได้ จึงต้องเก็บไว้บนเซิร์ฟเวอร์ในตัวแปรสภาพแวดล้อม HIBIRA_PUSH_SECRET_KEY และห้ามใส่ไว้ในแอปหรือ repository
  • พุชรวมอยู่ในทุกแพ็กเกจ แพ็กเกจกำหนดจำนวนอุปกรณ์และเบราว์เซอร์ที่ลงทะเบียนได้ และความเร็วในการเผยแพร่

1. อัปโหลดข้อมูลรับรอง

Apple (APNs)
ใน Apple Developer ให้เปิด Certificates, Identifiers & Profiles › Keys สร้างคีย์ที่มี Apple Push Notifications service (APNs) แล้วดาวน์โหลดไฟล์ .p8 ในหน้าแอป ใต้ Push notifications › Apple (APNs) ให้ป้อน Key ID, Team ID และ bundle ID ของแอป เลือกสภาพแวดล้อม แล้วอัปโหลดไฟล์ .p8 เลือก Development (sandbox) สำหรับบิลด์ที่รันจาก Xcode และ Production สำหรับบิลด์ TestFlight และ App Store
Android (FCM)
ในคอนโซล Firebase ให้เปิด Project settings › Service accounts แล้วคลิก Generate new private key อัปโหลดไฟล์ JSON ใต้ Push notifications › Android (FCM) และเพิ่ม google-services.json ของโปรเจกต์เดียวกันลงในแอป Android ของคุณ
Web Push
ไม่ต้องอัปโหลดอะไร: คีย์ VAPID จะถูกสร้างเมื่อคุณเปิดพุช เว็บไซต์ของคุณต้องให้บริการผ่าน HTTPS (localhost ใช้ได้ระหว่างพัฒนา)

คีย์และ service account จัดเก็บแบบเข้ารหัสและจะไม่แสดงอีก

2. ลงทะเบียนอุปกรณ์และเบราว์เซอร์

Client SDK

แพลตฟอร์ม

Chrome, Edge, Firefox, Opera และ Safari 16.4+ ด้วย Web Push มาตรฐานและ service worker @hibira-io/push-web ↗

  1. ติดตั้ง

    npm install @hibira-io/push-web
  2. เพิ่ม service worker

    // public/service-worker.js, served at https://your-site/service-worker.js
    importScripts('https://cdn.jsdelivr.net/npm/@hibira-io/push-web@1/dist/service-worker.js');
    self.HibiraPush.endpoint = 'https://ws.hibira.io';
  3. ลงทะเบียนเบราว์เซอร์

    import { Client } from '@hibira-io/push-web';
    
    const push = new Client({
      instanceId: 'YOUR_INSTANCE_ID',
      endpoint: 'https://ws.hibira.io',
    });
    
    // Browsers only show the permission prompt after a click or tap.
    document.querySelector('#enable-notifications').addEventListener('click', async () => {
      await push.start();
      await push.addDeviceInterest('hello');
    });
  4. เชื่อมโยงผู้ใช้ที่ลงชื่อเข้าใช้

    import { TokenProvider } from '@hibira-io/push-web';
    
    // After sign-in. Your backend answers GET /push/user-token?user_id=... (see the server guide).
    await push.setUserId(currentUser.id, new TokenProvider({ url: '/push/user-token' }));
    
    // On sign-out, so the next person on this browser doesn't get their notifications.
    await push.stop();
พรอมต์สำหรับเอเจนต์ของ Web

วางข้อความนี้ใน Claude Code, Cursor, GitHub Copilot หรือเอเจนต์เขียนโค้ด AI อื่น ข้อความนี้มี instance ID และ endpoint ส่วน secret key ยังคงเป็นตัวแปรสภาพแวดล้อม

Add Hibira push notifications to this Web project. Hibira Push sends to iOS (APNs), Android (FCM) and browsers (Web Push) through a Beams-compatible API, so it works with the Hibira client SDK (here: @hibira-io/push-web, https://github.com/hibira-io/hibira-push-web).

Connection details:
- Instance ID: YOUR_INSTANCE_ID
- Endpoint: https://ws.hibira.io
- No secret key: it belongs on the server, never in this app

What to do:
1. Look at the project first (framework version, package manager, config and env conventions, where similar integrations live) and follow what it already does.
2. Install @hibira-io/push-web (it replaces @pusher/push-notifications-web; the API is the same apart from the import and the endpoint option).
3. Serve service-worker.js from the site root (for example public/service-worker.js in Vite, Next.js or Create React App) with the importScripts line and the endpoint from the reference.
4. Create one shared push client module and call start() from a user action such as an "Enable notifications" button, never on page load: browsers block permission prompts that are not triggered by a click.
5. If the app has signed-in users, call setUserId with a TokenProvider pointing at the backend token endpoint after sign-in, and stop() on sign-out.
6. Web Push needs HTTPS (localhost is fine for development); on iPhone and iPad it works only once the site is added to the Home Screen.
7. Read the instance ID and endpoint from the project's config or environment, and add placeholder entries to .env.example (or its equivalent).
8. Always set the endpoint above. The Pusher Beams SDKs and their defaults point at pusher.com.
9. If YOUR_INSTANCE_ID above is still a placeholder, keep it as a config placeholder and tell me where to fill it in rather than inventing a value.
10. Subscribe test devices to the "hello" interest so the portal's Send a test reaches them.
11. When you are done, list the files you changed and tell me how to check it works: on the Hibira portal app page, Push notifications › Send a test to the hello interest.

Reference setup from the Hibira push notifications guide (adapt it to the project's structure):

Install:

```shell
npm install @hibira-io/push-web
```

Add the service worker:

```js
// public/service-worker.js, served at https://your-site/service-worker.js
importScripts('https://cdn.jsdelivr.net/npm/@hibira-io/push-web@1/dist/service-worker.js');
self.HibiraPush.endpoint = 'https://ws.hibira.io';
```

Register the browser:

```js
import { Client } from '@hibira-io/push-web';

const push = new Client({
  instanceId: 'YOUR_INSTANCE_ID',
  endpoint: 'https://ws.hibira.io',
});

// Browsers only show the permission prompt after a click or tap.
document.querySelector('#enable-notifications').addEventListener('click', async () => {
  await push.start();
  await push.addDeviceInterest('hello');
});
```

Link the signed-in user:

```js
import { TokenProvider } from '@hibira-io/push-web';

// After sign-in. Your backend answers GET /push/user-token?user_id=... (see the server guide).
await push.setUserId(currentUser.id, new TokenProvider({ url: '/push/user-token' }));

// On sign-out, so the next person on this browser doesn't get their notifications.
await push.stop();
```

3. เผยแพร่จากเซิร์ฟเวอร์ของคุณ

Server SDK

ภาษา

เผยแพร่จาก Node.js ด้วย Beams server SDK อย่างเป็นทางการ โดยชี้ไปที่ endpoint ของคุณ @pusher/push-notifications-server ↗

  1. ติดตั้ง

    npm install @pusher/push-notifications-server
  2. เผยแพร่ไปยัง interest

    const PushNotifications = require('@pusher/push-notifications-server');
    
    const beams = new PushNotifications({
      instanceId: 'YOUR_INSTANCE_ID',
      secretKey: process.env.HIBIRA_PUSH_SECRET_KEY,
      endpoint: 'ws.hibira.io',
    });
    beams.protocol = 'https'; // the SDK switches to http when an endpoint is set
    
    await beams.publishToInterests(['hello'], {
      apns: { aps: { alert: { title: 'Hello', body: 'Hello, world!' } } },
      fcm: { notification: { title: 'Hello', body: 'Hello, world!' } },
      web: { notification: { title: 'Hello', body: 'Hello, world!', deep_link: 'https://your-site.example/' } },
    });
  3. เพิ่ม endpoint สำหรับโทเค็นผู้ใช้

    // Express: the client SDKs call GET /push/user-token?user_id=...
    app.get('/push/user-token', requireLogin, (req, res) => {
      if (req.query.user_id !== String(req.user.id)) return res.sendStatus(401);
      res.json(beams.generateToken(String(req.user.id))); // { token: '...' }
    });
  4. เผยแพร่ไปยังผู้ใช้ที่ลงชื่อเข้าใช้

    await beams.publishToUsers(['user-1'], {
      apns: { aps: { alert: { title: 'Order shipped', body: 'Order #1024 is on its way.' } } },
      fcm: { notification: { title: 'Order shipped', body: 'Order #1024 is on its way.' } },
      web: { notification: { title: 'Order shipped', body: 'Order #1024 is on its way.' } },
    });
พรอมต์สำหรับเอเจนต์ของ Node.js

วางข้อความนี้ใน Claude Code, Cursor, GitHub Copilot หรือเอเจนต์เขียนโค้ด AI อื่น ข้อความนี้มี instance ID และ endpoint ส่วน secret key ยังคงเป็นตัวแปรสภาพแวดล้อม

Add Hibira push notifications to this Node.js project. Hibira Push sends to iOS (APNs), Android (FCM) and browsers (Web Push) through a Beams-compatible API, so it works with the official Beams server SDKs pointed at the Hibira endpoint (here: @pusher/push-notifications-server, https://github.com/pusher/push-notifications-node).

Connection details:
- Instance ID: YOUR_INSTANCE_ID
- Endpoint: https://ws.hibira.io
- Secret key: read it from the HIBIRA_PUSH_SECRET_KEY environment variable (server-side only)

What to do:
1. Look at the project first (framework version, package manager, config and env conventions, where similar integrations live) and follow what it already does.
2. Create one shared module that builds the PushNotifications client from environment variables, with the endpoint option and beams.protocol set as in the reference (without them the SDK talks to pusher.com, or to the endpoint over plain http).
3. If the app has signed-in users, add the token route behind the project's existing authentication middleware; it must refuse a user_id that is not the signed-in user's.
4. Publish from the places that should notify (jobs, controllers, event handlers) through the shared module, and log the publish ID it returns.
5. Read the instance ID and endpoint from the project's config or environment, and add placeholder entries to .env.example (or its equivalent). Never commit the secret key or send it to a browser or mobile app.
6. Always set the endpoint above. The Pusher Beams SDKs and their defaults point at pusher.com.
7. If YOUR_INSTANCE_ID above is still a placeholder, keep it as a config placeholder and tell me where to fill it in rather than inventing a value.
8. Subscribe test devices to the "hello" interest so the portal's Send a test reaches them.
9. When you are done, list the files you changed and tell me how to check it works: on the Hibira portal app page, Push notifications › Send a test to the hello interest.

Reference setup from the Hibira push notifications guide (adapt it to the project's structure):

Install:

```shell
npm install @pusher/push-notifications-server
```

Publish to an interest:

```js
const PushNotifications = require('@pusher/push-notifications-server');

const beams = new PushNotifications({
  instanceId: 'YOUR_INSTANCE_ID',
  secretKey: process.env.HIBIRA_PUSH_SECRET_KEY,
  endpoint: 'ws.hibira.io',
});
beams.protocol = 'https'; // the SDK switches to http when an endpoint is set

await beams.publishToInterests(['hello'], {
  apns: { aps: { alert: { title: 'Hello', body: 'Hello, world!' } } },
  fcm: { notification: { title: 'Hello', body: 'Hello, world!' } },
  web: { notification: { title: 'Hello', body: 'Hello, world!', deep_link: 'https://your-site.example/' } },
});
```

Add the user token endpoint:

```js
// Express: the client SDKs call GET /push/user-token?user_id=...
app.get('/push/user-token', requireLogin, (req, res) => {
  if (req.query.user_id !== String(req.user.id)) return res.sendStatus(401);
  res.json(beams.generateToken(String(req.user.id))); // { token: '...' }
});
```

Publish to a signed-in user:

```js
await beams.publishToUsers(['user-1'], {
  apns: { aps: { alert: { title: 'Order shipped', body: 'Order #1024 is on its way.' } } },
  fcm: { notification: { title: 'Order shipped', body: 'Order #1024 is on its way.' } },
  web: { notification: { title: 'Order shipped', body: 'Order #1024 is on its way.' } },
});
```

4. ผู้ใช้ที่ลงชื่อเข้าใช้

หากต้องการส่งถึงบุคคลหนึ่งบนทุกอุปกรณ์ที่เขาใช้ ให้เชื่อมโยงแต่ละอุปกรณ์กับ user ID ของคุณเอง client SDK จะเรียก endpoint สำหรับโทเค็นของคุณด้วย ?user_id=… endpoint ตรวจสอบว่าคำขอมาจากผู้ใช้ที่ลงชื่อเข้าใช้คนนั้น แล้วตอบกลับด้วยโทเค็นที่ generateToken สร้างจาก secret key ของคุณ (Beams server SDK ทุกตัวมีฟังก์ชันนี้) จากนั้นเผยแพร่ไปยัง user ID แทน interest การลบผู้ใช้จะยกเลิกการเชื่อมโยงอุปกรณ์ทั้งหมดของผู้ใช้นั้น

เรียก stop เมื่อผู้ใช้ออกจากระบบ เพื่อไม่ให้คนถัดไปบนอุปกรณ์นั้นได้รับการแจ้งเตือนของเขา

5. ส่งทดสอบ

ในหน้าแอป ใต้ Push notifications › Send a test ให้ป้อน interest (hello ในโค้ดตัวอย่างด้านบน) หัวข้อ และเนื้อหา แล้วคลิกส่งทดสอบ อุปกรณ์ที่สมัครรับ interest นั้นจะได้รับภายในไม่กี่วินาที และมาตรวัดผู้สมัครรับข้อมูลจะแสดงจำนวนอุปกรณ์และเบราว์เซอร์ที่ลงทะเบียนแล้ว

การแก้ปัญหา

อุปกรณ์หรือเบราว์เซอร์ไม่ปรากฏในผู้สมัครรับข้อมูลเลย
ตรวจสอบว่าไคลเอนต์เรียก start ด้วย instance ID และ endpoint ของแอปนี้ และผู้ใช้อนุญาตการแจ้งเตือนแล้ว บน Android ไฟล์ google-services.json ต้องมาจากโปรเจกต์ Firebase เดียวกับ service account ที่คุณอัปโหลด
iPhone และ iPad ไม่ได้รับอะไรเลย
สภาพแวดล้อม APNs ต้องตรงกับบิลด์: Development (sandbox) สำหรับบิลด์ที่รันจาก Xcode และ Production สำหรับ TestFlight และ App Store bundle ID ต้องตรงกับแอปทุกตัวอักษร และ target ของแอปต้องมีความสามารถ Push Notifications
start() ล้มเหลวพร้อมข้อความ “service worker missing”
ให้บริการ /service-worker.js จากรากของเว็บไซต์ผ่าน HTTPS พร้อมบรรทัด importScripts จากคู่มือเว็บ service worker ในโฟลเดอร์ย่อยจะควบคุมได้เฉพาะโฟลเดอร์นั้น
Safari บน iPhone ไม่ขอสิทธิ์เลย
Web Push บน iOS และ iPadOS 16.4+ ใช้ได้หลังจากเพิ่มเว็บไซต์ลงในหน้าจอโฮมแล้วเท่านั้น และการขอสิทธิ์ต้องเกิดจากการแตะ
Server SDK ยังเรียก pusher.com หรือล้มเหลวผ่าน http
ตั้งค่าตัวเลือก endpoint SDK ของ Node.js ต้องใช้ beams.protocol = 'https' ด้วย และ SDK ของ Go ใช้ WithCustomBaseURL
การเผยแพร่ได้รับ 401
เซิร์ฟเวอร์ใช้ secret key ผิด หรือ key ที่ถูกเปลี่ยนนานเกินช่วงผ่อนผันแล้ว คัดลอก key ปัจจุบันจากหน้าแอป
การเผยแพร่ได้รับ 429
คุณเผยแพร่เร็วกว่าที่แพ็กเกจอนุญาต รอตามระยะเวลา Retry-After และกำหนดเป้าหมายสูงสุด 100 interest หรือ 1,000 ผู้ใช้ในการเผยแพร่ครั้งเดียว แทนที่จะส่งทีละคำขอ
การลงทะเบียนอุปกรณ์ได้รับ 402
แอปถึงขีดจำกัดผู้สมัครรับข้อมูลของแพ็กเกจแล้ว อัปเกรดแพ็กเกจ หรือลบผู้ใช้ที่ออกไปแล้วเพื่อลบอุปกรณ์ของพวกเขา
setUserId ล้มเหลว
Endpoint สำหรับโทเค็นของคุณต้องตอบกลับ 200 พร้อม JSON ที่ generateToken ส่งกลับสำหรับ user_id ที่ถูกถาม โดยใช้ secret key ของแอปนี้ อุปกรณ์ที่เชื่อมโยงกับผู้ใช้อื่นต้องเรียก stop ก่อน

ย้ายมาจาก Pusher Beams ใช่ไหม? เปลี่ยนแพ็กเกจ client SDK มาใช้ของเรา ตั้งค่า endpoint ใน server SDK อัปโหลดคีย์ APNs และ service account ของ FCM แล้วเผยแพร่ไปยังทั้งสองบริการจนกว่าผู้ใช้จะอัปเดต อุปกรณ์จะลงทะเบียนใหม่เมื่อเริ่มใช้งานครั้งแรก ย้ายจาก Pusher →