---
title: "Webプッシュ通知"
url: https://docs.catalyst.zoho.com/ja/cloud-scale/help/push-notifications/web/
description: "Catalystは、iOS、Android、およびWebアプリにすぐに実装できるプッシュ通知サービスを提供し、送信前に通知をテストすることも可能です。"
last_updated: 2026-08-17T12:16:04Z
service: Cloud Scale
type: general
---

# Webプッシュ通知

### はじめに

WebアプリケーションのCatalystプッシュ通知は、Webアプリでプッシュ通知を簡単に有効化してアクティベートできるフルマネージドサービスです。

Catalyst WebアプリのプッシュメッセージはWebアプリがユーザーのアクティブなブラウザで開かれているときに表示されます。ただし、通知がユーザーに配信されるためには、ブラウザがWebプッシュとサービスワーカーをサポートしている必要があります。これらの概念の詳細については、ドキュメントの[アーキテクチャ](https://docs.catalyst.zoho.com/ja/cloud-scale/help/push-notifications/architecture/)セクションで学ぶことができます。

Catalystが提供するコードスニペットで、プッシュ通知のロジックを設計する独自のアクションを記述し、アプリケーションに実装できます。

Webブラウザのガイドラインに応じて、Webアプリのユーザーがプッシュ通知の受信をオプトインできるプロビジョニングを有効にできます。これは、プッシュ通知を許可するための許可リクエストプロンプトを含めることで実行できます。ユーザーが許可を付与すると、Webアプリからプッシュ通知を受信するようサブスクライブされます。許可を提供した際に一意のユーザーサブスクリプションIDが作成され、Webアプリがプッシュ通知を送信できるようになります。このIDをデータベースに保存してサブスクライバーを識別できます。

Webアプリでプッシュ通知を有効化して設定した後、Catalystコンソールから特定のユーザーにテストプッシュ通知を送信できます。実装のバグを確認するために、テストクライアントにプレーンテキスト通知を送信できます。送信先のユーザーは、通知を受信するためにブラウザでWebアプリのアクティブなセッションを開いている必要があります。

### 主要概念

#### Webプッシュ通知の要素

プッシュ通知の要素は、Webアプリケーション向けかモバイルアプリケーション向けかによって異なります。これは主に、さまざまなWebブラウザとモバイルプラットフォームが課す基準と制限の違いによるものです。

ほとんどのWebブラウザは、Webプッシュ通知に組み込むHTMLカスタマイズやアクション可能な要素に厳しい制限を課していません。ただし、ネイティブモバイルアプリのプッシュ通知とは異なり、Webプッシュ通知はGIFやオーディオなど多様なメディアタイプやインタラクティブ要素のサポートを提供しません。さらに、モバイルアプリのプッシュ通知はモバイルフォンのカメラ、加速度計などにアクセスできますが、Webアプリではこれができません。

異なるWebブラウザはプッシュ通知の機能サポートにおいて異なる基準を実装しています。そのため、外観とロジックをそれに応じて設計する必要があります。

大まかに、Webプッシュ通知には以下の要素を含めることができます：

* タイトルと説明
* アプリアイコン
* コールトゥアクションボタン
* WebサイトURL

### Webプッシュ通知の有効化

Webアプリケーションでは、Catalystコンソールで提供されるコードスニペットを使用して、独自のロジックでプッシュ通知の外観とアクションを定義し、アプリケーションのソースに組み込むことができます。コードを設定した後、選択したユーザーのメールアドレスにテストプッシュ通知を送信して、動作を確認できます。Catalystはプッシュサービスに[Push API](https://docs.catalyst.zoho.com/ja/api/code-reference/cloud-scale/push-notifications/web/send-web-push-notifications/#SendWebPushNotifications)コールを送信して、プッシュメッセージの配信をリクエストします。

CatalystがWebプラットフォーム用に提供するコードスニペットは、アプリケーションからプッシュ通知を受信するためのユーザーデバイスの登録プロセスも処理します。ユーザーデバイスを個別に登録する必要はありません。プッシュ通知を有効にしてコンソールからテストを開始できます。

CatalystでWebアプリケーションのプッシュ通知を有効にするには：

1. プロジェクトの**Cloud Scale**セクションから**Push Notifications**に移動します。**Web**タブをクリックします。

![catalyst_pushnotifications_web](https://catalyst-docs-development.zohostratus.in/images/help/notifications/catalyst_push_notifications_web.webp)

2. 表示されたコードスニペットをコピーし、Webアプリケーションのソースの必要な場所に貼り付けます。

```javascript
catalyst.notification.enableNotification().then(resp=>{
catalyst.notification.messageHandler = msg => {
                 //独自のアクションを記述する
             }
       });
```

> **注意:** プッシュ通知を正しく有効にするには、WebアプリケーションにCatalyst Web SDK初期化スクリプトを含めていることを確認する必要があります。

コードスニペットは`enableNotification()`関数を呼び出し、`messageHandler`で独自のアクションを定義できます。[主要概念](https://docs.catalyst.zoho.com/ja/cloud-scale/help/push-notifications/web/#key-concepts)セクションで前述したように、独自のロジックを使用してアプリのコードでプッシュ通知の外観と機能を処理できます。

### Webプッシュ通知のテスト

アプリケーションのコードにプッシュ通知を組み込んで有効にした後、コンソールから動作をテストできます。Catalystでは、コンソールから一度に1つのメールアドレスにテストテキスト通知を送信できます。テストアカウントが通知を正常に受信した場合、セットアップが正しく動作していることを確認できます。

Catalystでホストされているwebアプリケーションにテストプッシュ通知を送信するには：

1. プロジェクトの**Cloud Scale**セクションから**Push Notifications**に移動します。**Web**タブをクリックします。

2. _Web_セクションで、テストプッシュ通知を送信するユーザーアカウントのメールIDとメッセージを入力します。
![catalyst_pushnotifications_web_test](https://catalyst-docs-development.zohostratus.in/images/help/notifications/catalyst_push_web_test.webp)

3. **Send**をクリックします。

プッシュ通知は指定したユーザーに即座に送信されます。

ユーザーが通知を受信するためには、以下の条件を満たす必要があります：

1. ユーザーがブラウザでWebアプリを開いている必要があります。ユーザーが別のブラウザタブでアクティブな場合でも、プッシュ通知を受信できます。
2. Webアプリが開かれているブラウザがWebプッシュとサービスワーカーをサポートしている必要があります。
3. アプリケーションのロジックにプッシュ通知を許可するための許可プロンプトを含めている場合、エンドユーザーがその許可を提供している必要があります。