knaka Tech-Blog

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

Vue CLI+ Laravel 5.8で、クロスドメイン SPA構成/PWA対応のCRUD作成する。 #Laravel #Vue.js #SPA #PWA

概要

前の SPA構成と似ていますが、
バックエンドを、Laravel API サービス
とした。SPAの事例となります。
・PWAも対応しています

・デプロイは、netlify ホスティングサービスを使用し
 Vue CLI の build を、zip圧縮でアップロードしています。
 *) SSL対応の、設置場所であれば。問題ないと思います

構成

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


・構成図みたいな図
f:id:knaka0209:20200609120440p:plain

 複数ドメイン構成で、やや複雑になりますが。
 ブラウザセキュリティの、クロスサイト関係のエラーがでましたので
 Laravel の、クロスドメイン対応の修正を追加

・クライアントは、PWAで
 PC/ SPのマルチデバイス対応

Laravel のクロスドメイン対応

Middleware の追加等で対応しました。 下記参考させて頂きました
https://qiita.com/kobayashi-m42/items/c0a2609ae61a72dcc60f

Access-Control-Allow-Origin に、通信元ドメインを設定する例でした
app/Http/Middleware/Cors.php
https://github.com/kuc-arc-f/lara58a/blob/master/app/Http/Middleware/Cors.php

    public function handle($request, Closure $next)
    {
        return $next($request)
            ->header('Access-Control-Allow-Origin', 'http://localhost:8080')
            ->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS')
            ->header('Access-Control-Allow-Headers', 'Content-Type');        
    }

参考のコード

・Vue CLI 部分
github.com

デモのページ

https://code-kuc.netlify.app

ヘッダ部分> Task で、開けます。

code-kuc.netlify.app

画面

・PC / PWA デスクトップ版
f:id:knaka0209:20200609121028p:plain

android PWA版
f:id:knaka0209:20200609121048j:plain

vue-router ルーティング

src/router/index.js

https://github.com/kuc-arc-f/vue_spa3a/blob/master/src/router/index.js

参考のページ

knaka0209.hatenablog.com

BBS 機能を追加する #Laravel

index:

概要

掲示板で、
会員メンバー間での、QA, ナレッジ、雑談等の共有ができるような
使い方を想定しています。

・PWA対応
Googleログイン可能

参考のコード

github.com

デモのページ

https://knaka0209.net/bbs


.

画面

・ bbs/ スレッド詳細
 返信入力、返信済の一覧表示

f:id:knaka0209:20200528153058p:plain

・ bbs/index 一覧
 スレッド一覧

f:id:knaka0209:20200528153124p:plain

・ 返信の自動受信、通知表示
投稿に、返信が追加された場合
 メッセージを開いている場合、BBS返信の新着を通知する機能
 JSの通知APIで通知バーに。新着を表示します。

f:id:knaka0209:20200528153137p:plain




.

メッセージ送受信の機能追加。 #Laravel #PWA

index:

概要

メンバー間で、メッセージを送受信できる機能を
Laravelで、追加しました。
PWA対応の、構成となります。

参考のコード

github.com

画面

・index
f:id:knaka0209:20200519113644p:plain

・create
 送信先メール入力、検索
 タイトル、本文を入力して。送信します

f:id:knaka0209:20200519113753p:plain


・home画面等に、通知
 メッセージ画面 以外でも、通知メニューで。
 受信通知を表示できるようにしました。
f:id:knaka0209:20200519114327p:plain

デモのページ

https://knaka0209.net/messages

.

Update

・update 2020/05/21, 返信機能や、index/自動更新
通知APIで、新着の着信ダイアログ

・着信ダイアログ, 10分間隔(600秒) ですが。自動更新チェック、
 通知APIで、デスクトップ通知を表示
f:id:knaka0209:20200521134953p:plain

・返信
 一覧>詳細に、reply( 返信)ボタンを、追加
 送信元に、返信できて。
 この場合。送付先メール検索は不要になりました。
f:id:knaka0209:20200521135414p:plain

Update ファイル添付

・Update : 2020/05/22
 ファイル添付を、追加しました。
・create
ファイルの添付を追加し、マルチパートで送信します
f:id:knaka0209:20200522175536p:plain

・show:
 受信一覧>詳細で
 下側の、attach fileで、添付ファイル取得可能にしました。
f:id:knaka0209:20200522175717p:plain

Update 検索の追加

・2020/05/23 index/受信で、検索機能を追加しました。
タイトル等を、検索可能になりました。

f:id:knaka0209:20200523095708p:plain

Update ファイルのエクスポート

・UPDATE 2020/05/24
受信>詳細で、[export] ボタン追加
 (タイトルの右側あたり)

 メッセージ内容を、テキストファイルに
 ダウロードできるように。しました
f:id:knaka0209:20200524124758p:plain



.

チャット機能、設定の手順を追記しました #Laravel #Vue.js

この記事は、note 有料マガジンで。公開しております
https://note.com/knaka0209/m/ma126194b131e

