この番組はエンジニアの成長は楽しい学びからをもとに我々が学んだことをワイワイとアウトプットするラジオでございますございますございますいやー今日はですね実は我々はテック系ポッドキャストなんですけど実はそうなんですよね今日はですね普通にテックの話をしようかなと思います素晴らしいいいですねしかも番組のコンセプト通り本当に日々学んだことをやっていこうかなという感じですね素晴らしい最近ですね

私開発をしてるんですけどもともとしてたんですけど今私一人しかいないので全ての機能の実装責任は私にあるんですよいいですねいいか悪いかは置いといてエンジニアとしてはすごい願ってもらいたいんですけど考えることが多くてこの前も初めて結構しっかりCICDというか

パイプライン組むみたいなところもやったりしてすごく学びが多いというかストレスが多いというか負荷が高いですねはいはいはいはい

今までそれこそ普通の会社っていう言い方あってるかわかんないですけど一つのシステム作る上でも多分一部だけやるっていうんですかだしあともっと言うと昔からあるシステムとかだとモダンなことやってないっていうこともあるでしょうしCICDもそうかもしれないしあとはリリース後は保守監視とかもそうかもしれないし

っていう中で全部やるってそりゃ色々ありますよね特になんか運用の仕組みとかは結構今までだと特にSESも長かったんで最初からあることが多かったというかほとんどあったどこでもあった最初からもちろんそこに対して改善を提案するとかはありましたけど一から組むってすごい学びが多いなと思ったんですねその中でも今日は

運用の話しといてあれなんですけどめちゃくちゃフロント側の話をしようと思いますフロントフロントではないかフロントではないわフロントバックどっちも関係あるどっちも関係あるいわゆるコラボレーションなんだ今日はですねPWAでPWAプッシュ通知を送るという

内容についてお話ししていこうかなと思ってますプッシュ通知かちなみにカイチ君PWAどんなものですかまず何の略かがわからんプッシュプッシュなのかPWAワークフローA今Aで悩んでますけどPとWどっちも違いましたマジかよこれはですねプログレッシブウェブアプリケーションですね

全然ちげえじゃねえかよびっくりしたそうなんですプッシュじゃないっていうこれ何かっていうとあくまでブラウザの一機能なんですけどまるでスマホアプリのようにウェブサイトを動かせますよという仕組みでございますほういまいちピンときてないですねきてないですね要は

本体はウェブアプリなんだけどスマホアプリのように動かせるやつそもそもなんですけどスマホアプリとウェブアプリの決定的な違いみたいなのがこれとこれとこれとこれって言えないですいいですね確かにねそれむずいよね例えばだけどブラウザってiPhoneだとブックマーク保存できるじゃないですかアイコン画面にそれと何が違うのってことですよね

動作的にスマホアプリじゃないとできないこととウェブアプリスマホアプリじゃないとできないことが多分あるはずでウェブアプリじゃないとできないことはないんじゃないかなとは思うんですけどスマホアプリじゃないとできなさそうなのはスマホの機能を使うことなのかなまあそれで言うとねネイティブアプリほどスマホの機能を使えないと思うんですがはい

特徴大きいのは4つあるかないや3つかいや2つかなどんどん減ってったななんか機能的にこれが分かりやすいよねっていうのは2つだと思う当てていいですかはいさすがにプッシュ通知ができるさすがにプッシュ通知はいそうさすがにプッシュ通知ができるのとなんだろうなあとプッシュ通知以外でなんでしょうウェブアプリ側から何かアクションできそうほうなんだろう何があるんだあえーとうん

これ違うかななんかリアルタイムに描画を更新できそうブラウザー側から更新しなくても更新してくれるみたいなできるのができそうだなちょっとできそうだけどどうなんだろうなでもなんかそれはPWAの機能じゃないっていうこともあるじゃないですか別に別にウェブでもできないこともないしねウェブでできますね

グラフQLとかでありますもんねオフラインで動作するどういう仕組みキャッシュですね結構がっつり強力なキャッシュのコスブラウザーがやってくれるんですねそこまでおまけ的なところで言うとホーム画面に追加できてこれはブックマークでも同じっちゃ同じなんですけどただそのアプリ用のアイコンとか設定できるんですよアプリ名とか

