dimanche 20 septembre 2020

Web notification compatibility in node js

Hello i'm working on sending web notification in my website via a node-js back-end.

It's kinda working, obv it works only with chromium browsers but not with all, i'm having luck with chrome desktop, edge desktop and chrome mobile, having no luck with brave desktop, brave mobile and edge mobile.

So i think that my code needs some refactoring for bettere compatibility but i can't find where,

ATM i use 3 files:

index.js that ask for permission and sends the subscription to the back-end

let vapidKey='BFbFkTNqIad7w5oGJ1cedkFiwzHFvezWOMyQDptOSGVDf32J3YffkOxzJ4pkte9ZUaQJeR5-uxzWafL4stshaEs';

function getCookie(cname) {
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for(var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') {
            c = c.substring(1);
        }
        if (c.indexOf(name) == 0) {
            return c.substring(name.length, c.length);
        }
    }
    return "";
}

// Check for service worker
if ("serviceWorker" in navigator) {
    console.log("Supported");
    send().catch(err => console.error(err));
}else{
    console.log("Unsupported");
}

async function send(){
    const register= await navigator.serviceWorker.register('../scripts/notificationworker.js',{scope:'../scripts/notification.js'});

    const subscription= await register.pushManager.subscribe({
        userVisibleOnly:true,
        applicationServerKey:urlBase64ToUint8Array(vapidKey)
    })

    $.ajax({
        type: 'POST',
        url:url+"newNotificationClient",
        headers:{
            "Authorization":getCookie("Authorization"),
            "content-type": "application/json"
        },
        data:JSON.stringify(subscription),
        success: function (data) {
            console.log(data);
        }});
}

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;
}

then i have my serviceworker that should get the notification

self.addEventListener('push', function(event) {
    event.waitUntil(
        self.registration.showNotification('test', {
            body: "test",
        })
    );
});

And in the back-end i have a express route that gets the subscription and for testing purpose directly sends a test notification

 try{
            const sub=request.body;
            console.log(sub);
           
            const payload=JSON.stringify({ title:'Push test'});
            const options={TTL:0};
            webpush.sendNotification(sub,payload,options).then(response.status(201).send({msg:"done"}));
        }catch (e){
            functions.manageError(e);
        }

What am i missing?




Aucun commentaire:

Enregistrer un commentaire