官方套件 · 即時功能元件

為你的 App 加上通知中心

鈴鐺加上未讀數，以及可標為已讀、未讀和封存的通知列表，在每個開著的分頁和 App 即時同步。伺服器只要送出一個請求，Hibira 就會儲存通知、即時送達，並推播給離線的使用者。

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

提供 React、Vue、React Native 元件，以及 hibira_inbox 套件中的 Flutter 元件，支援七種語言與淺色、深色主題。
瀏覽器或 App 以伺服器簽發的短期使用者 token 直接讀取並標記自己的通知，不需要另寫轉接 API。
沒有連線的使用者會透過 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() 搭配使用者驗證端點）。沒有登入時，通知中心每分鐘重新整理一次。
通知保存期限：Free 7 天、Hobby 與 Starter 30 天、Pro 以上 90 天，每位使用者保留最新的 1,000 則。每位收件者計為一則訊息。

請使用儀表板中的應用程式 Key；Secret 只放在你的伺服器上。頻道、事件與授權端點的用法和 Pusher 完全相同。免費建立帳號 →

為你的 App 加上通知中心

安裝

從伺服器送出

使用

Flutter

開始之前