なるほどファビコンみたいなノリでそれ用のやつがあるんですねそうそうそうそうあとはブラウザ特有のURLのバーみたいなやつあるじゃないですかあれとかなくなりますねブラウザ側にその表示を強制的にしないようにできるっていうそもそもPWAブラウザで動いてるからブラウザがアプリっぽく動くようにその辺を消してブラウザ感なくしてくれてるんだろうなって気がするけど

なんか面白いですねUIとしてこうやってあげた方が親切だと思ってるからそうなってると思うんですけどそうなんだこれでよくスマホアプリを作る前の検証とかで使われるイメージあるんですよ僕の中だとPWA一旦は最初はPWAでいいよねみたいな後ほど必要だったらアプリ作るけどみたいなテンション

特に今エンジニアに一番馴染み深い可能性あるのはカーソルかなって思いますねカーソルはPWAなんですかカーソルはバックグラウンドエージェント出たじゃないですかちょっと前にあれ出た時にスマホからも使えるようになるよってそれがアプリじゃなくて確かPWAで出ましたねへーそうなんだうん

勉強になりましたはいなのでこういうふうにしてあの pwa 化をするとですねすっプッシュ通知を送れるようになるんで 今日ちょっとプッシュ通知のあの仕組みというかプッシュ通知で地味になんか仕組み知らなくないですか 身近だけどなんかあの深いところはよく知らないですねなんか僕の今の解像度だとパブリッシャーとサブスクライバーがいて でパブリッシャーがなんか

送るってやるとどっかしらでサブスクライバーの宛先みたいなのを参照してそれらにガッて送られるみたいなそのぐらいの解像度です正解ですもはやもはや正解なんですけどでもそれをもうちょい詳しく紹介していこうかなって感じですね詳しくお願いしますということでまず今回ウェブでプッシュ通知を送る場合に必要な概念とか登場人物たち大事なのが5つあります

5つもいるんですね結構いますねまずねその1マニフェスト.jsonっていうファイル見覚えあるこれですね何かっていうと自分アプリとしてはこういうスペックですみたいな自己紹介みたいなやつですねアプリのスペックが書いてるんですか要はホーム画面に追加した時にこのアイコン使ってねとかホーム画面にこの名前で表示してねとか

それはじゃあPWAの登場人物の5人のうちの1人マニフェストジェイソンって感じですね混ざってるわ今回の登場人物の5つに関して言うとPWAに必要なものとプッシュ通知に必要なものでちょっと分かれてますはいはいはいでマニフェストジェイソンがPWAに必要なやつPWAとして登録するために必要なやつなるほど

あとは他は全部プッシュ通知関連かなサービスワーカーはちょっとまた上がってるな次の登場人物なんですけどサービスワーカーこれはですねプッシュ通知を送ってくるサーバーとやり取りしたりとかさっきオフラインで動くって言ったじゃないですかそういうキャッシュとかを残したりとか

クライアント側で動くなんかちょっとその便利君みたいなファイルですねじゃあURLにアクセスすると一旦なんかサービスワーカーをダウンロードさせてサービスワーカーが吉田にいろいろ取ってきてでキャッシュしたりさせるみたいな察しが良すぎるイメージなんですねそうですあーなるほどえー

そんな動きするんですねPWAってそうなんですこのサービスワーカーの1機能でそのプッシュ通知を受け取るための機能が実装できるって感じですね次がねアプリケーションサーバーこれは普通にウェブアプリの時のサーバーですねウェブサーバーというかアプリサーバーかなサーバー側で動く言い方むずいなスクリプトを処理してる系のサーバーですね

ウェブサーバーですかウェブサーバーっていうとちょっと語弊が出るかもしれないウェブサーバーがプロキシになっててその後ろでアプリケーションを動かしてるサーバーのイメージだね構成によっては別に1サーバーでそれをどっちもやってることもあるからウェブサーバーといっても間違いでもないかもしれないっていうぐらいの

捉え方をしてもらえると雰囲気は分かりました今まで動いてた普通のサーバーですよプッシュ通知を送りたい人でプッシュサービスこれはその名の通りプッシュ通知を送ってくれるサーバーですねはいラストがプッシュサブスクリプションこれはですねプッシュ通知の送り先の住所みたいなもんですねうんうんうん

