カスタムプッシュ通知の作り方

説明したカスタム プッシュ通知システムを構築するには、さまざまなテクノロジ、パッケージ、ライブラリが必要です。ここでは、クライアント側、サーバー側、一般的なツールに分けて、使用する技術スタックの包括的なリストを示します。

1.クライアント側 (フロントエンド)

これらは、ユーザーのブラウザで使用されるテクノロジーとライブラリです。

• HTML/CSS/JavaScript:

  • Web サイトのフロントエンドを構築するための標準的な Web テクノロジー。

• サービスワーカー:

  • 目的: プッシュ通知の受信と表示などのバックグラウンド タスクを処理します。
  • ファイル:service-worker.js.

• プッシュ API:

  • 目的: Web アプリケーションがサーバーから送信されたプッシュ メッセージを受信できるようにします。

• 通知 API:

  • 目的: ユーザーに通知を表示します。

• Web VAPID ライブラリ (オプション):

  • 目的: VAPID 公開キーを Base64 から Uint8Array に変換するユーティリティ。
  • パッケージ: 必要に応じて、独自のユーティリティ関数を作成することも、既存のライブラリを使用することもできます。

2.サーバー側 (バックエンド)

これらは、サーバー上で実行され、サブスクリプションの管理、通知の送信などを行うテクノロジーとライブラリです。

• Node.js:

  • 目的: バックエンドロジックを処理するためのサーバーサイド JavaScript ランタイム環境。
  • バージョン: 最新の LTS バージョンが推奨されます。

• Express.js:

  • 目的: サブスクリプションの処理、通知の送信などのための API エンドポイントを構築するための Node.js の Web アプリケーション フレームワーク
  • パッケージ: エクスプレス。

• Web プッシュ ライブラリ:

  • 目的: VAPID キーの生成を含む、プッシュ通知の作成と送信を処理します。
  • パッケージ: Web プッシュ。

  npm install web-push --save

• データベース:

  • 目的: ユーザーのサブスクリプションを保存します。
  • オプション:
  • PostgreSQL: 強力なオープンソースのリレーショナル データベースです。
  • MySQL: もう 1 つの人気のあるリレーショナル データベース。
  • SQLite: 軽量のサーバーレス データベース オプション。
  • ORM (オプション):
  • Sequelize: さまざまな SQL 言語をサポートする Node.js 用の ORM。
  • パッケージ: Sequelize の続編。

• ボディパーサーミドルウェア:

  • 目的: ハンドラーの前にミドルウェアで受信リクエスト本文を解析します。これは req.body プロパティで利用可能です。
  • パッケージ: ボディパーサー。

  npm install body-parser --save

• ドテンフ:
  • 目的: 環境変数を .env ファイルから process.env に読み込みます。
  • パッケージ: dotenv.

  npm install dotenv --save

3.一般的なツールとユーティリティ

• Nginx または Apache:

  • 目的: 静的ファイルを提供し、Node.js アプリケーションにリバース プロキシを提供する Web サーバー。
  • セットアップ: プッシュ通知に必要な HTTPS 経由でサイトを提供するように構成します。

• SSL 証明書:

  • 目的: Service Worker とプッシュ通知に必要な HTTPS をドメインに提供します。
  • プロバイダー:
  • Let's Encrypt: 無料の SSL 証明書。
  • 商用 SSL プロバイダー: 有料オプションが利用可能です。

• Git:

  • 目的: プロジェクトのバージョン管理。

• ノード パッケージ マネージャー (NPM) または Yarn:

  • 目的: Node.js パッケージとライブラリを管理します。

4.オプションのツール

• 監視ツール:

  • 目的: サーバーのパフォーマンスとエラーを監視します。
  • オプション:
  • ニューレリック、データドッグ、プロメテウス。

• 自動導入ツール:

  • 目的: 自動デプロイメントのための CI/CD パイプライン。
  • オプション:
  • GitHub アクション、Jenkins、GitLab CI.

• データベース バックアップ ソリューション:

  • 目的: データベースのバックアップが定期的に作成されるようにします。

5.開発環境

• コードエディタ:

  • オプション:
  • Visual Studio コード: JavaScript 開発で人気のある選択肢。
  • 崇高なテキスト、WebStorm.

• 郵便配達員または不眠症:

  • 目的: 開発中の API エンドポイントのテスト。

概要

スタックは主に、バックエンドの JavaScript、Node.js、および Express を中心に展開し、PostgreSQL などのデータベースを使用します。または MySQL でサブスクリプション データを保存します。 Web-Push ライブラリはプッシュ通知の実際の送信を処理し、フロントエンドの Service Worker と Push API はサブスクリプション プロセスと通知の表示を管理します。通知。

この設定により、通知システムを完全に制御できるようになり、ニーズに応じたカスタマイズと最適化が可能になります。

以上がカスタムプッシュ通知の作り方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。