1️⃣

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

TETRER

2023/11/10に公開

はじめに

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

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

https://onesignal.com/

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

https://nextjs.org/

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

https://vercel.com/

実装イメージ

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

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

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

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

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

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

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

npm install react-onesignal

OneSignalのサイトからダウンロードしたSDKのzipファイルを展開し、「OneSignalSDKWorker.js」をNext.jsのpublicフォルダに配置します。
「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>
  )
}

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

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

GitHubのアカウントを作成し、リポジトリを作成します。
公開設定はPrivateで問題ありません。
Next.jsのプロジェクトファイル一式を、リポジトリにPUSHします。
Vercelのアカウントを作成し、Vercelのサイトにログインします。
GitHubとの連携設定をおこない、GitHubからのimportで新しいプロジェクトを作成します。

これだけでGitHubのソース更新時に、自動でVercelにデプロイする連携が作られます。
作成したプロジェクトのダッシュボードを開きます。
ドメインが自動割り当てされているので、
デプロイ先URL「https://****-****.vercel.app」をコピーします。