WordPressサイトのPWA化とプッシュ通知の設定方法

by

プッシュ通知のWordPressプラグイン

WordPressのプッシュ通知プラグイン比較 PWA for WP 特徴: • オフライン機能 • プッシュ通知機能 • Firebase連携 • 管理画面から簡単設定 設定手順: 1. プラグインインストール 2. Firebase設定 3. APIキー連携 Super PWA 特徴: • ホーム画面への追加 • キャッシュ機能 • オフライン機能 • iOS向け対応 • 初心者に最適 連携: • OneSignalと連携可能 OneSignal 特徴: • プッシュ通知専用 • 通常Webサイトにも対応 • パーソナライズ通知 • ユーザーの関心に基づく • 個別通知配信 使用方法: • プラグインインストール • アカウント連携
  • PWA for WPは、オフライン機能やプッシュ通知機能を搭載したプラグインです。
    Firebaseと連携することでプッシュ通知を設定できます。プラグインをインストールした後、Firebaseでプロジェクトを作成し、APIキーなどを設定します。WordPress管理画面から簡単に通知設定ができるのが特徴です。
  • Super Progressive Web Apps は、ホーム画面への追加、キャッシュ機能、オフライン機能に対応しています。
    OneSignalと連携するとプッシュ通知が利用できます。設定が非常に簡単なので初心者の方におすすめです。また、iPhoneなどのiOS向けの制限にも対応する設計がされています。
  • OneSignalは、プッシュ通知専用のプラグインです。
    PWAだけでなく通常のWebサイトにも対応しています。
    ユーザーの興味や関心に基づいた個別の通知を送ることができます。使うには、WordPressにOneSignalプラグインをインストールし、アカウント連携をします。

PWA全般の機能が必要な場合は、「PWA for WP」や「Super Progressive Web Apps」が適しています。プッシュ通知に特に力を入れたい場合は、「OneSignal」を併用するとより効果的です。

Firebase Cloud MessagingとOneSignalの違い

Firebase Cloud MessagingとOneSignalの比較 Firebase Cloud Messaging 料金プラン • 完全無料で利用可能 • 送信回数に制限なし 機能・特徴 • 開発者向け設計 • コードによる高度なカスタマイズ • Googleサービスとの連携が容易 • 高速なリアルタイム通知配信 使いやすさ • 技術的なスキルが必要 • 開発知識が求められる 開発者向け OneSignal 料金プラン • 無料プラン：最大10,000ユーザーまで • 上限内なら送信回数無制限 機能・特徴 • テンプレートで簡単に通知作成 • A/Bテスト機能 • ユーザーセグメンテーション • マルチチャネル対応 （ウェブ、モバイル、メール） 使いやすさ • 非技術者でも簡単に使える マーケティング向け
  • Firebase Cloud Messaging （FCM）は、
    完全無料で利用でき、プッシュ通知の送信回数に制限はありません。
    開発者向けの設計で、コードを使って通知をカスタマイズできます。
    Googleのサービスと簡単に連携でき、通知の配信は高速です。
    ただし、使いこなすには技術的な知識が必要です。
  • OneSignalの無料プランでは、
    最大10,000ユーザーまで対応しています。
    コードを書かなくても、テンプレートを使って簡単に通知を作れます。
    A/Bテストやユーザーのグループ分けなど、マーケティング向けの機能が充実しています。
    ウェブ通知、スマホ通知、メール通知など多くの方法で連絡できます。
    技術者でなくても使いやすい設計になっています。

Firebase Cloud Messaging (FCM)のAPIの仕組みは、2024年6月20日をもってレガシーAPI（Legacy HTTP Protocol）が廃止され、新しい「HTTP v1 API」に完全移行しています。

Google reCAPTCHAの仕様変更に似ているね。

PWA for WPとFirebaseを使ったプッシュ通知の設定手順

PWA for WPとFirebaseを使ったプッシュ通知の設定手順 1. Firebaseプロジェクト作成 Firebaseコンソールにログイン ① 新しいプロジェクトを作成 ② プロジェクト名を入力 ③ Google Analytics設定 ④ Webアプリを登録 ⑤ アプリ名を入力し登録 ⑥ Firebase SDK構成情報 (APIキー、プロジェクトIDなど)をコピー 2. PWA for WP設定 WordPress管理画面 ① プラグインインストール・有効化 ② 「PWA > 機能」をクリック ③ 「プッシュ通知」を有効化 ④ 歯車アイコンをクリック ⑤ 「Firebase」リンクをクリック ⑥ コピーした構成情報を入力 ⑦ 保存して設定完了 ※サービスワーカーファイルが自動生成されます 3. プッシュ通知の送信 通知配信の仕組み ① Firebase SDKがデバイストークンを 取得しサーバーに保存 ② FCMのAPIもしくはFirebase コンソールから通知メッセージ送信 ③ サービスワーカーが通知を受信 ④ ブラウザに通知を表示 プロセス完了後、WordPressサイトでPWAとプッシュ通知機能が利用可能になります。 技術的なカスタマイズが必要な場合は、サービスワーカーやバックエンドコードの調整も行えます。

Firebaseプロジェクトの作成

  • まず、Firebaseコンソールにログインし、新しいプロジェクトを作成します。
  • プロジェクト名を入力し、必要に応じてGoogle Analyticsを有効にします。
  • 次に、Webアプリを登録し、アプリ名を入力して「アプリを登録」をクリックします。
  • すると、Firebase SDK構成情報（APIキーやプロジェクトIDなど）が表示されるので、これをコピーしておきます。

WordPressでPWA for WPの設定

  • WordPress管理画面で「PWA for WP」プラグインをインストールし有効化します。
  • 左メニューから「PWA > 機能」をクリックし、「プッシュ通知」を有効にして歯車アイコンをクリックします。
  • 「Firebase」のリンクをクリックし、先ほどコピーした構成情報を入力して保存します。
  • PWA for WPが自動生成するサービスワーカーファイルに、プッシュ通知関連のコードが含まれていることを確認します。必要に応じて、通知許可を求めるコードをカスタマイズすることもできます。

プッシュ通知の送信

  • Firebase SDKがデバイストークンを取得し、サーバーに保存します。
  • Firebase Cloud Messaging（FCM）のAPIやFirebaseコンソールから通知メッセージを送信できます。
  • サービスワーカーが通知メッセージを受信すると、ブラウザに表示されます。

さらに細かい調整が必要な場合は、サービスワーカーやバックエンドコードを変更するとよいでしょう。