プッシュ通知

ユーザーにWeb Push通知を送信しましょう。AIがすべてを自動で組み上げます。

すべてのProyectaアプリは、ユーザーのブラウザやPWAにプッシュ通知を送信できます。ProyectaがVAPIDキーの生成、購読の保存、トピック管理、配信を処理するため、サードパーティのアカウントは不要です。

仕組み

Proyectaのプッシュ通知は、標準的なWeb Pushのライフサイクルに従い、4つのステップで構成されています。

Enable — 必要になった時点でアプリのVAPIDキーが生成される
Subscribe — 訪問者のデバイスを通知受信に登録する
Identify — 匿名の購読をサインイン済みユーザーに紐付ける
Send — 特定のユーザー、トピック、または全員に通知を配信する

最初の3つはusePush()フックの内部で自動的に処理され、4つ目は管理パネルから行います。

ユーザーのデバイスを購読する

アプリにはusePush()フックが同梱されており、VAPIDキーの取得、Service Workerの登録、Web Push購読の作成、シークレットの保存、サインイン後の匿名購読の紐付けまで、ブラウザ側のフロー全体を処理します。これらを自分で書く必要はありません。

import { usePush } from '@/hooks/usePush.ts';

function NotifyMeButton() {
    const { supported, subscribed, subscribe, unsubscribe, isPending } = usePush();

    // `supported: false` means this browser cannot do push at all — hide the CTA.
    if (!supported) return null;

    return (
        <button onClick={subscribed ? unsubscribe : subscribe} disabled={isPending}>
            {subscribed ? 'Turn off notifications' : 'Notify me'}
        </button>
    );
}

オプトインのプロンプトだけが必要な場合は、すぐに使えるブロックも用意されています。

import { PushOptInButton } from '@/components/blocks/PushOptInButton.tsx';

<PushOptInButton description="Get told the moment a new drop lands." />;

AIへの指示例: "Add a 'Notify me' button to the header that opts the visitor into push."

匿名の訪問者にも対応しています。フックが生成したIDで購読を作成し、その訪問者がサインインした時点で購読をアカウントへ自動的に紐付け直すため、後から送信した通知はどちらの状態でも届きます。

通知を送信する

送信はオーナーの操作であり、アプリの公開ページが行うものではありません。訪問者のブラウザから全読者に対してプッシュを送れてはならないためです。日常的な送信はアプリの管理パネルの Push セクションから行います。タイトルと本文を書き、トピックを選ぶか全員にブロードキャストし、まずは自分のデバイスにテスト送信してください。

全員に送ることも、特定のトピックを購読している訪問者だけに送ることもできます。通知にはタイトル、本文、そして任意でアイコンと画像を含められます。

送信後は、何台のデバイスに届き、何件が失敗したかの件数が表示されます。1点注意があります。これらの数値が実際のブラウザ配信を反映するのは、web-push配信アダプターが有効な場合だけです。無効な場合、件数は実際の配信数ではなくターゲットとなった保存済み購読数を表すため、配信確認の指標として読まないでください。

トピック

訪問者は、全か無かの単一リストではなく、名前付きトピック（例：product-updates、weekly-digest）を購読できます。ブロードキャスト型の更新通知でオプトインを管理する場合、自分で訪問者IDを追跡する必要がないため、この方法が推奨されます。トピックは管理パネルのPushセクションで配信対象の選択肢として表示されます。

購読解除

同じusePush()フックのunsubscribeを呼び出すだけです。フックがすでに購読のシークレットを保持しているため、保存したり渡したりするものは何もありません。

const { subscribed, unsubscribe } = usePush();

{
    subscribed && <button onClick={unsubscribe}>Turn off notifications</button>;
}

AIに自動で組み上げてもらう

これらをすべて手書きする必要はありません。AIにこのように指示できます。

"Add a 'Notify me' button to the header that opts the visitor into push notifications."
"Put a push opt-in prompt on the product page, but only show it to visitors who haven't already subscribed."
"Add a topic called 'breaking-news' that visitors can opt into from the footer."

注意事項

Previewでは実際のpushは送信されません。 ブラウザは実際のオリジン上のHTTPSを必要とするため、プッシュ通知はアプリのpublished版でのみ機能します。
iOSではPWAが必要です。 iOS 16.4以降では、Web PushはSafariから直接ではなく、インストール済みのProgressive Web App（ホーム画面に追加済み）からのみ機能します。
通知許可は一度きりです。 ユーザーが通知の許可を拒否した場合、ブラウザはプログラムによる再プロンプトを許可しません。ブラウザまたはデバイスの設定に誘導する必要があります。

近日公開予定

スケジュール送信・イベントトリガー送信 — アプリイベントやスケジュールに基づいて自動送信
ディープリンク — 通知をタップしたときにアプリ内の特定の画面を開く