更新、チャット一覧に、検索機能追加等 #webプッシュでチャット機能 #php #Laravel #Vue.js

index:

概要

前の firebase Cloud Messaging, Notification API 等で
web push通知対応のチャット機能の。チャット機能の更新内容となります

更新の内容

・チャット一覧の、検索機能追加
・チャット共有URLから、チャット参加機能
Googleログイン追加
Progressive Web Apps / PWA対応

画面

・チャット一覧の、検索機能追加
 チャット名で、検索可能です
 チャット脱退するボタンも追加

f:id:knaka0209:20200430083334p:plain

・メンバーからの。チャット共有URLから、チャット参加機能
 メール等で、共有URLを、開いたときに
 チャット参加画面を、追加。

f:id:knaka0209:20200430083451p:plain

参考のコード

github.com

デモのページ

https://knaka0209.net/chats

参考のページ

knaka0209.hatenablog.com

Laravel 5.8で、Google認証の追加 javascript編 #php #Laravel #Vue.js

この記事は、note 有料マガジンで。公開しております
https://note.com/knaka0209/m/ma126194b131e

Progressive Web Apps / PWAデスクトップ、Laravel SSLサービスに組込む例

index:

概要

前の Progressive Web Apps 関係で、
Laravel のSSL化したサービスに、PWA設定を追加して
デプロイ、PWAインストール等の内容になります。

環境

chrome 81
javascript
aws
Laravel 5.8

画面

PWAインストールは、前の記事と同様で。
起動した、PWA画面
ブラウザを起動せずに、webサービスを使用できるので便利な気がしました

f:id:knaka0209:20200422154344p:plain

・おまけですが。前のチャット機能 の画面
f:id:knaka0209:20200422154637p:plain

android / スマホ

・前回同様、ホームに追加
f:id:knaka0209:20200422155048j:plain

・pwaインストーラ起動して、追加おす
 と、起動アイコンが追加されて
 アプリ内で、PWAのwebサービスが使用できました

f:id:knaka0209:20200422155222j:plain

実装など

・TOP画面の Bladeに
 PWA処理を、追加


・ views/welcome.blade.php
https://github.com/kuc-arc-f/lara58a/blob/master/resources/views/welcome.blade.php

manifest.jsonですが、firebaseのmanifestと、パスが重複する為、
/pwa/manifest.json に変更しました

    <link rel="manifest" href="/pwa/manifest.json">

・ Service Worker の処理、

<script>
"use strict";
registSW();
function registSW() {
    if ('serviceWorker' in navigator) {
        window.addEventListener('load', function () {
        navigator.serviceWorker.register('/sw.js', { scope: './' }).then(function (registration) {
            console.log('ServiceWorker registration successful with scope: ', registration.scope);
        }, function (err) {
            console.log('ServiceWorker registration failed: ', err);
        });
        });
    }
}
</script>

・/pwa/manifest.json
https://github.com/kuc-arc-f/lara58a/blob/master/public/pwa/manifest.json

 name等は、適宣修正ください
 start_url は、ルートに変更

{
"short_name": "PWA-sample",
"name": "PWA sample app-1",
"display": "standalone",
"orientation": "portrait",
"start_url": "/",
"icons": [
	{
		"src": "images/icon.png",
		"sizes": "192x192",
		"type": "image/png"
	}
]
}

・/sw.js
https://github.com/kuc-arc-f/lara58a/blob/master/public/sw.js

 前と、ほぼ同じ


// Service Worker のバージョンとキャッシュする App Shell を定義する
const NAME = 'pwa-sample-v1-';
const VERSION = '002';
const CACHE_NAME = NAME + VERSION;
const urlsToCache = [
];

// Service Worker へファイルをインストール
self.addEventListener('install', function (event) {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(function (cache) {
        console.log('Opened cache');
        return cache.addAll(urlsToCache);
      })
  );
});

// リクエストされたファイルが Service Worker にキャッシュされている場合
// キャッシュからレスポンスを返す
self.addEventListener('fetch', function (event) {
  if (event.request.cache === 'only-if-cached' && event.request.mode !== 'same-origin')
    return;
  event.respondWith(
    caches.match(event.request)
      .then(function (response) {
        if (response) {
          return response;
        }
        return fetch(event.request);
      })
  );
});

// Cache Storage にキャッシュされているサービスワーカーのkeyに変更があった場合
// 新バージョンをインストール後、旧バージョンのキャッシュを削除する
// (このファイルでは CACHE_NAME をkeyの値とみなし、変更を検知している)
self.addEventListener('activate', event => {
  event.waitUntil(
    caches.keys().then(keys => Promise.all(
      keys.map(key => {
        if (!CACHE_NAME.includes(key)) {
          return caches.delete(key);
        }
      })
    )).then(() => {
      console.log(CACHE_NAME + "activated");
    })
  );
});

デモのページ

https://knaka0209.net

参考の記事

knaka0209.hatenablog.com