で、まあ多いじゃないですか、登場人物が。まあ多いですね。僕はこれね、思ったんですよ。ビュッフェでは例えられないなって。めっちゃ残念ですわ。そんなにがっかりされることある?何でもできると思ってたのに。そんながっかりされることあるかな。いや、だってあのCPUじゃない?何だっけ?PCの時とかもなんか5個か6個ぐらいありましたよ。いや、まああるか。いや、いけんのかなこれ。無理無理やったらいけんのかなこれ。あのじゃあ…

あれにしようかなじゃあ郵便で料理が届くタイプのビュッフェにしようかな通販サーバーから一方的になんだなんかふるさと納税みたいな話ふるさと納税みたいなもんかどうかはちょっと微妙だなまあなんか郵便で届くんですね何が難しいってねビュッフェにするのがなぜ難しいってプッシュ通知ってサーバー側から一方的に送られてくるんですよ

ビュッフェじゃないですね絶対絶対ビュッフェじゃないんですよだからあんなんねパンパンに食ってるのにね店側の都合で急に料理送られてきたら切れますからねそうなんですよワンチャンあれかもね串揚げとかの高めのお店でさストップって言うまで来るやつあるじゃないですかありますねお任せであれならギリギリいけるのかなあれプッシュ通知なのあれあれプッシュ通知かもしんないな

絶対わかりにくいからやめとくわ確かにプッシュ通知っぽいなそう考えるとワンコそばとかもプッシュ通知かもしれないあれもプッシュ通知の可能性あるかもな一歩で来るもんねあと感想戦でやりましょういろいろありそうだ今回はですね簡単に言うとですね四書箱当てに

郵送を送るみたいなのがかなりプッシュ通知のイメージに近いかなと思ってるんですよすみません四書箱の解像度低すぎて何なのか分かってないです四書箱っていうのはですね要は郵便物を転送してくれるサービスですねポスト?そんなイメージ郵便局がやってたりもするんですけど一般的な企業がやってるケースもあって例えばドコドコ四書箱

ノリさんあってって書いたら送り主は住所知らないけどその支所箱に送ったら転送して我が家に届くみたいなそういうのをやってくれるサービスですねなんかでっかい会社にある郵便センターみたいなイメージですかうわごめんでっかい会社にある郵便センター初めて知った存在をあれなんですよ会社に郵便センターがあって会社に郵便センターがあるのそれはあれですよ郵便局の人がやってるとかじゃなくて

会社の送り物が全部そこに1回届いて会社名と名前だけじゃ何階のフロアのどの机に届ければいいか分かんないじゃないですかそれを紐付けて席まで持ってきてくれる人がいるんですよそれがちょっとししょばこ感あるなと思ってそうなんだちょっと分かんないなそれ大企業に行ったことある人しか分かんないんじゃないかな分かんないかなはい

500人規模くらいに関してもありましたねそうなんだじゃあイメージ同じかもしれない聞いた感じはでも一般的には多分四書箱が四書箱って言うんですねあるかもなっていうこの四書箱で説明するときにマニフェストジェイソンはないです

こいつはいらないですこいつプッシュ通知じゃないんで確かにそうですねなのでさっき出てきたサービスワーカーアプリケーションサーバープッシュサービスプッシュサブスクリプションのそれぞれが何に当たるかっていうのをね紹介しようかなという感じですありがたいまずねサービスワーカーこれはですね家にいる秘書だと思ってくださいうーんとね家に秘書いないんですよいてくださいわかんないのりさん家はいるかもしれないですけどいてくださいてかまあいましたけどのりさん家はいてくださいなるべく

なるべく足を抜いてください家に秘書は分かりました1回飲み込みますわでこいつが代わりにお手紙を受け取ってくれますよと自分の代わりにねでお手紙が来たらお知らせしてくれますよとまさにプッシュ通知じゃないですかうんうんうんはいで続いてアプリケーションサーバーこれはですね送り主ですね送り主はいで次がプッシュサービスはいこれはですね司書箱のその転送サービスのことですねうーん

ラストプッシュサブスクリプションこれが司書箱上の住所みたいなもんだと思ってくださいさっきのひまプロ司書サービスみたいなサービスがあったとしてそこののりさん宛てっていうような抽象的な住所それがこのプッシュサブスクリプションに当たりますねじゃあ今度これらがまずどういう風にして

