Я пытаюсь перенести наших подписчиков из OneSignal.Я экспортировал конечную точку, ключи (auth и P256DH) и настроил VAPID-ключи своей учетной записи ОС на моем сервере.
Когда я пытаюсь отправить уведомление из ОС, затем удаляю работника службы ОС и используюмое собственное, оно отправляет то же самое уведомление, которое я ранее отправлял через ОС (довольно странно), и когда я программно удаляю сервисного работника ОС (через консоль) и регистрирую своего собственного сервисного работника, он отвечает с ошибкой 410 от chrome ("NotRegistered ") и 401 от Firefox (" Запрос не подтвердил отсутствие заголовка авторизации ").
файл app.js:
let isSubscribed = false;
let swRegistration = null;
let applicationKey = "PUBLIC_VAPID_KEY_HERE";
function urlB64ToUint8Array(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;
}
if ('serviceWorker' in navigator && 'PushManager' in window) {
console.log('Service Worker and Push is supported');
navigator.serviceWorker.register('sw.js')
.then(function (swReg) {
console.log('service worker registered');
swRegistration = swReg;
swRegistration.pushManager.getSubscription()
.then(function (subscription) {
isSubscribed = !(subscription === null);
if (isSubscribed) {
console.log('User is subscribed');
} else {
swRegistration.pushManager.subscribe({
userVisibleOnly: true,
applicationServerKey: urlB64ToUint8Array(applicationKey)
})
.then(function (subscription) {
console.log(subscription);
console.log('User is subscribed');
saveSubscription(subscription);
isSubscribed = true;
})
.catch(function (err) {
console.log('Failed to subscribe user: ', err);
})
}
})
})
.catch(function (error) {
console.error('Service Worker Error', error);
});
} else {
console.warn('Push messaging is not supported');
}
function saveSubscription(subscription) {
let xmlHttp = new XMLHttpRequest();
xmlHttp.open("POST", "/subscribe");
xmlHttp.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
xmlHttp.onreadystatechange = function () {
if (xmlHttp.readyState != 4) return;
if (xmlHttp.status != 200 && xmlHttp.status != 304) {
console.log('HTTP error ' + xmlHttp.status, null);
} else {
console.log("User subscribed to server");
}
};
xmlHttp.send(JSON.stringify(subscription));
}
файл sw.js:
let notificationUrl = '';
self.addEventListener('push', function (event) {
console.log('Push received: ', event);
let _data = event.data ? JSON.parse(event.data.text()) : {};
notificationUrl = _data.url;
event.waitUntil(
self.registration.showNotification(_data.title, {
body: _data.message,
icon: _data.icon,
tag: _data.tag
})
);
});
self.addEventListener('notificationclick', function (event) {
event.notification.close();
event.waitUntil(
clients.matchAll({
type: "window"
})
.then(function (clientList) {
if (clients.openWindow) {
return clients.openWindow(notificationUrl);
}
})
);
});
Файл push.js, который отправляет уведомления:
const express = require('express');
const router = express.Router();
const q = require('q');
const webPush = require('web-push');
const keys = require('./../config/keys');
const mysql = require("mysql");
const pool = mysql.createPool({
connectionLimit: 10,
host: 'localhost',
user: 'root',
password: 'root',
database: 'webpush',
multipleStatements: true,
dateStrings: true
});
router.post('/push', (req, res) => {
const payload = {
title: req.body.title,
message: req.body.message,
url: req.body.url,
ttl: req.body.ttl,
icon: req.body.icon,
image: req.body.image,
badge: req.body.badge,
tag: req.body.tag
};
pool.query('SELECT * FROM subscriber', (err, subscriptions) => {
if (err) {
return console.log(err);
console.error(`Error occurred while getting subscriptions`);
return res.status(500).json({
error: 'Technical error occurred'
});
}
if (!subscriptions.length) {
console.error(`No subscribers found`);
return res.status(500).json({
error: 'Subscribers not found'
});
}
let parallelSubscriptionCalls = subscriptions.map(subscription => {
return new Promise((resolve, reject) => {
const pushSubscription = {
endpoint: subscription.endpoint,
keys: {
p256dh: subscription.p256dh,
auth: subscription.auth
}
};
const pushPayload = JSON.stringify(payload);
const pushOptions = {
vapidDetails: {
subject: 'https://www.mydomainhere.com',
privateKey: keys.privateKey,
publicKey: keys.publicKey
},
TTL: payload.ttl,
headers: {}
};
webPush.sendNotification(pushSubscription, pushPayload, pushOptions)
.then((value) => {
resolve({
status: true,
endpoint: subscription.endpoint,
data: value
});
}).catch((err) => {
reject({
status: false,
endpoint: subscription.endpoint,
data: err
});
});
});
});
q.allSettled(parallelSubscriptionCalls).then((pushResults) => {
console.info(pushResults);
});
res.json({
data: 'Push triggered'
});
})
});
module.exports = router;
файл subscribe.js, который выполняет подписку:
const express = require('express');
const router = express.Router();
const mysql = require("mysql");
const pool = mysql.createPool({
connectionLimit: 10,
host: 'localhost',
user: 'root',
password: 'root',
database: 'webpush',
multipleStatements: true,
dateStrings: true
});
router.post('/subscribe', (req, res) => {
const endpoint = req.body.endpoint;
const auth = req.body.keys.auth;
const p256dh = req.body.keys.p256dh;
const subscriptionSet = { endpoint, auth, p256dh }
pool.getConnection((err, connection) => {
if (err) {
console.error(`Error occurred while saving subscription. Err: ${err}`);
return res.status(500).json({
error: 'Technical error occurred'
});
};
connection.query('INSERT INTO subscriber SET ?', subscriptionSet, (err, subscription) => {
if (err) {
console.error(`Error occurred while saving subscription. Err: ${err}`);
return res.status(500).json({
error: 'Technical error occurred'
});
}
res.json({
data: 'Subscription saved.'
})
})
});
});
module.exports = router;