ユーザーを呼び戻すプッシュ通知

再入荷のお知らせ、リマインダー、返信を、Beams 互換の 1 つの API で iOS、Android、Web に。ユーザーが選ぶインタレストとディープリンクつき。

ほとんどのユーザーは、いまこの瞬間アプリを使っていません。タイミングのよいプッシュ通知（「お気に入りの商品が再入荷しました」「レッスンは 15 分後に始まります」「Ann があなたに返信しました」）は、本人が気にかけている理由でユーザーを呼び戻します。Hibira Push は Beams 互換の 1 つの API で iOS、Android、ブラウザに配信するので、ロジックは 1 回書くだけです。

ユーザーにとっての価値

自分でフォローしたものの通知：値下げ、応援しているチームの試合、新しいエピソード。
個人向けのリマインダーや返信が、いま使っているデバイスに届きます。
タップするとホーム画面ではなく、その内容のページが開きます。

使う機能

インタレスト：デバイスが購読するトピック。price-drop-sku-123 や team-tigers のように、1 回の配信でフォローしている全員に届きます。
認証済みユーザー：ユーザー ID に配信すれば、そのユーザーがサインインしているすべてのデバイスに届きます。
1 回のリクエストで APNs、FCM、Web Push に。Web、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}` } },
});

1 回の配信で、そのインタレストをフォローしているすべてのデバイスに届きます。

ステップ 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) を呼びます。

ヒント

通知の許可は、初回のページ表示ではなく、役に立つ瞬間（「再入荷したら知らせて」）に求めましょう。許可してもらえる率がずっと上がります。
フォローできるもの 1 つにつき 1 つのインタレストを。インタレストはいくら作っても困りませんが、頼まれていない通知はアプリをミュートされる原因になります。
配信の前に、サーバー側でユーザーのタイムゾーンのおやすみ時間を避けましょう。
プッシュとリアルタイムを組み合わせましょう。ユーザーがアプリを使っている間はアプリ内通知でその場に表示し、プッシュは送りません。