Web push 通知？サイトに実装？…うぇ～い（汗

§ 初めに

この記事は、以下の内容でお話が進む（かも）というようになっています：

• 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　たる フレームワーク です。

以下が公式サイトになります：

以下のURLは、原因不明の不具合を起こしています。
詐欺サイト（マイクロソフトを語ったウイルス警告など）に連れていかれることもありますので、絶対にクリックしないでください。

上のURLは、原因不明の不具合を起こしています。
詐欺サイト（マイクロソフトを語ったウイルス警告など）に連れていかれることもありますので、絶対にクリックしないでください。

※私が確認した三つのサイトでは、危険を感じなかったので、whois の使い方を知っていたり、危ない勉強がしたい人は自己責任で使用してください。
※こういったものを記事として残すべきではないと考える方は、お手数ですが編集リクエストをお願いいたします。即採用させていただきます。

（まぁ読まなくとも…ハハハ…（汗）

ということで、実際に実装していく際には、いろいろ方法がありますが、一番手軽なのは（私個人の意見です）HTML に入れちゃうことです。

具体的な実装に関しては、下記サイトを参考にしてみるとよいかもしれません：
https://tune-up.co.jp/archives/5947

HTTP？HTTPS？なにそれ美味しいの？

ここからが、私が今回この記事を書こうと思ったきっかけであり、そして最も重要なお話です。

ここまでだらだらと書かれた文字列を読んでくださった方、本当にありがとうございます！

そして、もう一度ですが、ここからがこの記事の核（酢酸ダーリア溶液で染まることはありません）です！
ぜひ最後まで読んでください（くださると嬉しいです。えへ）

以下に、私の身に何が起こったのか、順を追って記載します

1. Web push 通知を実装する
2. 動いてる（うぇ～い）
3. 機能をリリース
4. ・・・動いてなくない？

ご理解いただけましたでしょうか？

それでは原因について記載してまいります。

原因は、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 通知の実装から、機能を実装するなどの際には、「しっかりと本番環境でテストして」リリースしろよ

というお話でした。

私自身はマジなよわ弱炎ジニアです。

今回の記事が少しでも、なんでも、ちょっとでも、どなたかの何かしらのことに参考になれば、

それ以上に嬉しいことはありません！！

最後まで読んでくれてありがとう！

…おなかすいたねん