webPush通知機能 完成!👏.これでブラウザ閉じても通知可能✌.

2024.11.12

Logging

おはようございます.金曜日の休みを使ってwebPush通知機能を追加しました、これでブラウザ閉じても通知されるようになります.Laravel側はお見せできませんがどういう技術を使用したか書いていきます.まずLaravelの拡張ライブラリを使用しました.

下記のリンクを参照しライブラリをインストールしてみてください.
https://laravel-notification-channels.com/webpush/#installation

インストール手順はリンク先に書いていますので、それを参照しその後フロント側を設定します.下記は作りかけのコードですが通知登録が可能でバックエンド側からスケジュールで通知を飛ばすことが出来ます.

フロント側はサービスワーカーのJSファイルとユーザー通知の許可行い、その情報をバックエンドに渡す処理ファイルが存在します.サービスワーカーJSコードはググれば書き方が出ているので検索してみてください.

公開するのは通知許可を行う方のファイルになります💁あとヒントとしてバックエンドも少し公開します.


const vapidPublicKey = import.meta.env.VITE_VAPID_PUBLIC_KEY;

async function setupPushNotifications() {
    if (Notification.permission === 'granted') {
        try {
            // サービスワーカーを登録
            await navigator.serviceWorker.register('/assets/js/npush-service-worker.js').then(async(registration) => {
                if ('serviceWorker' in navigator && 'PushManager' in window) {
                    try {
                            const subscription = await registration.pushManager.subscribe({
                                userVisibleOnly: true,
                                applicationServerKey: urlBase64ToUint8Array(vapidPublicKey),
                            });
            
                            const response = await fetch('/save-subscription', {
                                method: 'POST',
                                headers: {
                                    'Accept': 'application/json',
                                    'Content-Type': 'application/json',
                                    'X-CSRF-Token': document.querySelector('[name="csrf-token"]').content
                                },
                                body: JSON.stringify(subscription),
                            });
            
                            if (!response.ok) throw new Error('サブスクリプションの保存に失敗しました');
            
                            new Notification('ご登録', {
                                body: 'ご登録有難う御座います',
                            });
                        
                    } catch (error) {
                        console.error('Push subscription error:', error);
                    }
                } else if (result !== 'granted') {
                    console.log('通知の権限が拒否されました。');
                }       
            });
            console.log('サービスワーカーが正常に登録されました');
        } catch (error) {
            console.error('サービスワーカーの登録に失敗しました:', error);
        }
    }
}


function urlBase64ToUint8Array(base64String) {
    const padding = '='.repeat((4 - base64String.length % 4) % 4);
    const base64 = (base64String + padding).replace(/-/g, '+').replace(/_/g, '/');
    const rawData = window.atob(base64);
    const outputArray = new Uint8Array(rawData.length);
    for (let i = 0; i < rawData.length; ++i) {
        outputArray[i] = rawData.charCodeAt(i);
    }
    return outputArray;
}

document.getElementById('enable-notifications').addEventListener('click', async () => {
    const permission = await Notification.requestPermission();
    if (permission === 'granted') {
        setupPushNotifications();
    } else {
        console.log('通知の権限が拒否されました。');
    }
});

これで通知の識別データが取得し登録が可能になります.登録されたデータを元に個別通知、全員に通知などが可能になります.なお、会員登録されたユーザーのみ通知が飛ぶシステムです.

        $endpoint = $request->endpoint;
        $token = $request->keys['auth'];
        $key = $request->keys['p256dh'];
        $user = $request->user();
        $user->updatePushSubscription($endpoint, $key, $token);

上記のデータがバックエンド側に保存されます.それを使用しユーザーにどのように送信すれば良いか?

use App\Notifications\Reserved;
$user = User::find(1);
$user->notify(new Reserved($reservation));

こんな感じだと思ってください.抜粋しているのであくまでもヒントです.あとはご自身で考えて対応してください.

