Vite + React なアプリにプッシュ通知を導入する
はじめに
本記事では、Vite + React なアプリでプッシュ通知できるようにします。なお、プッシュ通知部分は OneSignal （Free プランであれば、クレジットカードの登録不要）を使用しています。
完成イメージ
最終的には下記のようにプッシュ通知を送れるようになります。ロック画面に表示されているプッシュ通知からアプリを開いています。
検証した環境
- iOS 17.0.3
- Vite 4.4.11
- React 18.2.0
- vite-plugin-pwa 0.16.5
前提
OneSignal を使ってプッシュ通知を組み込むためにサイトの URL が必要になります。
本記事では、ホスティング環境の構築部分は省略しているので、お好みの環境にデプロイしてください。（Vercel などにデプロイするのが楽だと思います）
OneSignal のセットアップ
冒頭にも書きましたが、プッシュ通知部分は OneSignal を使用していきます。
アカウントがない方は『Sign Up』からアカウントを作成してください。
OneSignal 上に App を作成する
ログイン後、ダッシュボードの『New App/Website』をクリックします。
New App / Website
サイトの基本情報を入力し、『Next: Configure Your Platform』をクリックします。
Web Configuration
組み込む方法を選択します。今回は楽に組み込める『Typical Site』を選択します。
サイト名や URL などを入力します。
次は Permission Prompt のセットアップです。
プッシュ通知を送信するためには、ユーザーに通知を許可してもらう必要があります。ここでは、その通知許可を求めるプロンプトをどのタイミングで表示するか設定できます。デフォルトの場合、ページ表示から10秒後にプロンプトが表示されます。他にもボタンが押された時にプロンプトを表示など要件に応じて柔軟に設定できそうです。
今回は動作確認しやすくするため、ページ表示直後にプロンプトを表示します。秒数を変更するには、下記の三点リーダー → 『Edit』の順にクリックします。
Customize Slide Prompt Text を有効にし、プロンプトの文言を設定します。（実際はこれとは別にOSのプロンプトが追加で表示されます）
次に Auto Prompt を有効にし、And Delat を 0 に変えます。これにより画面遷移直後にプロンプトが表示されます。
なお、今回は動作確認のため直後に表示していますが、ユーザーが必要なタイミングで表示するのが良いと思います。
次は通知許可された時に送るメッセージを設定します。この設定は任意なのですが、プッシュ通知の動作確認をする時に役立つので設定しておきます。
このまま『Save』をクリックします。
次に 『Download OneSignal SDK files』をクリックします。この SDK は後ほど使用するのでダウンロードしておいてください。
下にスクロールすると、下記のようなコードが表示されます。React アプリの場合はこれとは別の方法で埋め込みます。そのため、コードはスルーで良いのですが、appId の部分は後ほど使用するのでメモしておいてください。
このまま『Finish』をクリックします。
画面遷移後、下記のように Active と表示されてれば OK です。
Vite + React + TypeScriptのテンプレートを使ってアプリ作成
次はアプリケーション側を対応していきます。
今回は Vite + React + TypeScript のテンプレートを使っていきます。
$ yarn create vite push-notification
yarn create v1.22.19
[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...
[4/4] 🔨 Building fresh packages...
success Installed "create-vite@4.4.1" with binaries:
- create-vite
- cva
[###########################################################################################################] 107/107? Select a fra✔ Select a framework: › React
✔ Select a variant: › TypeScript + SWC
Scaffolding project in /Users/hinokeita/sandbox/zenn-content/sandbox/push-notification...
Done. Now run:
cd push-notification
yarn
yarn dev
✨ Done in 4.86s.
OpenSignal の SDK を配置する
事前にダウンロードしておいた OpenSignal の SDK（OneSignalSDKWorker.js） を public 配下に配置します。
React アプリに OneSignal を組み込む
ライブラリのインストール
yarn add react-onesignal
ページ表示時に OneSignal のプロンプトを開く
+ import { useEffect, useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'
+ import OneSignal from 'react-onesignal'
function App() {
+ useEffect(() => {
+ (async() => {
+ OneSignal.init({
+ // TODO: 事前にメモしておいた appID に置き換えてください。OneSignal のダッシュボードでヘッダーの Settins → Keys & IDs でも確認できます。
+ appId: 'ec29a915-d795-40cf-8f9b-d604a46d3e29',
+ })
+ })()
+ }, [])
+ const [count, setCount] = useState(0)
return (
<>
<div>
<a href="https://vitejs.dev" target="_blank">
<img src={viteLogo} className="logo" alt="Vite logo" />
</a>
<a href="https://react.dev" target="_blank">
<img src={reactLogo} className="logo react" alt="React logo" />
</a>
</div>
<h1>Vite + React</h1>
<div className="card">
<button onClick={() => setCount((count) => count + 1)}>
count is {count}
</button>
<p>
Edit <code>src/App.tsx</code> and save to test HMR
</p>
</div>
<p className="read-the-docs">
Click on the Vite and React logos to learn more
</p>
</>
)
}
export default App
PWA 化していく
vite-plugin-pwa プラグインのセットアップ
今回は vite-plugin-pwa を使って PWA 化していきます。
このプラグインを使うと、PWA 化するために必要なマニフェストファイルなどをビルド時に生成してくれます。
インストールする
yarn add vite-plugin-pwa -D
プラグインを組み込む
Vite の設定ファイルに組み込みます。
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'
+ import { VitePWA } from 'vite-plugin-pwa'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
react(),
+ VitePWA()
],
})
PWA のアプリをインストール可能にする
このままではまだインストール要件を満たしてないので、追加で設定していきます。
各種サイズのアイコンを用意する
192x192 サイズなどのアイコンが必要なります。
各種サイズのアイコンは下記で生成してください。
アイコンのダウンロードが終わったら、下記のように名前を変更し、public 配下に配置します。
- 192.png → pwa-192x192.png
- 512.png → pwa-512x512.png
favicon を用意する
favicon は下記のサイトで生成できます。
favicon のダウンロードが終わったら下記を public 配下に配置します。
- favicon.ico
- apple-touch-icon.png
manifest ファイルにアイコンなどを追加する
先ほど生成したアイコンを設定していきます。
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'
import { VitePWA } from 'vite-plugin-pwa'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
react(),
+ VitePWA({ registerType: 'autoUpdate',
+ includeAssets: ['favicon.ico', 'apple-touch-icon.png'],
+ manifest: {
+ name: 'Test App',
+ short_name: 'Test', // ホーム画面に追加した時に表示される名前
+ description: '通知テストアプリ',
+ theme_color: '#ffffff',
+ // 各サイズごとのアイコンは下記で生成する。
+ // https://www.pwabuilder.com/imageGenerator
+ icons: [
+ {
+ src: 'pwa-192x192.png',
+ sizes: '192x192',
+ type: 'image/png'
+ },
+ {
+ src: 'pwa-512x512.png',
+ sizes: '512x512',
+ type: 'image/png'
+ },
+ {
+ src: 'pwa-512x512.png',
+ sizes: '512x512',
+ type: 'image/png',
+ purpose: 'any'
+ },
+ {
+ src: 'pwa-512x512.png',
+ sizes: '512x512',
+ type: 'image/png',
+ purpose: 'maskable'
+ }
+ ]
+ }
})
],
})
検索エンジンがクロールできるようにする
public 配下に下記の robots.txt を作成します。
User-agent: *
Allow: /
ここまでで public 配下が下記のようになっていればOKです。
ビルド & 再デプロイ
あとはビルドして用意しておいたホスティング環境にデプロイすれば準備完了です。
動作確認
ここからは実際に iPhone を使って動作確認していきます。
PWA アプリとしてインストールし、プッシュ通知を許可する
下記の共有アイコンをタップします。
『ホーム画面に追加』をタップします。
このまま追加します。
これでホーム画面に追加されます。
ホーム画面に追加したアプリを開くと下記のようなプロンプトが表示されるので許可します。
続けて OS のプロンプトも表示されるのでこちらも許可します。
許可した場合のメッセージを設定していれば下記のように表示されます。
プッシュ通知を送れるようにする
Audience → Subscriptions の順にクリックし、Add to Test Subscriptions をクリックします。
プッシュ通知時にこのユーザーを選択するので分かりやすい名前をつけておきます。
プッシュ通知を送る
プッシュ通知のメッセージを設定します。
先ほど作成したユーザーにプッシュ通知を送ります。
iPhone に下記のような通知が来ていれば成功です🎉
おわりに
本記事ではプッシュ通知を組み込む方法について紹介しました。メールにアプリのリンクを載せていた場合、ユーザーは2タップ必要ですが、プッシュ通知の場合、1タップでアプリを開くことができます。そのため、メールよりプッシュ通知の方が適しているものもあると思うので、その辺りは色々試してみたいなと思っています。（ものによるのでメールの通知がなくなるわけではない）
Discussion