keys | zip358.com

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

2024.11.12

おはようございます．金曜日の休みを使って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で応援を送る

投稿日時 2024年11月12 06:00日

タグ

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,

Photo by Igor Haritanovich on Pexels.com

ワードプレスの自動タグ生成するプラグイン再開発。 #wp #tag

2022.12.12

Logging

おはようございます、今年もあと半分とちょっとですね、月曜日のたわわ☕。

さて、今日はワードプレスの自動タグ生成するプラグイン再開発しましたってお話です、この自動タグを生成するツールは以前、作っていたのですがYahoo!APIのバージョンアップに伴い使用出来なくなっていました。その為、プラグインを更新しV2対応をこの度、行ったって話です。もともと日本語記事のタグ自動生成するものは存在していたのですが、それがエラーで使用出来なくなり自分で開発したのが今に至っています。

プラグインをダウンロードして使いたい方は、zipファイルを解凍し解凍したフォルダをサーバーのプラグイン置き場にアップロードすることにより使用出来るようになります。尚、前手順としてYahoo!APIのアプリケーションIDの取得を行う必要があります。

プラグインをダウンロードしたくないという方のためにソースコードを一部貼っときます。

        if (isset($appid)) {
            $endpoint = "https://jlp.yahooapis.jp/KeyphraseService/V2/extract";
            $headers = [
                "Content-Type: application/json",
                "User-Agent: Yahoo AppID: ".$appid,
            ]; 
            $param = [
                "id"=> time(),
                "jsonrpc" => "2.0",
                "method" => "jlp.keyphraseservice.extract",
                "params" => [
                    "q"=>preg_replace("/https?:([a-zA-Z0-9|\/|_|\-|%|@|\*|\.|\?|&|=]){0,}/m","",$content)
                    ]
                ];

                $curl=curl_init($endpoint);
                curl_setopt($curl,CURLOPT_POST, TRUE);
                curl_setopt($curl, CURLOPT_HTTPHEADER, $headers);
                curl_setopt($curl,CURLOPT_POSTFIELDS, json_encode($param));
                curl_setopt($curl,CURLOPT_SSL_VERIFYPEER, FALSE);
                curl_setopt($curl,CURLOPT_SSL_VERIFYHOST, FALSE);
                curl_setopt($curl,CURLOPT_RETURNTRANSFER, TRUE);
                
                $response =  json_decode(curl_exec($curl));


            if (isset($response->result->phrases)) {
                foreach ($response->result->phrases as $keys=>$word) {
                    if ($word->text) {
                        $tags[] = $word->text;
                    }
                    if (is_array($tags)) {
                        wp_set_post_tags($post_id, implode(",", array_unique($tags)), false);
                    }
                }
            }
        }

著者名 @taoka_toshiaki

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

OFUSEで応援を送る

投稿日時 2022年12月12 06:00日

タグ

application, false, foreach, gt, headers, implode, isset, jlp, json_decode, json_encode, keys, PARAM, phrases, quot, quot;User-Agent, response, result, Text, true, VERIFYHOST,

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

ワードプレスの自動タグ生成するプラグイン再開発。 #wp #tag

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