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

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

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

タグ

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