明日へ続く

著者名  @taoka_toshiaki

※この記事は著者が40代前半に書いたものです.

Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます.たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅.
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki

OFUSEで応援を送る

タグ

addEventListener, assets, async, catch, document.getElementById, document.querySelector, headers, installation, keys, METHOD, padding, permission, rawData.charCodeAt, rawData.length, registration, repeat, replace, save-subscription, subscription, then,

サービスワーカー、フロント側のコード.スターウォーズみたいだね.

2024.11.09

Logging

おはようございます.サービスワーカーのプッシュ通知で使用するフロント側のコードの一部部分.このコードのregistration.pushManager等からググるとブラウザを閉じても通知できる方法などが記載しているサイトが見つかるかもしれません.尚、このサイトではこれ以上の情報を記載するつもりはないですが、後日、通知の機能の動画などを掲載するつもりではいます.

if ('serviceWorker' in navigator && 'PushManager' in window) {
    navigator.serviceWorker.ready.then(function(registration) {
        registration.pushManager.subscribe({
            userVisibleOnly: true,
            applicationServerKey: urlBase64ToUint8Array('VAPID_PUBLIC_KEY')
        }).then(function(subscription) {
            fetch('/api/save-subscription', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify(subscription),
            });
        }).catch(function(error) {
            console.error('Push subscription error:', error);
        });
    });
}

function urlBase64ToUint8Array(base64String) {
    const padding = '='.repeat((4 - base64String.length % 4) % 4);
    const base64 = (base64String + padding).replace(/-/g, '+').replace(/_/g, '/');
    const rawData = window.atob(base64);
    const outputArray = new Uint8Array(rawData.length);
    for (let i = 0; i < rawData.length; ++i) {
        outputArray[i] = rawData.charCodeAt(i);
    }
    return outputArray;
}

その時、どのようなライブラリーを使用したかや技術の一部を公開しようと思っています.ただ、全体のコードを全て公開するつもりは今の所はないです.理由は有料な情報でありこれで商売している人がいると思うので全ての技術情報を公開は控えるつもりです.

明日へ続く

著者名  @taoka_toshiaki

※この記事は著者が40代前半に書いたものです.

Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます.たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅.
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki

OFUSEで応援を送る

タグ

API, application, applicationServerKey, atob, catch, fetch, headers, METHOD, navigator, outputArray, padding, rawData.charCodeAt, rawData.length, registration, repeat, replace, save-subscription, subscription, then, userVisibleOnly,

laravelの非同期処理でDELETE・PATCH・PUT😗する方法。 #php #code

2023.01.27

Logging

おはようございます、華の金曜日ですね~🙄。けんすうさんは一体何歳なんだろか?自分より若いのかな?それとも・・・・。

さて、今日は久しぶりにlaravelの非同期処理でDELETE・PATCH・PUTをする方法を記載しておきます。大体の人が知っているもしくは非同期処理でRESTの設計を使わないよという方もいるかもしれない。ですが、あまり遷移させたくない、遷移させると余計にコードを書かないといけない等、そういう場面があると思います。是非、そういう時は非同期処理でDELETE・PATCH・PUTして上げてください。

因みにこの頃、知ったのですがBootstrapからtailwindへ鞍替えする人が続出してダウンロード数が逆転した話を知りました。web業界に限らずですが隅から隅まで覚えている人は凄いなと関心します。自分は、どうしてもググったりドキュメントでググったりします。

