Question

我正在研究可以使用其向订阅的客户端发送桌面推送通知的解决方案。

我已经创建了一个基本的解决方案，在该解决方案中，只要用户单击按钮，我都会询问用户是否要允许我的应用程序接收通知！

每次我单击按钮时，都会收到错误“注册失败-权限被拒绝” 。

这样我就无法获得所需的端点来保存在后端

这是我的代码

index.html

    <html>
       <head>
          <title>PUSH NOT</title>
          <script src="index.js"></script>
       </head>
       <body>
          <button onclick="main()">Ask Permission</button>
       </body>
    </html>

index.js

const check = () => {
  if (!("serviceWorker" in navigator)) {
    throw new Error("No Service Worker support!");
  } else {
      console.log("service worker supported")
  }
  if (!("PushManager" in window)) {
    throw new Error("No Push API Support!");
  } else {
      console.log("PushManager worker supported")
  }

};

const registerServiceWorker = async () => {
  const swRegistration = await navigator.serviceWorker.register("/service.js?"+Math.random());
  return swRegistration;
};

const requestNotificationPermission = async () => {
  const permission = await window.Notification.requestPermission();

  // value of permission can be 'granted', 'default', 'denied'
  // granted: user has accepted the request
  // default: user has dismissed the notification permission popup by clicking on x
  // denied: user has denied the request.
  if (permission !== "granted") {
    throw new Error("Permission not granted for Notification");
  }
};

const main = async () => {
  check();
  const swRegistration = await registerServiceWorker();
  const permission = await requestNotificationPermission();
};
// main(); we will not call main in the beginning.

service.js

// urlB64ToUint8Array is a magic function that will encode the base64 public key
// to Array buffer which is needed by the subscription option
const urlB64ToUint8Array = base64String => {
  const padding = "=".repeat((4 - (base64String.length % 4)) % 4);
  const base64 = (base64String + padding)
    .replace(/\-/g, "+")
    .replace(/_/g, "/");
  const rawData = atob(base64);
  const outputArray = new Uint8Array(rawData.length);
  for (let i = 0; i < rawData.length; ++i) {
    outputArray[i] = rawData.charCodeAt(i);
  }
  return outputArray;
};

const saveSubscription = async subscription => {
  console.log("Save Sub")
  const SERVER_URL = "http://localhost:4000/save-subscription";
  const response = await fetch(SERVER_URL, {
    method: "post",
    headers: {
      "Content-Type": "application/json"
    },
    body: JSON.stringify(subscription)
  });
  return response.json();
};
self.addEventListener("activate", async () => {
  try {
   const applicationServerKey = urlB64ToUint8Array(
      "BFPtpIVOcn2y25il322-bHQIqXXm-OACBtFLdo0EnzGfs-jIGXgAzjY6vNapPb4MM1Z1WuTBUo0wcIpQznLhVGM"
    );  
    const options = { applicationServerKey, userVisibleOnly: true };
    const subscription = await self.registration.pushManager.subscribe(options);
    console.log(JSON.stringify(subscription))
    const response = await saveSubscription(subscription);
  } catch (err) {
    console.log(err.code)
    console.log(err.message)
    console.log(err.name)
    console.log('Error', err)
  }
});

self.addEventListener("push", function(event) {
  if (event.data) {
    console.log("Push event!! ", event.data.text());
  } else {
    console.log("Push event but no data");
  }
});

我也创建了一些后端

const express = require("express");
const cors = require("cors");
const bodyParser = require("body-parser");
const webpush = require('web-push') 

const app = express();
app.use(cors());
app.use(bodyParser.json());

const port = 4000;

app.get("/", (req, res) => res.send("Hello World!"));

const dummyDb = { subscription: null }; //dummy in memory store

const saveToDatabase = async subscription => {
  // Since this is a demo app, I am going to save this in a dummy in memory store. Do not do this in your apps.
  // Here you should be writing your db logic to save it.
  dummyDb.subscription = subscription;
};

// The new /save-subscription endpoint
app.post("/save-subscription", async (req, res) => {
  const subscription = req.body;
  await saveToDatabase(subscription); //Method to save the subscription to Database
  res.json({ message: "success" });
});

const vapidKeys = {
  publicKey:
    'BFPtpIVOcn2y25il322-bHQIqXXm-OACBtFLdo0EnzGfs-jIGXgAzjY6vNapPb4MM1Z1WuTBUo0wcIpQznLhVGM',
  privateKey: 'mHSKS-uwqAiaiOgt4NMbzYUb7bseXydmKObi4v4bN6U',
}

