Webプッシュ通知の具体的な設計・実装方法を教えてほしい

【 募集詳細 】 個人で、マイコンを使った盗難・紛失防止デバイスのプロトタイプ開発を行っております。 Webアプリ側のWebプッシュ通知機能の具体的な設計や実装方法についてご教授いただきたく、お願い申し上げます。 【開発概要】 目的： ・持ち物の盗難と紛失を防止する 実現したい主な機能： ・盗難防止機能：マイコンの加速度センサーがマイコン本体の移動を検知しWebアプリに通知 ・置き忘れ防止機能：マイコンとスマホが一定(Bluetooth接続範囲)以上離れるとWebアプリに通知。 開発環境：Windows11、ArduinoIDE、VScode マイコン：M5StickC Plus テスト用スマートフォン：iPhoneまたはAndroid プロトタイプ開発の目的： ・各機能によって盗難や置き忘れを防ぐことができるか検証する ・知人にプロトタイプを実際に使ってもらいフィードバックを得る 制約条件等： ・開発は私1人で行う ・開発者はプログラミングやIoT開発に関して初学者である（プログラミング経験は後述） ・できるだけ簡単に開発でき、修正や拡張しやすいものであること ・できる限り開発者が経験のある言語を使用する（PHP、JavaScript、SQL） ・できる限りChatGPT(GPT4)でコードを出力する ・開発期間や技術的な難易度を鑑み、専用スマホアプリはWebアプリとする ・Webアプリは、Windows11およびスマートフォン（iOS・Androidの少なくともどちらか）で動作すること ・Webアプリの公開は「さくらのレンタルサーバー」を利用する（予定） 使用技術： ・Web Bluetooth API（Webアプリに実装） ・BLE（M5StickC Plus、スマートフォン、PC に標準搭載） ・Bluefy – Web BLE Browser（Web Bluetooth APIがiOSでも機能する） IT開発の経験： ・太陽光発電の発電量推定ツール 　＞フロントエンド：HTML、CSS、jQuery 　＞バックエンド：PHP、MySQL 　＞ミドルウェア：XAMPP ・ホームページ 　＞HTML、CSS、JavaScript 現在の状況： ・マイコンに盗難防止機能と置き忘れ防止機能を実装済み ・マイコンの動作確認するための簡易的なWebアプリを作成（ボタンとテキストのみ表示） ・現在の簡易的なWebアプリには拘らず、ゼロからWebアプリを開発しても良い 実現したいこと： ★Webアプリでプッシュ通知を許可する（PC、スマートフォンでユーザーが操作） ★プッシュ通知を一度拒否した後でも、再び許可できる（PC、スマートフォンでユーザーが操作） ★マイコンの盗難防止機能や置き忘れ防止機能などのトリガーによって、Webアプリにプッシュ通知が届く ★プッシュ通知の履歴をWebアプリ上に表示する（日時,内容,開封済/未、など） ★プッシュ通知の文章を編集できる（開発者が操作） ★プッシュ通知の送信タイミングを設定できる（トリガー後すぐに、通知を開封しない場合は1分後に再び通知、マイコンの電池残少になった時、など。開発者が操作） ・プッシュ通知をいつ、だれに、何を送ったかのデータを保管する ・その他にプッシュ通知に関する機能や設定で必要なこと ※★は必須要件 教えていただきたいこと： ・プッシュ通知を実装するための全体の概要図 ・必要な技術や環境 ・具体的な設計（ディレクト構成、各ファイルの役割など） ・開発の流れ 【 重視する点・経験 】 ・Webプッシュ通知の設計および実装経験 ・ご提案、レクチャー内容の分かりやすさ 【 応募時のお願い 】 ・過去の実績を簡易的にご提示ください。 ・ご提案、レクチャー内容をご提示ください。 ・レクチャー方法（メッセージ、ビデオ通話など） ・必要時間 その他ご質問等ありましたら、気軽にお問い合わせください。 応募をお待ちしております！