knaka Tech-Blog

AI, IoT, DIYエレクトロニクス, データサイエンスについて投稿予定です。

Vue CLI+ Laravel 5.8で、Notification API 通知対応の メッセージ機能の作成。

概要

前の 、クロスドメイン構成の
Vue-CLI + Laravel API サービス
SPAの関連となり。会員間メッセージ機能となります

・自動更新で、新着を受信できて
 通知API で、タスクバーに通知出せます。

・会員制となり、Google認証で
 ログインに対応しています。

・PWAも対応しています

構成

PWA
firebase
Notification API
Vue CLI
vue-router
@vue/cli-service : 4.4.0
API サービス:
Laravel 5.8
nginx
mysql
・フロント設置ドメイン ,Vue-CLI:
netlify / ホスティングサービス

デモのページ

https://code-kuc.netlify.app

ヘッダ部分> Message で、開けます。
code-kuc.netlify.app

参考のコード

github.com

画面

・通知APIで、新着の自動通知
f:id:knaka0209:20200612091607p:plain

・一覧
f:id:knaka0209:20200612091623p:plain

・詳細
f:id:knaka0209:20200612091653p:plain

・返信
f:id:knaka0209:20200612091704p:plain