webpush.setVapidDetails(
  'mailto:janakprajapati90@email.com',
  vapidKeys.publicKey,
  vapidKeys.privateKey
)

const sendNotification = (subscription, dataToSend='') => {
  webpush.sendNotification(subscription, dataToSend)
}

app.get('/send-notification', (req, res) => {
  const subscription = {endpoint:"https://fcm.googleapis.com/fcm/send/dLjyDYvI8yo:APA91bErM4sn_wRIW6xCievhRZeJcIxTiH4r_oa58JG9PHUaHwX7hQlhMqp32xEKUrMFJpBTi14DeOlECrTsYduvHTTnb8lHVUv3DkS1FOT41hMK6zwMvlRvgWU_QDDS_GBYIMRbzjhg",expirationTime:null,keys:{"p256dh":"BE6kUQ4WTx6v8H-wtChgKAxh3hTiZhpfi4DqACBgNRoJHt44XymOWFkQTvRPnS_S9kmcOoDSgOVD4Wo8qDQzsS0",auth:"CfO4rOsisyA6axdxeFgI_g"}} //get subscription from your databse here.
  const message = 'Hello World'
  sendNotification(subscription, message)

  res.json({ message: 'message sent' })
})

app.listen(port, () => console.log(`Example app listening on port ${port}!`));

请帮助我

Answer 1

尝试以下代码：

index.js

const check = () => {
    if (!("serviceWorker" in navigator)) {
        throw new Error("No Service Worker support!");
    } else {
        console.log("service worker supported")
    }
    if (!("PushManager" in window)) {
        throw new Error("No Push API Support!");
    } else {
        console.log("PushManager worker supported")
    }

};

const saveSubscription = async subscription => {
    console.log("Save Sub")
    const SERVER_URL = "http://localhost:4000/save-subscription";
    const response = await fetch(SERVER_URL, {
        method: "post",
        headers: {
            "Content-Type": "application/json"
        },
        body: JSON.stringify(subscription)
    });
    return response.json();
};

const urlB64ToUint8Array = base64String => {
    const padding = "=".repeat((4 - (base64String.length % 4)) % 4);
    const base64 = (base64String + padding)
        .replace(/\-/g, "+")
        .replace(/_/g, "/");
    const rawData = atob(base64);
    const outputArray = new Uint8Array(rawData.length);
    for (let i = 0; i < rawData.length; ++i) {
        outputArray[i] = rawData.charCodeAt(i);
    }
    return outputArray;
};

const registerServiceWorker = async () => {
    return navigator.serviceWorker.register("service.js?"+Math.random()).then((swRegistration) => {
        console.log(swRegistration);
        return swRegistration;
    });
};

const requestNotificationPermission = async (swRegistration) => {
    return window.Notification.requestPermission().then(() => {
        const applicationServerKey = urlB64ToUint8Array(
            "BFPtpIVOcn2y25il322-bHQIqXXm-OACBtFLdo0EnzGfs-jIGXgAzjY6vNapPb4MM1Z1WuTBUo0wcIpQznLhVGM"
        );
        const options = { applicationServerKey, userVisibleOnly: true };
        return swRegistration.pushManager.subscribe(options).then((pushSubscription) => {
            console.log(pushSubscription);
            return pushSubscription;
        });
    });
};

const main = async () => {
    check();
    const swRegistration = await registerServiceWorker();
    const subscription = await requestNotificationPermission(swRegistration);
    // saveSubscription(subscription);
};

service.js

self.addEventListener("push", function(event) {
    if (event.data) {
        console.log("Push event!! ", event.data.text());
    } else {
        console.log("Push event but no data");
    }
});

Answer 2

我可以想到拒绝许可的三个原因

1）您的站点不在https上（包括不在https上的localhost），据我所知，chrome的默认行为是阻止http站点上的通知。如果是这种情况，请点击网址附近的信息图标，然后点击网站设置，然后更改通知以询问

2）如果您使用的是Safari，则safari正在使用Request权限中已弃用的接口，也就是说，该值不是通过Promise返回而是通过回调返回，而不是

Notification.requestPermission().then(res => console.log(res))

是

Notification.requestPermission(res => console.log(res))

3）您的浏览器设置正在全局阻止通知请求，以确保这不是您的问题，请在控制台中（在受保护的https站点上）运行以下代码

Notification.requestPermission().then(res => console.log(res))

如果收到警报框，则问题可能出在其他方面，如果没有，请确保浏览器未阻止通知请求

Answer 3

点击“允许”，我不知道为什么我无法获得终点

订阅推送通知时总是抛出注册失败错误

3 个答案: