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

2024.04.24

OneSignalへの登録
Web Pushの設定
Next.jsへの設定
OneSignalが機能することの確認
OneSignalからWebプッシュ通知を送る
Vercelにデプロイ
OneSignalの対象URLを変更
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 は

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

といった特徴があります

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

Pricing - OneSignal

Web Pushの設定

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

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

Push Notification > Web を選択

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

Permission Prompt Setup からCustom Linkを追加

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

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

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

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

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

ここで重要なのは

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

の2点がポイントです

Next.jsへの設定

OneSignalが機能することの確認

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

手順としては大きく3つ

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

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

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

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

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

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

参考: React JS Setup

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

http://localhost:3000/OneSignalSDKWorker.js

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

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" />
      ・・・