OneSignal、Next.js、VercelでWebプッシュ通知を作る

はじめに

今回は以下サービスを使いプッシュ通知を試してみました。構築手順をご紹介します。

• プッシュ通知「OneSignal」
  プッシュ通知のメッセージを送信することができるサービスです。無料プランもあります。
  セグメンテーション、自動プッシュ通知、A/Bテスト、トラッキングなどの機能があります。

https://onesignal.com/

• Webアプリ「Next.js」
  ReactベースのJavaScriptフレームワークです。Vercel社が開発元です。

https://nextjs.org/

• ホスティング「Vercel」
  GitHubなどから簡単にデプロイし、Webアプリを公開できるクラウドプラットフォームです。

https://vercel.com/

実装イメージ

1. Webアプリ画面上にプッシュ通知許可設定ボタンを配置します。
   
2. ユーザーはボタンをクリックして表示されるダイアログで、通知を許可します。
   
3. Webアプリ管理者がOneSignalからメッセージを送信します。
4. ユーザーはプッシュ通知でメッセージを受信します。
   

【１】OneSignalでアプリケーションを登録する

1. OneSignalのアカウントを作成してログインします。
2. Apps画面で「New App/Website」ボタンをクリックします。
3. アプリ名と組織名を入力、プラットフォームとして「Web」を選択し
   「Next: Configure Your Platform」ボタンをクリックします。
   
4. 組み込み方法として「Typical Site」を選択し、サイト名やサイトURLを入力します。
   ここでは一旦URLを「http://localhost:3000」、LOCAL TESTINGを「ON」にします。
   
5. 通知許可の表示方法として「Custom Link」を追加します。
   通知許可設定のボタン名や案内文、色などを任意に変更できます。
   ここで表示されるdivタグを、Webアプリに埋め込むとボタンが表示されます。
   
6. デフォルトで「Push Slide Prompt」の設定が登録されていますが、
   サイトアクセス時に自動で通知許可のダイアログが表示されないよう、
   今回は「Push Slide Prompt」の設定を削除します。
7. 「Save」ボタンをクリックします。
8. 「Download OneSignal SDK files」ボタンをクリックして、SDKをダウンロードします。
   SDKファイルは、後でNext.jsのプロジェクトに配置して利用します。
9. Add Code to Site欄に表示される「appId」をコピーして控えます。
   Next.jsでの実装方法と異なるため、コード全体のコピーは不要です。
   
10. 「Finish」ボタンをクリックして、このステップは完了です。

【２】Next.jsにOneSignalを組み込む

1. Next.jsのプロジェクトを作成します。

npx create-next-app push-notification-demo
cd push-notification-demo

2. React OneSignalライブラリをインストールします。

npm install react-onesignal

3. OneSignalのサイトからダウンロードしたSDKのzipファイルを展開し、「OneSignalSDKWorker.js」をNext.jsのpublicフォルダに配置します。
4. 「app/page.tsx」で以下のようにOneSignalの利用設定処理と、
   通知許可設定ボタンを表示するdivタグを記載します。

"use client"
import styles from './page.module.css'
import React, { useEffect } from 'react';
import OneSignal from 'react-onesignal';

export default function Home() {
  useEffect(() => {
    (async() => {
      await OneSignal.init({
        appId: '｛OneSignalのサイトで取得したappId｝',
        notifyButton: {
            enable: true,
        }
      });
    })()
  })

  return (
    <main className={styles.main}>
      <div className='onesignal-customlink-container'></div>
    </main>
  )
}

5. npm run devでサービスを起動します。
6. Chromeなどのブラウザで「http://localhost:3000」にアクセスします。
7. 「Subscribe to push notifications」ボタンをクリックします。
8. 通知許可の確認ダイアログが表示されたら、一先ず成功です。
   確認ダイアログの表示方法は、OSやブラウザにより異なります。

【３】GitHubからVercelへデプロイする

1. GitHubのアカウントを作成し、リポジトリを作成します。
   公開設定はPrivateで問題ありません。
2. Next.jsのプロジェクトファイル一式を、リポジトリにPUSHします。
3. Vercelのアカウントを作成し、Vercelのサイトにログインします。
4. GitHubとの連携設定をおこない、GitHubからのimportで新しいプロジェクトを作成します。
   
   これだけでGitHubのソース更新時に、自動でVercelにデプロイする連携が作られます。
5. 作成したプロジェクトのダッシュボードを開きます。
6. ドメインが自動割り当てされているので、
   デプロイ先URL「https://****-****.vercel.app」をコピーします。

【４】デプロイ先URLをOneSignalに設定する

1. OneSignalのダッシュボード画面を開きます。
2. アプリケーションの設定画面「Settings」を開きます。
3. Webプラットフォームの設定画面を開きます。
4. サイトURLを「https://****-****.vercel.app」に書き換えます。
5. 「Save」ボタン、及び「Finish」ボタンをクリックします。
   以上で準備完了です♪ 最後に動作確認します。

【５】プッシュ通知を実行する

1. Chromeなどのブラウザで「https://****-****.vercel.app」にアクセスします。
2. 画面上の「Subscribe to push notifications」ボタンをクリックします。
3. 通知許可の確認ダイアログが表示されるので、許可します。
4. OneSignalのダッシュボード画面を開きます。
5. 「Audience＞Subscriptions」画面を開き、通知許可した端末情報が登録されていることを確認します。
6. 「Messages＞New Message＞New Push」から、メッセージ設定画面を開きます。
7. 件名やメッセージ本文を入力し、「Review and Send」ボタンをクリックします。
   
8. 送信する内容を確認し、「Send Message」ボタンをクリックします。
9. メッセージを受信できたら動作確認成功です🎉
   

おわりに

OneSignalはプッシュ通知の導入が簡単で、スマートフォンでも受信確認できました。
また、登録者数や通知メッセージのクリック率などがダッシュボードで確認でき便利でした。

プッシュ通知はリアルタイムにユーザーへ情報を届けやすいメリットもありますが、
不要な情報や通知数が多いと迷惑になるため、適切な運用の検討が必要ですね🔔

参考サイト

• Web Quickstart | OneSignal
• React JS Setup | OneSignal
• Add Web Push Notifications to Your Next App | OneSignal
• Projects and deployments | Vercel Docs
• Vite + React なアプリにプッシュ通知を導入する
• Vercelの基本的な使い方まとめ