I'm trying to implement push notifications to my website,I managed to do it on desktop, but there is no prompt to ask users for permission on mobile devices.
I've tried using safari on iphone,chrome on iphone(cant even register a service worker there), duckduckgo browser on iphone and there is no popup which works fine on desktop.
My code:
async function registerSw () {
if ('serviceWorker' in navigator) {
alert('supported'); // this pops up in safari
navigator.serviceWorker.register('./sw.js').then(function(registration) {
subscribeToPush();
}).catch(error => console.log(error));
} else {
// I get this on iphone version of chrome
alert('Service workers not supported');
}
}
Subscribe function:
async function subscribeToPush () {
navigator.serviceWorker.ready.then(function(registration) {
alert('inside subscribe'); // this shows up too
registration.pushManager.subscribe({
userVisibleOnly: true,
applicationServerKey: urlB64ToUint8Array('BL9qxdhqL_CM1ROLo6AUfeBvEyUuD7EHT3lAz8ksBZSYPsdE6q__uU2FoX9lr5FtmWtlHs-HRMHen3Ki8WWSVA4')
})
.then(function(subscription) {
alert('sub'); // this doesnt show up
// The subscription was successful
// let key = new Uint8Array(subscription.getKey('p256dh'));
// let auth = new Uint8Array(subscription.getKey('auth'));
let key = btoa(String.fromCharCode.apply(null, new Uint8Array(subscription.getKey('p256dh')))) ;
let auth = btoa(String.fromCharCode.apply(null, new Uint8Array(subscription.getKey('auth')))) ;
let endpoint = subscription.endpoint;
let contentEncoding = (PushManager.supportedContentEncodings || ['aesgcm'])[0];
let data = {
'p256dh': key,
'auth': auth,
'endpoint': endpoint,
'contentEncoding': contentEncoding,
};
alert('Before request')
setTimeout(function() {
ajax(data);
}, 2000);
})
.catch(function(e) {
console.log( alert('permission missing') );
console.log( e );
});
});
}
Currently (2019) no browser on iOS supports push notifications.
Also Safari on desktop supports notifications for websites using a proprietary technology called APNs, not the Push API standard.