Question

我有以下代码用于处理＆amp;订阅在端口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)
        })
    }
}

，服务器代码如下所示：

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

服务器在3111上运行。当我导航到4000端口时，我能够看到允许/阻止弹出窗口，如果我给予允许，我希望服务器发送Thank you for registering消息，就像我在服务器中所做的那样。但是Thank you for registering弹出窗口没有出现，控制台中没有错误。

注意：我通过使用chrome-extension启用CORS来点击3111。

Answer 1

我认为这可能取决于你的服务器，因为我在家里有一个python服务器，当我使用通知api时它不通知，除非我在https网站上。如果那不是问题那么我会假设存在代码错误，但我相信您可以使用广播频道和xhr，例如：let b = new BroadcastChannel;b.onmessage(function(){XmlHTTPRequest('POST', {Data: "yes"})}; )并使用xhr推送通知。

为什么我没有弹出推送通知？

1 个答案: