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

2024年11月9日
文字数[1523文字] この記事は2分54秒で読めます.

おはようございます.サービスワーカーのプッシュ通知で使用するフロント側のコードの一部部分.このコードの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;
}

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

明日へ続く