Javascript 使用Node.JS推送通知在Google Chrome上不起作用

我正在学习Node.js，并尝试使用web推送和服务工作者实现推送通知。它在Firefox中工作正常，但不在Chrome上工作，是的，我已经允许通知权限。我在运行Windows10 20H2的Windows机器上。文本编辑器是VS代码。终端是windows powershell，我正在使用npm运行该程序

这是我的

index.js

文件

const express = require('express');
const webPush = require('web-push');
const bodyParser = require('body-parser');
const path = require('path');

const app = express();


app.use(express.static(path.join(__dirname, 'client')));
app.use(bodyParser.json()); 

const publicVapidKey = 'BOlVBFvhDNpLMo3dPEVZ8wDqTdT4zgHMfdMnQs0w3hR1xsiw5_qG9dgdnvUXmnGOuvFwDrGqZi6E1-ItEvj-h3o';
const privateVapidKey = 'aizehHySFENJXaE7QYAxKEqCmIcMpD4fuZM1g2Q8qfU';

webPush.setVapidDetails('mailto: test@test.com', publicVapidKey,privateVapidKey);


app.post('/subscribe', (req,res)=>{
    const subscription = req.body;

    res.status(201).json({});

    const payload = JSON.stringify({ title: 'Subscription Notification' });

    webPush.sendNotification(subscription,payload).catch(err=> console.error(err));
});

const port = 5000;
app.listen(port, ()=>console.log(`Running at port: ${port}`));

const publicVapidKey = 'BOlVBFvhDNpLMo3dPEVZ8wDqTdT4zgHMfdMnQs0w3hR1xsiw5_qG9dgdnvUXmnGOuvFwDrGqZi6E1-ItEvj-h3o';

if('serviceWorker' in  navigator){
    send().catch(err=>console.error(err));
}

async function send(){
    console.log('Registering service worker');
    const register = await navigator.serviceWorker.register('/worker.js',{
        scope:'/'
    });
    console.log('Service worker registered');

    console.log('Registering push');
    const subscription = await register.pushManager.subscribe({
        userVisibleOnly: true,
        applicationServerKey: urlBase64ToUint8Array(publicVapidKey),
    });

    console.log('push registered');

    console.log('Sending push');
    await fetch('/subscribe',{
        method: 'POST',
        body: JSON.stringify(subscription),
        headers: {
            'content-type': 'application/json'
        }
    });

    console.log('push sent');

}

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

console.log('Service worker loaded');

self.addEventListener('push', e => {
    const data = e.data.json();
    console.log('Push received');
    self.registration.showNotification(data.title,{
        body: 'Subscription Successful',
        icon: 'https://ibb.co/P4khKPk'
    })
})

这是

client.js

文件

const express = require('express');
const webPush = require('web-push');
const bodyParser = require('body-parser');
const path = require('path');

const app = express();


app.use(express.static(path.join(__dirname, 'client')));
app.use(bodyParser.json()); 

const publicVapidKey = 'BOlVBFvhDNpLMo3dPEVZ8wDqTdT4zgHMfdMnQs0w3hR1xsiw5_qG9dgdnvUXmnGOuvFwDrGqZi6E1-ItEvj-h3o';
const privateVapidKey = 'aizehHySFENJXaE7QYAxKEqCmIcMpD4fuZM1g2Q8qfU';

webPush.setVapidDetails('mailto: test@test.com', publicVapidKey,privateVapidKey);


app.post('/subscribe', (req,res)=>{
    const subscription = req.body;

    res.status(201).json({});

    const payload = JSON.stringify({ title: 'Subscription Notification' });

    webPush.sendNotification(subscription,payload).catch(err=> console.error(err));
});

const port = 5000;
app.listen(port, ()=>console.log(`Running at port: ${port}`));

const publicVapidKey = 'BOlVBFvhDNpLMo3dPEVZ8wDqTdT4zgHMfdMnQs0w3hR1xsiw5_qG9dgdnvUXmnGOuvFwDrGqZi6E1-ItEvj-h3o';

if('serviceWorker' in  navigator){
    send().catch(err=>console.error(err));
}

async function send(){
    console.log('Registering service worker');
    const register = await navigator.serviceWorker.register('/worker.js',{
        scope:'/'
    });
    console.log('Service worker registered');

    console.log('Registering push');
    const subscription = await register.pushManager.subscribe({
        userVisibleOnly: true,
        applicationServerKey: urlBase64ToUint8Array(publicVapidKey),
    });

    console.log('push registered');

    console.log('Sending push');
    await fetch('/subscribe',{
        method: 'POST',
        body: JSON.stringify(subscription),
        headers: {
            'content-type': 'application/json'
        }
    });

    console.log('push sent');

}

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

console.log('Service worker loaded');

self.addEventListener('push', e => {
    const data = e.data.json();
    console.log('Push received');
    self.registration.showNotification(data.title,{
        body: 'Subscription Successful',
        icon: 'https://ibb.co/P4khKPk'
    })
})

index.html

文件

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset = "UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equip="X-UA_Compatible" content="ie=edge">
        <title>Push Notification using Node</title>
    </head>
    <body>
        <h1>Push Notification using Node</h1>

        <script src="client.js"></script>
    </body>
</html>

使用节点的推送通知
使用节点的推送通知

我尝试使用Chrome的web开发工具来解决这个问题。因为它显示

worker.js

文件正在运行，所以我尝试手动推送到通知，然后在

worker.js

文件的第4行显示错误。错误为“uncaughtsyntaxerror:worker.js:4位置0处JSON中的意外标记T”。请帮忙