Next.jsでOneSignalを使ってWebプッシュ通知を行う

投稿日
Next.jsでOneSignalを使ってWebプッシュ通知を行う

Next.jsのプロジェクトでWebプッシュ通知を行う方法を記載します!

Webプッシュ通知にはOneSignalというプッシュ通知を行う際に良く利用されるサービスを用います。


始める前は正直難しそうだな、、と思っていたのですが、

分かりやすいサービスで非常に導入がしやすかったです!

検証した環境

1 nextjs 14.1.3
2 react-onesignal 3.0.1

OneSignalへの登録

Push Notification Software to Improve Customer Engagement - OneSignal

プッシュ通知を行うサービスOneSignal

OneSignal は

  • 無料で始められる
  • モバイルへのプッシュ通知、webのプッシュ通知が行える
  • A/Bテスト、ユーザープロパティに応じた通知最適化

といった特徴があります



プランと金額はこのようになっています

Pricing - OneSignal

OneSignalのプランにより出来ること


Web Pushの設定

アカウントの登録を進めていくのと同時にアプリを作成されていて

計7ステップあることが表示されます

OneSignalの設定は7ステップ


Push Notification > Web を選択

Push Notification > Web を選択


  • Typical Site を選択
  • サイト名入力
  • ローカルのURLを入力( http://localhost:3000 のような値)
  • LOCAL TESTINGをONに(ローカルのURLを入力すると表示されます)
サイト名などを入力


Permission Prompt Setup からCustom Linkを追加

Prompt Editorが表示されて、内容はデフォルトのままでOKです!

Custom Linkを追加


デフォルトで登録されている「Push Slide Prompt」を削除します。

デフォルトのPush Slide Promptを削除

サイトアクセス時に自動で通知許可のダイアログを表示する場合はPush Slide Promptを残します


その他の設定はそのままでSaveボタンを押下




すると以下のような設定をアプリケーションに行ってね、というメッセージが表示されます

アプリケーションへの設定手順が表示される

ここで重要なのは

  • Download OneSignal SDK files からサービスワーカーファイルをDL
  • appId以降のOneSignalのappIdを取得

の2点がポイントです

Next.jsへの設定

OneSignalが機能することの確認

まず Next.js で OneSignal が接続出来ていることを確認出来るようにします

手順としては大きく3つ

  1. サービスワーカーファイルをアプリケーションに設置
  2. OneSignalの設定を追記
  3. 通知用ボタンを表示

1. サービスワーカーファイルをアプリケーションに設置

OneSignal公式ページのSDKファイルをダウンロードボタンからサービスワーカーファイルをダウンロードする

Download OneSignal SDK filesからダウンロードしたサービスワーカーのファイルをpublicフォルダに設置します

publicフォルダ内にサービスワーカーのファイルを設置する

意図としてはOneSignalが以下のURLにサービスワーカーのファイルがあることを想定しているためです

https://{yoursite.com}/OneSignalSDKWorker.js

参考: React JS Setup



そのため、ローカルで確認する際は

http://localhost:3000/OneSignalSDKWorker.js

にアクセスした際にファイルの中身が表示されればOKです!

所定のURLにサービスワーカーのファイルがあることを確認


2. OneSignalの設定をNext.jsに追加

React向けのOneSignalのパッケージを追加します

npm install react-onesignal


OneSignalを初期化するためのファイルを作成します。


いくつかのドキュメント読んだ限りApp Routerの場合client側で呼び出した方が良さそうなので、

'use client' を使いつつ

styled-componentsなどを使用する方法を真似た形のregistryファイルを作って対応してみます

.env.local
NEXT_PUBLIC_ONESIGNAL_APP_ID={{ OneSignalで取得したappId }}
lib/OneSignalRegistry.tsx
'use client'
 
import { ReactNode, useEffect } from 'react'
import OneSignal from 'react-onesignal'
 
export function OneSignalRegistry(): ReactNode {
  useEffect(() => {
    const initializeOneSignal = async () => {
      await OneSignal.init({
        appId: process.env.NEXT_PUBLIC_ONESIGNAL_APP_ID || '',
        notifyButton: {
          enable: true,
        },
      })
    }
    initializeOneSignal()
  }, [])
 
  return undefined
}
app/layout.tsx
import type { Metadata } from 'next'
import { Inter } from 'next/font/google'
import './globals.css'
import { OneSignalRegistry } from '@/lib/OneSignalRegistry'
 
const inter = Inter({ subsets: ['latin'] })
 
export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <OneSignalRegistry />
        {children}
      </body>
    </html>
  )
}


3. 通知用ボタンを表示

通知を許可するためのボタンを表示します

Next.jsを初期化した時に作成されたルートの page.tsx に記載してみます

app/page.tsx
import Image from 'next/image'
 
export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <div className="onesignal-customlink-container" />
      ・・・

これで開発環境を立ち上げてみると

通知を許可出来るようになりました! 🙌



この時ブラウザのコンソールを確認すると「OneSignalを2回Initializeしようとしているよ」というエラーメッセージが表示されています

ブラウザのコンソールにOneSignalを2回Initializeしている旨が表示される


これは、開発環境だとReactのStrictModeで必ず2回呼び出しているのが原因で、

本番環境では表示されず特に問題にならないことが公式に書かれています

参考: React JS Setup

OneSignalからWebプッシュ通知を送る

いよいよWebプッシュ通知を送れるようにしていきます!

Vercelにデプロイ

Vercelにデプロイしサイトの表示を出来るようにします。


次の項目の設定をしていないため、

この時はまだOneSignalの通知ボタンが表示されません


環境変数 NEXT_PUBLIC_ONESIGNAL_APP_ID の指定も忘れずに 📝

OneSignalの対象URLを変更

OneSignalの設定が http://localhost:3000 になっているはずなので、

デプロイしたVercelのURLにを変更します

OneSignalのURLをVercelのものに変更


これで改めてVercelを表示するとWebプッシュ通知のボタンが表示出来ました!

VercelにWebプッシュ通知を許可するためのボタンが表示出来た

ここで「Subscribe to push notifications」ボタンよりプッシュ通知を許可しておきます

Webプッシュ通知を送る

OneSignalの Messages > Push よりメッセージを作成し

OneSingalのPush設定ページよりメッセージを作成

「Review and Send」を押下します




すると、Webプッシュ通知が無事届きました!!🎉

Webプッシュ通知が無事届いた
プロフィール画像
Yuki Takara
都内でフリーランスのエンジニアをやってます。フロントとアプリ開発メインに幅広くやってます。