動いてるかという仕組みなんですけどまず普通のPWAの話しますよ普通のPWAって使う手順どうなってるかっていうとまずクライアントユーザーがブラウザの機能でホーム画面に追加するみたいなボタンあるんですよその辺ちょっとOSとかブラウザによって文言微妙に違うかもですけど

そうするとアイコンが出来上がるんですよプッシュ通知を受け取るためには大体今だとOSの許可が必要なんでユーザーがその通知を許可する必要があるんですねなんかポップアップで出てくるやつですねそうそうそうそうこの流れこれはもうあれですね家に秘書を雇う瞬間ですねようこそ我が家へ秘書を雇う瞬間ですね雇う瞬間これ秘書にこの手紙受け取ってねとかの方が近そうですけどこれだってインストールされてますからねなるほど

これで家に秘書が誕生しましたとまだ通知は届きません続いて何をするかというとサービスワーカーがプッシュサービスを公読するんですよさっきカイチが序盤でパブサブの話してたと思うんですけどサービスワーカー秘書がプッシュサービスを公読すると秘書箱に申し込むんですようちこういう住所なんですけど

ひまプロ出所サービスのノリさん宛てでうちに届くようにしてくださいねっていうのを設定するとちなみに転送してねみたいに近いんですかね転送ってことですかねうん一回そこ経由で送ってくると郵便局である急に郵便局の話で恐縮なんですけど住所変更みたいな転送届かはいはいはいなんか

何?感じなのかな転送届みたいなのをあれでもなんかさマジで転送じゃないですかあれマジで転送ですね一方僕支障箱はなんか抽象化だなってイメージあるんですよねあー確かになんか抽象度は高い高いというか具体的にしてくれてますよね支障箱のところでそうそうそうそうだからあのなんだろう転送だとさ次また引っ越した時にさらに転送転送届を出さなきゃいけないじゃないですか

はいそうですね司書箱だったら司書箱から送る住所変えておけばみんなに住所変更を通知しなくていいっていううんうんうん司書箱の話になってるねこれ今のは司書箱はすごい優秀な設計者が設計したんですねそう住所を染み出してないんですね中身の詳細がそうなんです何の話司書箱これで公読開始しましたよとはい

次でもお知らせ届けたい人たちがいるじゃないですかその人たちに次は紙書箱の送り先を教えなきゃいけないんですよなんでその次のステップとしてプッシュサブスクリプションをサーバーに送るんですねクライアントからつまり通知を送っていきたい例えばアマゾンだったら荷物届けるときに荷物いけるのかな

わかんないから生命保険にしとこう生命保険の会社だったらたまによく来るじゃないですか紙みたいなのがそうなんですねきっとチラシみたいな話わかんないけどふわふわ俺も入ってないからわかんないんですけどわかんないですけど定期的に手紙届きそうなやつでも保険とかは確かに届きますねそこに対してじゃあここに送ってくださいねって言って支所箱の住所を渡す

これがクライアントだからPWAからアプリケーションサーバーに対してプッシュサブスクリプションを送るとこですねそうすればサーバー側が次送り先も分かるじゃないですかなので最後はアプリケーション送り主がそのプッシュサブスクリプション宛てに送りたい通知を送ると

そうするとメッセージがまずあのー支所箱宛にピピピピピって飛びますよねうんそしたら支所箱の人これ見てあこれお届けしなきゃつってその秘書の元に届けるとうんそれを受け取った秘書はあのーそのこの住人に対してそれを通知すると手紙キャッシャーつってうんうんこれがねプッシュ通知の流れですねなるほどうん

なんかスッと入ってきますありがとうございます一旦ここまでで例えでやったんですけどちゃんとしたバージョンを説明しておくとまずプッシュ通知できるようにするまでの順番はユーザーがスマホにPWAをインストールしますホーム画面追加しますと質問いいですかすいませんホーム画面に追加して初めてキャッシュされるんですかそうですね

そうなんだホーム画面に追加した上で1回アクセスしてキャッシュされるありがとうございます学びホーム画面に追加する前提で作るものなんですねまずインストールしたらサービスワーカーがブラウザに登録されますよと続いてユーザーが通知を許可する必要があるので許可しますよと

