Push notification Blazor Hosted PWA
This is the first time I'm trying to use push notifications in Blazor hosted PWA application.
I am using some of the code from Blazing Pizza but I'm stuck and I'm not sure how to resolve it I hope someone can help me.
Using: Visual Studio 2020 / .Net6 / browser: Chrome
Here is my problem:
when I run my application in debug mode I get the following error:
Failed to execute 'subscribe' on 'PushManager': Subscription failed - no active Service Worker
at subscribe (https://localhost:7141/js/pushNotifications.js:30:45)
the application loads fine but I don't see the Allow notifications from localhost message in the browser when I navigate to the page that fires the event.
When I run the application without debugging it works fine and I am asked to allow notifications from localhost in the browser, my issue is that I need debugging mode to resolve a different error also related to the push notifications but I cant get past subscription failed error.
It seems like for some reason service-worker.js is not loading when I'm running in debug mode.
Don't think the below code is the issue:
pushNotifications.js
(function () {
const applicationServerPublicKey = 'add you key here';
window.blazorPushNotifications = {
requestSubscription: async () => {
const worker = await navigator.serviceWorker.getRegistration();
console.log(worker);
const existingSubscription = await worker.pushManager.getSubscription();
console.log(existingSubscription)
if (!existingSubscription) {
const newSubscription = await subscribe(worker);
if (newSubscription) {
return {
url: newSubscription.endpoint,
p256dh: arrayBufferToBase64(newSubscription.getKey('p256dh')),
auth: arrayBufferToBase64(newSubscription.getKey('auth'))
};
}
}
}
};
async function subscribe(worker) {
try {
return await worker.pushManager.subscribe({
userVisibleOnly: true,
applicationServerKey: applicationServerPublicKey
});
} catch (error) {
if (error.name === 'NotAllowedError') {
return null;
}
throw error;
}
}
function arrayBufferToBase64(buffer) {
// https://stackoverflow.com/a/9458996
var binary = '';
var bytes = new Uint8Array(buffer);
var len = bytes.byteLength;
for (var i = 0; i < len; i++) {
binary += String.fromCharCode(bytes[i]);
}
return window.btoa(binary);
}
})();
Method below calls the above Js function
public async Task RequestNotificationSubscriptionAsync()
{
var subscription = await JsRuntime.InvokeAsync<NotificationSubscriptionDTO>("blazorPushNotifications.requestSubscription");
}
Thanks