好奇心だけで【プッシュ通知】実装してみた

はじめに

プッシュ通知、ネイティブアプリでは令和を生きる私たちにとって当たり前の機能ですよね。
通知が欲しい場面ってたくさんあるので今までLINE通知でやってきたんです。

以前PWAの記事を書いて下さったタマネギ先生から、webアプリでプッシュ通知が実装できる旨教えていただいてその時ほんとうに衝撃的だったのですが、今回そんなんやってみたいわという私の知的好奇心がずっとウズウズしておりやってみました。

実装するまでの流れ

悩む

定番ですがまずは悩みます。やる気はあろうとやり方は全く知らないので普通に。
カリキュラム完走してもはやTAの私があまり技術的なことを師匠に聞くわけにもいかない。
師匠がメール通知をオススメしてくださったので、プッシュ通知はオススメ機能では無さそうです。
でもやりたい。メール通知実装したしプッシュ通知もしたい。やった上で初めてどっちがwebアプリではよかったか判断できるし、一回やっときたい。
でもどんな仕組みで実装されているのだろうか。
一旦PWAの設定は必要な雰囲気だからタマネギ先生の記事を参考に(というか真似て)設定してみました。

▼参考(真似)にした記事

同じブランチでプッシュ通知やるぞーと意気込んでいました。
でもプッシュ通知はやり方知らないので悩みました。

調べる

プッシュ通知とはどんな流れで実装されてるのだろう。調べます。
一旦Next.js公式サイトのPWAのページ見てみると親切にサンプルコードがたくさん！
至れり尽くせりです。でも仕組みがわからんとコードみたところで手も足も出ないので一般的なプッシュ通知の仕組みを把握するところから始めました。

この辺りを理解するためにAIを酷使しました！！

実装する

今回詳細は割愛しますが、Next.js公式のサンプルコードを元に実装してだいたいいけました。
ただプッシュ通知送信するときの処理はほとんど自分で書く必要あります。
見たら出来るかというとじっくり理解する必要はあると思います。

プッシュ通知のながれ

登場人物

いきなり出てきた知らないワードだったのでこのあたり書いておきます。

• サービスワーカー：ブラウザがプッシュ通知を受け取る窓口的存在

• サブスクリプション：どのユーザーに送るかを識別する「住所」的存在

サービスワーカーに登録すると、サブスクリプションが発行されるような流れです。
サブスクリプションの情報はプッシュ通知を受信して表示するのに必要なユーザーごと(ブラウザごと)に持つ情報なので、DBに持っておく必要があります。

事前準備

1. サービスワーカーに対応しているブラウザか確認

   (以後、対応ブラウザかつユーザーの同意があった場合の操作)

2. サービスワーカーの登録

3. サブスクリプションの発行

4. サブスクリプションのDB保存

ここまではプッシュ通知を受け取るために必要な操作です。

プッシュ通知送信

1. 送信したいユーザーがサブスクリプションの登録あるか確認

   (以後、あった場合の操作)

2. サブスクリプション情報の取得(DBから)

3. 送信するメッセージの作成・送信

✅使用したライブラリ

web-pushというライブラリを使用しました。
全体的に理解するの大変だったので簡単とは感じなかったですが、これが一般的なようだったので(私調べ)使いました。

伝えたいこと

私が分からないのにワカラナイこと自体は全く気にせず(普通に悩むけど)調べてAI使いつつ理解して実装しているということ、わかっていただけると嬉しいです。
また、概要の理解や単語の説明、役割等の説明をしてもらうのにAI使っていることも伝わるとうれしいです。

突然出てきた「サービスワーカーって何。プッシュ通知においてどんな役割？ 」とか「サブスクリプションってなに？DBに保存する必要があるん？」とか。そんな疑問に答えてもらいました。
そうです、そこから知らなくてもAI使うことでそうなんやと理解して実装できるんですAI様様。

おわりに

そのうち技術編を書くかもしれないです。

本日#times_akaneにて、リポジトリは公開していますので、コード全体が見たい方はどうぞご確認ください！