そしたら次サービスワーカーがプッシュサービスを購読するのでプッシュの送り先を支所バックサービス申し込みますよみたいな感じですねその次にプッシュサブスクリプションがクライアントに1回渡されますこれさっきの流れでちょっとなかったかもしれない

司書箱宛ての住所次からこうやって行ってくれれば届けますよっていう中小的な方の住所をクライアントに送り返してるみたいな感じですねクライアントが次アプリケーションサーバーに送られてきたプッシュサブスクリプションを教えますよと最終的にアプリケーションがそのプッシュサブスクリプション保存したらこれで準備が完了ですねいざ通知するよってなった時に通知って大体何かのイベントを起点に送ると思うんで

例えば誰々がマイミック申請してきましたよというイベントが発生しましたとそしたらそのイベント発生をアプリケーションはプッシュサーバーに送るんですねそのプッシュサーバーに対してプッシュサブスクリプション送り先と通知したいメッセージの2つを送りますとそうするとそのプッシュサーバーはその情報をもとにクライアントに対して通知を送信しますよとクライアントはプッシュイベントを受け取って

通知を表示する処理を行うっていうそういう流れになってますねありがとうございますこれで調べてていろいろ疑問だったこととかジェミニとかに問いただしたんですけどまずプッシュサービス何者みたいなそんな野生のプッシュサービスみたいなやつあんのってまず思ったんですよ僕一方それはどこが運営してるかっていうと基本的にはブラウザベンダーが運営してますGoogleとか

Appleもかなそうなんだやっぱり通知を送ることによってユーザーの利便性を上げたい人たちが

そこ単体で儲かってるかどうか微妙な気するんですけどそこで利便性上げることによって運営してるのかっていうのがまずですねプッシュ通知って金かかるんですかまあサーバー運営してるぐらいだからかかんじゃないあえっと使う側がかかんないんじゃないですよねじゃあ間違いなく損はしてるんですねまあコストはかかってると思うよでも送れないってなったら使ってくれないからまあそうですねうん

どこも送れるようにしてるという感じじゃないですかねあとクライアントってさスマホじゃないですかスマホとかってめっちゃIPアドレス変わるじゃないですかこれどうやって送ってるんだろうと思ったんですよこれ見たらIPアドレスでまず送ってないらしいですねOSレベルでプッシュサーバーと一本の通信経路をずっと持ってるらしくて

そうなんだ通知を送るときにそこを使って送ってくるとつまりOSってどこ?どこだ?レイヤーはレイヤー?アプリケーションではあるんじゃない?アプリケーションレイヤーってことなんですかねアプリケーションレイヤーで通信するってことか通信はさすがにその下を使ってんじゃない?

ただIPで通信してないってことは宛先がなんだっけな独自のプロトコル使ってたよってことっすねウェブプッシュプロトコルみたいなっていうのを使って通信送ってますよとあとサービスワーカーってどうやってウォッチしてるんだろうって思ったんですけどサービスワーカーは基本的にずっとスリープしてるらしいですでプッシュ通知が来た時にブラウザに叩き起こされて起動するっていう仕組みになってるそうですねうーん

いいですねそのなんかプッシュサーバーどこにあるんだろうっていう疑問正直思ったことなかったマジで何で使ったことあるかな使ったことないかもなちょっと記憶の彼方にあるのかもしれないですけど多分作ったことはないっていうのがちょっとこの流れの中で僕が思った疑問点なんですけどだいたいこういう風な仕組みでプッシュ通知って送られてますよというお話でございましたありがとうございました勉強になったシンプルに

初めて実装しましたプッシュ通知これでプッシュ通知を実装するというノルマをクリアしたわけですねクリアしましたAI使えば一瞬でしたけどねでもねちょっと苦労したのはマジでPWAのキャッシュが強すぎてそこのキャッシュバスティングというかキャッシュをどう残すかみたいな戦略めっちゃ苦戦しましたね

どういうことですか変えるじゃないですか見た目とかを作ってる最中のサービスだったんでどんどん変わるんですよそうですよねなんですけどそのキャッシュが強すぎてスーパーリロードした時は新しいのになるんですけど普通のリロードした時に過去にキャッシュしたやつがもう一回呼び出されてみたいなのがめっちゃ起きてそうですよねどういうロジックでキャッシュを残すか残さないかみたいなやつをやるのがめっちゃ大変でしたね

