PWAプッシュ通知を追加する簡単な方法をお探しですか？
プログレッシブウェブアプリ（PWA）は、あらゆるデバイスで動作するアプリです。しかし、ウェブプッシュ通知の送信には常に何らかの課題が伴います。通常、最大の課題は配信率です。PWAにウェブプッシュを追加する方法はたくさんありますが、PWAから実際に配信されるウェブプッシュ通知をどのように送信すればよいのでしょうか？
心配いりません！この記事では、10分以内に信頼性の高い配信率でPWAプッシュ通知を送信する方法をステップバイステップでご紹介します。
さあ、始めましょう。
要約 — PWAプッシュとは？ プログレッシブウェブアプリ（PWA）プッシュ通知は、PWAに登録されたサービスワーカーを通じて配信される標準的なウェブプッシュメッセージであり、ウェブページが閉じている場合でも、ウェブからインストールされたアプリがプッシュメッセージを受信できるようにします。
今すぐPWAプッシュ通知を送信！
プッシュ通知は、リピートトラフィック、エンゲージメント、売上を自動で伸ばすのに役立つ、非常に効果的で低コストなマーケティングツールです。
PWAプッシュ通知のインストール方法
プログレッシブウェブアプリにプッシュ通知を追加するのは非常に簡単です。この記事の手順に従ってください。すべてのステップを完了すれば、この記事の終わりまでには、このようなプッシュ通知を送信できるようになります。
- PWAロジックとプッシュ処理を組み合わせたサービスワーカーをサイトのルートに登録します。
- PushEngageスクリプトをインストールし、インストールコードを
<head>にコピーします。 - オプトインモーダルを設定し、PushEngageダッシュボードでキャンペーンを作成します。
主な課題は、すべてのウェブプッシュ通知ソフトウェアがservice_worker.jsというJavaScriptファイルを使用していることです。サービスワーカーは、ポップアップモーダルを通じてプッシュ通知購読者を取得するのに役立ちます。しかし、すべてのPWAにはすでに別の目的を持つサービスワーカーファイルが存在します。そして、一度にPWAが使用できるサービスワーカーは1つだけです。
簡単に言うと、ウェブプッシュサービスはPWAを混乱させます。そのため、プッシュ通知購読者を取得したり、取得しなかったりします。通知を送信できる時もあれば、できない時もあります。最終的には、プッシュメッセージを全購読者リストに送信しても、一部の購読者にしか配信されないという状況になる可能性もあります。
PWAプッシュ通知の送信にはPushEngageの使用をお勧めします。PushEngageは世界No.1のプッシュ通知ソフトウェアです。そのため、キャンペーンは安全な手に委ねられていることがわかります。
もちろん、MendixのようなPWAビルダーには独自のプッシュ通知システムが付属しています。しかし、他のプッシュ通知サービスに移行したい場合はどうでしょうか？プッシュ通知キャンペーンに対して、より柔軟性と制御を求めている場合はどうでしょうか？さらに、これらのサービスは通常、プッシュキャンペーンを作成するためのAPIを提供しますが、PushEngageでは、プッシュキャンペーンを作成、スケジュール、送信、管理できる使いやすいダッシュボードが提供されます。
そして、はい、Androidアプリのプッシュ通知を送信するためにFirebase Cloud Messaging (FCM)を使用できます。しかし、PushEngageを使用すると、AndroidアプリとWebプッシュ通知、iOSおよびiPadOSのWebおよびアプリプッシュ通知、ブラウザプッシュ通知を送信できます。
一番良いところは？数回のクリックで強力なeコマースプッシュ通知を送信することもできます。
| 事実 | 値 |
|---|---|
| 主な配信メカニズム | サービスワーカー (プッシュサブスクリプション) |
| 通常のセットアップ時間 | ~10分 (基本) |
| 一般的な要件 | ルートスコープのservice_worker.js + manifest.json |
| 動作環境 | ほとんどのデスクトップブラウザとAndroid (プラットフォームによって異なります) |
始めましょう。
ステップ1：PushEngageアカウントの設定
PushEngageのホームページにアクセスし、開始するボタンをクリックします。
PushEngageを無料で試すことができます。リピートトラフィックとエンゲージメントが必要な小規模ブログを運営している場合は、おそらくそれで十分でしょう。しかし、売上を真剣に考えている場合は、エンタープライズパッケージを取得して、自動キャンペーンのロックを解除する必要があります。
PushEngageアカウントにサインアップしたら、PushEngageダッシュボードにアクセスし、サイト設定 » サイト詳細に移動してください。
ここでロゴ、サイト名、サイトURLを設定できます。後で全体のセットアップをテストできるように、これらの項目を今すぐ整理することが非常に重要です。
ステップ2：PushEngageからインストールコードを取得する
プッシュ通知をインストールするには、インストールコードを取得する必要があります。サイト設定画面で下にスクロールし、セットアップ手順はこちらボタンをクリックしてください。
次に、どのサイトでもタブをクリックしてください。
JavaScriptコードを使用してプッシュ通知の送信を開始できます。
ステップ3：PWAプッシュ通知用のサービスワーカーコードを追加する
プロセスの最も難しい部分がついにここにあります。PushEngageダッシュボードの「セットアップ手順」の下に、サービスワーカーファイルをダウンロードするオプションも表示されます。
重要: PWAは一度に1つのアクティブなサービスワーカーしか持つことができません。プッシュコードを既存のサービスワーカーにマージしてください。デフォルトでは、PWAはサービスワーカーファイルを必要としません。任意のサイトをプログレッシブウェブアプリに変えるために必要なのは、マニフェストファイルだけです。したがって、PWAにサービスワーカーファイルがない場合は、PushEngageサービスワーカーをウェブサイトまたはウェブアプリのルートディレクトリに追加するだけです。
しかし、PWAにすでにサービスワーカーが配置されている場合は、PushEngageプッシュ通知サービスワーカーファイルをそのまま直接アップロードしないでください。テキストエディタ（メモ帳など）でPushEngageサービスワーカーを開き、PushEngageサービスワーカーファイル内のコードをコピーします。次に、PWAのサービスワーカーファイルを見つけて、PushEngageサービスワーカーコードをファイルに追加するだけです。
この手順を怠ると、プッシュ通知購読者を収集できなくなります。
ステップ4：PushEngageオプトインを設定する
次に、PushEngageダッシュボードに戻ります。Design » Popup Modalsに移動し、希望するオプトインを選択します。
ここでのアイデアは、訪問者に購読する確かな理由を与えることです。そのためのヘルプが必要な場合は、カスタムプッシュ通知オプトインを作成する方法 に関する記事を確認してください。
そして、開始するためのテンプレートが必要な場合は、コンバージョン率の高いプッシュ通知オプトインに関するこの記事を確認してください。
ステップ#5：最初のキャンペーンを作成する
これでPWAがプッシュ通知を送信できるようになったので、実際のキャンペーンを作成する必要があります。
放棄されたカートキャンペーンは、放棄されたカートをコンバージョンさせることで追加の収益を生み出すのに役立ちます。これは、自動パイロットで多くの製品を販売する簡単なリマインダーです。したがって、直接販売をもたらすランディングページをサポートするのに最適なキャンペーンです。
PushEngageダッシュボードにアクセスし、「キャンペーン」>「トリガーキャンペーン」>「新しいトリガーキャンペーンを作成」に移動するだけです。
次に、「カート放棄」キャンペーンテンプレートを選択します。
自動マーケティングキャンペーンの作成が初めての場合は、放棄されたカートプッシュ通知キャンペーンの設定方法に関する記事に従うことができます。すべての手順に従えば、次のようなプッシュ通知を設定できます。
そして、念のためお伝えしておきますが、プッシュ通知キャンペーンが効果的であるために、あなたが有名ブランドである必要はありません。実際、PushEngageは中小企業がプッシュ通知を使用して成長するのを支援するために構築されました。
しかし、サイトのマーケティングを開始する前に、プッシュ通知の購読プロセスに問題がないか確認してください。プッシュ通知のテストに関するこの記事をご覧ください。すべてが完璧に機能していれば、完了です！
よくある質問
Q: PWAプッシュにはサービスワーカーが必要ですか？
A: はい。PWAプッシュメッセージは、プッシュイベント処理を含む必要がある登録済みサービスワーカーによって配信されます。
Q: iOSでPWAプッシュを送信できますか？
A: サービスワーカーベースのウェブプッシュのiOSサポートは限定的です。AndroidおよびデスクトップブラウザはPWAプッシュを広くサポートしています。（正確なiOSの状況があれば、現在の短い声明に置き換えて引用してください。）
Q: 最も一般的な統合ミスは何ですか？
A: PWAの既存のサービスワーカーとマージせずに、個別のプッシュサービスワーカーをルートにアップロードすることです。これにより、競合が発生し、購読が見逃されます。
PWAプッシュ通知を追加した後、何をすべきか？
今回は以上です、皆さん！
これでPWAプッシュ通知を送信できるようになりました。また、強力なウェブプッシュ通知キャンペーンを作成して成長を促進することもできます。すべて10分未満で完了します！
他の自動プッシュ通知キャンペーンの作成方法もご覧ください。ほとんどのプッシュキャンペーンはシンプルで効果的です。そのため、サイトに複数のキャンペーンを設定することをお勧めします。以下に、開始するのに最適なキャンペーンをいくつか紹介します。
まだ始めていない場合は、PushEngageを使い始めましょう。PushEngageは世界No.1のプッシュ通知ソフトウェアです。したがって、あなたのキャンペーンは安全な手に委ねられています。
