Javascript 为什么不';我不能弹出推送通知吗?
我有以下代码用于处理和订阅在端口Javascript 为什么不';我不能弹出推送通知吗?,javascript,push-notification,Javascript,Push Notification,我有以下代码用于处理和订阅在端口4000上运行的前端推送通知: var endpoint; var key; var authSecret; // We need to convert the VAPID key to a base64 string when we subscribe function urlBase64ToUint8Array(base64String) { const padding = '='.repeat((4 - base64String
4000
上运行的前端推送通知:
var endpoint;
var key;
var authSecret;
// We need to convert the VAPID key to a base64 string when we subscribe
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;
}
function determineAppServerKey() {
var vapidPublicKey = 'BAyb_WgaR0L0pODaR7wWkxJi__tWbM1MPBymyRDFEGjtDCWeRYS9EF7yGoCHLdHJi6hikYdg4MuYaK0XoD0qnoY';
return urlBase64ToUint8Array(vapidPublicKey);
}
export default function registerServiceWorker() {
if('serviceWorker' in navigator) {
navigator.serviceWorker.register(`${process.env.PUBLIC_URL}\sw.js`).then(function(register){
console.log("worked", register)
return register.pushManager.getSubscription()
.then(function(subscription) {
if (subscription) {
// We already have a subscription, let's not add them again
return;
}
return register.pushManager.subscribe({
userVisibleOnly: true,
applicationServerKey: determineAppServerKey()
})
.then(function(subscription) {
var rawKey = subscription.getKey ? subscription.getKey('p256dh') : '';
key = rawKey ? btoa(String.fromCharCode.apply(null, new Uint8Array(rawKey))) : '';
var rawAuthSecret = subscription.getKey ? subscription.getKey('auth') : '';
authSecret = rawAuthSecret ?
btoa(String.fromCharCode.apply(null, new Uint8Array(rawAuthSecret))) : '';
endpoint = subscription.endpoint;
alert("came here")
return fetch('http://localhost:3111/register', {
method: 'post',
headers: new Headers({
'content-type': 'application/json'
}),
body: JSON.stringify({
endpoint: subscription.endpoint,
key: key,
authSecret: authSecret,
}),
})
});
});
}).catch(function(err){
console.log("Error",err)
})
}
}
服务器在3111上运行。当我导航到4000
端口时,我可以看到出现允许/阻止弹出窗口,如果我给予允许,我希望服务器发送感谢您像我在服务器中所做的那样注册消息。但是,感谢您注册
弹出窗口不会出现,并且控制台中没有错误
注意:通过使用chrome扩展启用CORS,我点击了3111
。我认为这可能取决于您的服务器,因为我家里有一台python服务器,当我使用通知api时,它不会通知,除非我在https站点上。如果这不是问题所在,那么我假设存在代码错误,但我相信您可以使用广播频道和xhr,例如:let b=new BroadcastChannel;b、 onmessage(function(){XmlHTTPRequest('POST',{Data:'yes})};
并使用xhr推送通知。通过启用CORS
-在哪里启用CORS?我看不到在代码中任何地方提到cors或相关的访问控制允许头posted@JaromandaX:使用chrome扩展,我更新了问题哦,所以你没有启用CORS,你绕过了CORS@JaromandaX:那我现在该怎么办呢?哦,我不知道,我只是在纠正你声称你“启用了CORS”-浏览器开发人员工具控制台/网络选项卡可能会提供一些错误信息供您使用
const webpush = require('web-push');
const express = require('express');
var bodyParser = require('body-parser');
var path = require('path');
const app = express();
// Express setup
app.use(express.static('public'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ // to support URL-encoded bodies
extended: true
}));
function saveRegistrationDetails(endpoint, key, authSecret) {
// Save the users details in a DB
}
webpush.setVapidDetails(
'mailto:contact@deanhume.com',
'BAyb_WgaR0L0pODaR7wWkxJi__tWbM1MPBymyRDFEGjtDCWeRYS9EF7yGoCHLdHJi6hikYdg4MuYaK0XoD0qnoY',
'p6YVD7t8HkABoez1CvVJ5bl7BnEdKUu5bSyVjyxMBh0'
);
// Home page
app.get('/', function (req, res) {
res.sendFile(path.join(__dirname + '/index.html'));
});
// Article page
app.get('/article', function (req, res) {
res.sendFile(path.join(__dirname + '/article.html'));
});
// Register the user
app.post('/register', function (req, res) {
var endpoint = req.body.endpoint;
var authSecret = req.body.authSecret;
var key = req.body.key;
// Store the users registration details
saveRegistrationDetails(endpoint, key, authSecret);
const pushSubscription = {
endpoint: req.body.endpoint,
keys: {
auth: authSecret,
p256dh: key
}
};
var body = 'Thank you for registering';
var iconUrl = 'https://raw.githubusercontent.com/deanhume/progressive-web-apps-book/master/chapter-6/push-notifications/public/images/homescreen.png';
webpush.sendNotification(pushSubscription,
JSON.stringify({
msg: body,
url: 'https://localhost:3111',
icon: iconUrl,
type: 'register'
}))
.then(result => {
console.log("came here ")
console.log(result);
res.sendStatus(201);
})
.catch(err => {
console.log(err);
});
});
// The server
app.listen(3111, function () {
console.log('Example app listening on port 3111!')
});