確かになるほどユーザーに対して提供した後に機能を変えたりとかした時に変えたいところと変えたくないところがあるはずでそれをどうするかみたいな特に困ったのがCSRFトークンみたいなツド生成するやつが古いやつキャッシュされちゃって

へーエラーになっちゃったりとかサーバー側ではいはいはいリロードしたら治るけどもう一回弱い方のリロードすればまた復活してくるみたいなねえ、そうなの?悪い問題が起きまくってそれめんどくさいですねそうなんだへーこの辺だけはちょっと苦戦しましたねまあなんか慣れればすぐ当たりつけられますけどなんか初めてだと沼りそういやそう最初ねまず何が原因なのかがね分かんなかったそうですねうん

なんかその一回その全部リロードしてキャッシュも全部リロードして直った後にまた普通の更新すると戻ったりするのがなんかやばすぎますね回帰現象なんで戻るのか俺まだ分かってないですもんなんで戻ったのかなんかキャッシュに使ってる領域がやっぱ違うのかなって思ったけどそうなんだなんかキャッシュクリアでクリアされなかったんだよな

ブラウザの動き全然知らないなやっぱそう考えるとアプリケーションタブからストレージまで掘り下げてそこで消せばやっと消えるみたいな感じだったんだよねそれをユーザーにさせるわけにはいかないってなってまあ確かにそれはそうですねなんかアプリとかだとねアップデートかければいいだけですけどPWAだとアップデートとかってどうなってるんだろう基本ウェブだからないねそういう概念は

そうですよねだからキャッシュが残るから更新されたっていうのが分かったらそれを更新するよみたいな処理をサービスワーカーに書かなきゃいけないへー

サービスワーカーの更新するよっていう処理をいつまで残すのかとか運用を考えるとちょっと面倒くさいことはありそうだけどしかもサービスワーカーがそれを更新するよっていうのを書かなきゃいけないってことを知らない間にサービスワーカーがキャッシュしてしまったらそれをどうするんだろうっていうのはちょっと思ってる今そうですねおもろ勉強になりました

ちょっと大変な部分はありましたがこういう風にしてプッシュ通知って送られてるんだってのが分かりましたありがとうございますプッシュ通知関係ないんですけどPWAは何で書くんですかこれはね何でもいいんじゃないかなでもあれだねフロントで動くから大体JSで書くんじゃないですか有名なのがJSというかライブラリーがあるってことなんですかねPWA用のいやこれはもう普通にリアクトで書きました僕は

そうなんだリアクト本当にウェブアプリスマホ向けのウェブページ作るだけそうPWA用のライブラリがあってマニフェストJSONを置くだけそうなんだへー本当にいつものリアクトと違うところはマニフェストJSONを置くのとサービスワーカーの処理書かなきゃいけないってことぐらい

はいはいはいはいあとは今までの通りのウェブアプリケーションの書き方でいけると思いますねああそうなんだありがとうございますこれでPWAほんのちょっとだけ分かりましたよかったありがとうございますじゃあシーメティですかねそうっすねはいハッシュタグひまじんプログラマーでSNSでフィードバック募集してますので本日のエピソードの感想とかありましたらお願いしますぜひぜひよろしくお願いしますはいであとは

ポッドキャストの説明欄からGoogleフォームで番組の要望・感想・質問待ちしてますこれについて解説してほしいとかあればいけるかないけるやつでいきますあとはスラックオンラインコミュニティひまぷるだんわ室への参加申し込みフォームも

番組じゃなくてチャンネル説明欄エピソード説明欄じゃなくてチャンネル説明欄の方にリンクありますのでそちらもお願いします各種ポッドキャストプラットフォームの高評価とフォローもお願いしますその喜びだけで続けておりますそんな承認欲求の塊なんですねそうなんですじゃあよう続いてますね本当に成功し続けてるはいではまた次回オンラインコミュニティ今プロ談話室を作りました

僕らの発信だけではなく皆さんの発信も大歓迎コミュニティイベントやポッドキャスト裏話もたっぷり学びと笑いを共有する場にしていきましょう参加は簡単説明欄のリンクをポチッと押してフォームを送るだけあなたのアウトプットが誰かの学びになる今すぐ説明欄からクリック