← 활용 사례

사용자를 다시 불러오는 푸시 알림

재입고 알림, 리마인더, 답글을 Beams 호환 API 하나로 iOS, Android, 웹에 보냅니다. 사용자가 고르는 관심사와 딥 링크 포함.

대부분의 사용자는 지금 이 순간 앱을 쓰고 있지 않습니다. 때를 잘 맞춘 푸시 알림(“관심 상품이 재입고되었습니다”, “수업이 15분 뒤에 시작합니다”, “Ann 님이 답장했습니다”)은 사용자가 신경 쓰는 이유로 그들을 다시 데려옵니다. Hibira Push는 Beams 호환 API 하나로 iOS, Android, 브라우저에 보내므로 로직은 한 번만 쓰면 됩니다.

사용자가 얻는 것

  • 직접 팔로우한 것에 대한 알림: 가격 인하, 응원하는 팀의 경기, 새 에피소드.
  • 개인 리마인더와 답장이 지금 쓰는 기기로 옵니다.
  • 탭하면 홈 화면이 아니라 바로 그 페이지가 열립니다.

사용하는 기능

  • 관심사(interest): 기기가 구독하는 주제. price-drop-sku-123이나 team-tigers처럼, 한 번의 발행으로 팔로우하는 모두에게 전달됩니다.
  • 인증된 사용자: 사용자 ID로 발행하면 그 사용자가 로그인한 모든 기기에 전달됩니다.
  • 요청 하나로 APNs, FCM, Web Push까지. 웹, Android, iOS SDK를 사용합니다.
  • 기존 Beams 코드 그대로: 공식 Beams 서버 SDK에 엔드포인트만 지정하면 동작합니다.

1단계: 무엇을 팔로우할지 사용자가 고르게 하기

사용자가 “알림 받기”를 누르면 기기를 관심사에 등록합니다.

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.
notifyButton.addEventListener('click', async () => {
  await push.start();
  await push.addDeviceInterest(`price-drop-sku-${sku}`);
  notifyButton.textContent = 'We will tell you';
});

Android와 iOS에도 같은 addDeviceInterest가 있습니다. 플랫폼별 설정은 푸시 알림 가이드를 참고하세요.

2단계: 일이 생기면 발행

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';

await beams.publishToInterests([`price-drop-sku-${sku}`], {
  web: { notification: { title: 'Back in stock', body: `${name} is back, now ${price}.`, deep_link: `https://your-shop.example/p/${sku}` } },
  fcm: { notification: { title: 'Back in stock', body: `${name} is back, now ${price}.` }, data: { url: `/p/${sku}` } },
  apns: { aps: { alert: { title: 'Back in stock', body: `${name} is back, now ${price}.` } }, data: { url: `/p/${sku}` } },
});

발행 한 번으로 그 관심사를 팔로우하는 모든 기기에 전달됩니다.

3단계: 로그인한 사용자에게 개인 메시지

로그인 후 기기를 사용자 ID에 연결하고(SDK가 토큰 라우트를 호출합니다), 그 사용자에게 발행합니다.

await beams.publishToUsers([String(userId)], {
  fcm: { notification: { title: 'Your class starts in 15 minutes', body: 'Yoga with Mei, studio 2.' } },
  apns: { aps: { alert: { title: 'Your class starts in 15 minutes', body: 'Yoga with Mei, studio 2.' } } },
  web: { notification: { title: 'Your class starts in 15 minutes', deep_link: 'https://your-site.example/bookings' } },
});

사용자가 로그아웃하면 브라우저에서 push.stop()(Android와 iOS에서는 clearAllState())을 호출하고, 계정을 삭제하면 서버에서 beams.deleteUser(userId)를 호출하세요.

팁

  • 알림 권한은 첫 페이지 방문 때가 아니라 쓸모 있는 순간(“재입고되면 알려 주세요”)에 요청하세요. 허용률이 훨씬 높아집니다.
  • 팔로우할 수 있는 것 하나에 관심사 하나를 두세요. 관심사는 부담이 없지만, 요청하지 않은 알림은 앱을 음소거하게 만듭니다.
  • 발행하기 전에 서버에서 사용자 시간대의 방해 금지 시간을 피하세요.
  • 푸시와 실시간을 함께 쓰세요. 사용자가 앱 안에 있는 동안에는 인앱 알림으로 그 자리에 보여 주고 푸시는 건너뜁니다.