§ 初めに
この記事は、以下の内容でお話が進む（かも）というようになっています：
- Web push 通知？なにそれ美味しいの？
- Push.js？なにそれ美味しいの？
- HTTP？HTTPS？なにそれ美味しいの？
※すみません。昨日のお昼から食べてないので...
§ Main.article
この記事では、web サイトに通知機能はどのようにして実装できるのか、そして、実装する際の注意点などについて、記載させていただきます。
少しでもなにかしらの参考になりましたら幸いです
（※幸いすぎです。えへ）
Web push 通知？なにそれ美味しいの？
Web push 通知とは何か！
ざっくり解説するに、通知を許可したユーザーにWEBブラウザ経由でプッシュ通知をすることです。
ブラウザ経由で行われるため、ユーザーは特定のアプリをインストールする必要がなく、サイトを訪れた際にポップアップされるメニューなどで通知を許可するだけで受信できるようになります。
WEBプッシュ通知は任意のタイミングで行えます。
サイトに訪れてから一定期間経過後に通知する、定期的配信するなどの配信予約も可能です。
さらに詳しく知りたい方は、以下のサイトを参考にしてみてください：
https://materialdigital.jp/media/web-push-notification/
Push.js？なにそれ美味しいの？
では、さっさと Web push 通知を実装しましょう！
というお話なのですが、そこで今回必要（走れメロスのメロスなみに重要）になるものが、Push.js たる フレームワーク です。
以下が公式サイトになります：
https://pushjs.org/
（まぁ読まなくとも…ハハハ…（汗）
ということで、実際に実装していく際には、いろいろ方法がありますが、一番手軽なのは（私個人の意見です）HTML に入れちゃうことです。
具体的な実装に関しては、下記サイトを参考にしてみるとよいかもしれません：
https://tune-up.co.jp/archives/5947
HTTP？HTTPS？なにそれ美味しいの？
ここからが、私が今回この記事を書こうと思ったきっかけであり、そして最も重要なお話です。
ここまでだらだらと書かれた文字列を読んでくださった方、本当にありがとうございます！
そして、もう一度ですが、ここからがこの記事の核（酢酸ダーリア溶液で染まることはありません）です！
ぜひ最後まで読んでください（くださると嬉しいです。えへ）
以下に、私の身に何が起こったのか、順を追って記載します
- Web push 通知を実装する
- 動いてる（うぇ～い）
- 機能をリリース
- ・・・動いてなくない？
ご理解いただけましたでしょうか？
それでは原因について記載してまいります。
原因は、HTTP のサイト です。
こいつが 悪の根源 です。
そもそも、HTTP のサイトと HTTPS のサイト、違いが…うん、有名なお話ですしいいですね
下記サイトにおいて、まじわかりやすく解説が記述されています。好きです：
https://www.cloudflare.com/ja-jp/learning/ssl/why-is-http-not-secure/
つまり、実装した Web push 通知が動かなかったのは、セキュリティ上の問題 のためです。
Push通知はセキュリティ上、HTTPSが有効になっているWebサイトでしか動作しません。
また、ローカル環境で動作させている場合、localhostであれば例外としてHTTPでも動作します が、これ以外の場合はHTTPSが必須 です。
ご理解いただけただろうか？
（※言ってみたかっただけです～ごめんちゃい）
つまりです！
Cursor で LiveServer で動いてうぇ～い♪してる場合ではないのです！
私がこの記事で一番書き留めたいこと、伝えたいことは
本番環境でテストしてからリリースしやがれ！！
ということです。
「ちゃんと情報収集する」ということも必要なのでしょうが…はははははっ
§最後に
いきなり最後になっちゃいましたねww
今回は、Web push 通知の実装から、機能を実装するなどの際には、「しっかりと本番環境でテストして」リリースしろよ
というお話でした。
私自身はマジなよわ弱炎ジニアです。
今回の記事が少しでも、なんでも、ちょっとでも、どなたかの何かしらのことに参考になれば、
それ以上に嬉しいことはありません！！
最後まで読んでくれてありがとう！
…おなかすいたねん