节点js中的Web通知兼容性

编程问答 2022-06-13

问题描述

您好，我正在通过node-js后端在网站中发送网络通知。

这有点用，但它仅适用于Chrome浏览器，但不适用于所有浏览器，我对chrome台式机，edge台式机和chrome mobile不太满意，对勇敢的台式机，勇敢的mobile和edge mobile不太满意。

所以我认为我的代码需要进行一些重构以实现更好的兼容性，但是我找不到位置，

ATM我使用3个文件：

index.js请求许可并将订阅发送到后端

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

然后我的服务人员应该收到通知

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

在后端，我有一条明确的路线可以获取订阅，并出于测试目的直接发送测试通知

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

我想念什么？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

javascriptwebwebweb-notificationsweb-push