公式パッケージ · リアルタイムの部品

アプリに通知インボックスを

未読バッジ付きのベルと、既読・未読・アーカイブができる通知一覧が、開いているすべてのタブとアプリでリアルタイムに更新されます。サーバーからリクエストを 1 回送るだけで、Hibira が通知を保存し、リアルタイムに届け、オフラインのユーザーにはプッシュ通知を送ります。

@hibira-io/inboxnpm ↗GitHub ↗pub.dev ↗

React、Vue、React Native のコンポーネントと、hibira_inbox パッケージの Flutter ウィジェットを用意。7 言語、ライトとダークに対応。
ブラウザやアプリは、サーバーが署名した短期間のユーザートークンで自分の通知を直接読み書きするので、中継用のエンドポイントは不要です。
接続していないユーザーには Hibira Push でプッシュ通知が届きます。key を付ければ再試行しても安全で、同じ通知が二重に保存されることはありません。

サインインすると、コード例にご自身のクラスターホストが入ります。サインイン

インストール
```
npm install @hibira-io/inbox pusher-js
```

サーバーから送る

import { createInbox } from '@hibira-io/inbox';

const inbox = createInbox({
  appId: process.env.HIBIRA_APP_ID,
  key: process.env.HIBIRA_KEY,
  secret: process.env.HIBIRA_SECRET,
});

await inbox.send({
  users: ['ann', 'bob'],
  title: 'Order #1042 shipped',
  url: '/orders/1042',
  key: 'order-1042-shipped',
});

// GET /api/inbox-token, behind your login
app.get('/api/inbox-token', requireLogin, (req, res) => {
  res.json({ token: inbox.userToken(req.user.id) });
});

使う

import { NotificationBell, useInboxClient } from '@hibira-io/inbox/react';
import '@hibira-io/inbox/styles.css';

export function Header({ user }) {
  const client = useInboxClient({ appId: APP_ID, tokenUrl: '/api/inbox-token', pusher, userKey: user.id });
  return <header>{client && <NotificationBell client={client} />}</header>;
}

Flutter

// flutter pub add hibira_inbox
import 'package:hibira_inbox/hibira_inbox.dart';

final inbox = HibiraInbox(
  appId: hibiraAppId,
  token: () => api.inboxToken(), // from GET /api/inbox-token
  client: hibira, // a signed-in HibiraClient, for live updates
);

AppBar(actions: [NotificationBell(inbox: inbox)]);

始める前に

アプリのシークレットは、アプリの作成時とシークレットのローテーション時に一度だけ表示されます。サーバーにだけ置き、ブラウザやゲームのビルドには入れないでください。
リアルタイムに更新するには、クライアントでユーザーをサインインさせます（ユーザー認証エンドポイントを指定して pusher.signin()）。サインインしない場合、インボックスは 1 分ごとに更新されます。
通知の保存期間は Free で 7 日、Hobby と Starter で 30 日、Pro 以上で 90 日で、各ユーザーの最新 1,000 件を保持します。受信者 1 人につき 1 メッセージとして数えます。

ダッシュボードのアプリキーを使ってください。シークレットはサーバー側だけに置きます。チャンネル、イベント、認可エンドポイントは Pusher とまったく同じように動作します。無料でアカウントを作成 →

アプリに通知インボックスを

インストール

サーバーから送る

使う

Flutter

始める前に