document.getElementById('btn').addEventListener('click', () => {
    const formData = new FormData();
    formData.append('id', document.getElementById('id_number').value);
    formData.append('_method','PUT');//DELETE・PATCH・PUT

    fetch('ajax-test', {
        method: 'POST',
        headers: {'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content}, // CSRFトークン対策
        body: formData
    })
        .then(response => response.json()) 
        .then(res => {
            console.log('res: '+res[0].id);
            document.getElementById("result").innerHTML = "ID番号" + res[0].id + "は「" + res[0].name + "」です。価格は「" + res[0].price+"円」です。";
        })
        .catch(error => {
            console.log(error); // エラー表示
        });
});

著者名  @taoka_toshiaki

※この記事は著者が40代前半に書いたものです.

Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます.たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅.
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki

OFUSEで応援を送る

タグ

addEventListener, ajax-test, catch, document.getElementById, document.querySelector, fetch, formData, formData.append, getElementById, headers, innerHTML, Laravel, METHOD, quot, res, response, response.json, tailwind, then, ,

PHPで怒られる怒られない2

2019.02.17

Logging

PHPで怒られる怒られないの違いはさて何でしょうか?
selfの使い道がポイントです。selfは静的な要素だと動作し
$thisは動的な要素だと動作します。

<?php
class demo1
{
    static function test1()
    {
        return __METHOD__.self::test2();
    }
    static function test2()
    {
        return __FUNCTION__;
    }
}
class demo2
{
    static function  test1()
    {
        return __METHOD__.self::test2();
    }
    function test2()
    {
        return __FUNCTION__;
    }
}
$demo1 = 'demo1';
print $demo1::test1()."n";
$demo2 = 'demo2';
print $demo2::test1()."n";

著者名  @taoka_toshiaki

※この記事は著者が30代前半に書いたものです.

Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます.たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅.
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki

OFUSEで応援を送る

タグ

, 2, class, demo, FUNC, function, lt, METHOD, php, return, self, static, test, this, ポイント, , 使い道, 動作, 要素, 違い,

PHPの連想配列追加作成方法。んっ

2017.02.11

Logging


PHPの連想配列追加作成方法。
こちらの下記のコードで連想配列が追加可能です。

<form action="rensou.php" method="POST">
    <input name="name" type="text"><br>
    <input name="name2" type="text"><br>
    <input name="name3" type="text"><br>
    <input name="name4" type="text"><br>
    <input name="name5" type="text"><br>
    <input name="name6" type="text"><br>
    <input name="name7" type="text"><br>
    <input type="submit"><br>
</form>
<?php
$_POST = xss_d($_POST);
$array = [];
if(is_array($_POST)){
    foreach ($_POST as $key => $value) {
        if($value<>""){
            $array[$key] = $value;
        }
    }
}
?>
連想配列表示<br>
<textarea style="width: 500px;height: 500px;">
<?php
print_r (count($array)>0)?($array):["値無し"];
?>
</textarea>

<?php
function xss_d($val){
    if(is_array($val)){
        foreach ($val as $key => $value) {
            # code...
            $val[$key] = strip_tags($value);
            $val[$key] = htmlentities($val[$key],ENT_QUOTES);
        }
    }else{

        $val = strip_tags($val);
        $val = htmlentities($val,ENT_QUOTES);        
    }
    return $val;
}

サンプル
https://zip358.com/tool/rensou.php
余談:連想配列よく使います。。。。
そして便利です。こういう追加方法を知らない人も
いると思います。最初に連想配列を設定して終わり・・・。
じぶんもちょっと昔までは追加方法なんて知らなかったです。
知っていると便利です。
あと、ブログですが、こんな感じで
たまに書き込みするようにします。ブログを書かなくなった理由は
ネタがないのではなく。ダラダラ書くより
これは皆さんに伝えたいと思うのだけで良いじゃないかなと
思ったからです。
ぷらす書く時間を他のことにシフトしただけです。
なので、気分が乗る日は書きます・・・よ。

著者名  @taoka_toshiaki

※この記事は著者が30代前半に書いたものです.

Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます.たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅.
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki

OFUSEで応援を送る

タグ

2, , 4, 5, Action, br, Form, gt, input, lt, METHOD, name, php, POST, quot, rensou, Text, type, コード, こちら, 下記, 作成, 可能, 方法, 追加, 連想, 配列,