Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/395.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 为什么不';我不能弹出推送通知吗?_Javascript_Push Notification - Fatal编程技术网

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