Notifo applicationServerKey Custom Component

MeloHenrique · February 7, 2023, 12:39pm

Hello Sebastian,

I am finishing a custom component that integrates with Notifo and I wanted to use web push notifications however I don’t know what should be the applicationServerKey.
I tried to look into you component but I didn’t figured out from where the applicationServerKey comes.

Best regards,
Henrique Melo

Sebastian · February 7, 2023, 3:06pm

It is the publicKey: https://github.com/notifo-io/notifo/blob/1d86d001206a810293107320dc0d8ca6ae67d9e0/frontend/src/sdk/sdk-worker.ts

But I would just use the SDK, you can use webpush, even if you do not use the predefined UI components.

MeloHenrique · February 7, 2023, 3:22pm

I am using Blazor and I am trying to re-write the most in c#.

I saw that you have this method
export async function apiPostWebPush(config: SDKConfig, subscription: PushSubscription) {
const url = combineUrl(config.apiUrl, ‘api/me/webpush’);

const response = await fetch(url, {
    method: 'POST',
    headers: {
        ...getAuthHeader(config),
        'Content-Type': 'text/json',
    },
    body: JSON.stringify({ subscription }),
});

if (!response.ok) {
    throw new Error(`Request failed with ${response.status}`);
  }
}

This function is handling the registration of the subscription in Notifo.

When I started the component development I mapped a few properties that I thought I would need but I didn’t came across the publicKey, witch enpoint retrives the pulicKey?

Sebastian · February 7, 2023, 3:28pm

I am not sure, if this makes that much sense. Why do you want to have blazor in the service worker?

Sebastian · February 7, 2023, 3:29pm

Good question, I will have a look.

EDIT: You have to call api/web/register, then you get the publicKey back.

MeloHenrique · February 7, 2023, 6:20pm

I was trying to request the “api/me/webpush” endpoint

However I keep getting the same error:

Edit: The Keys field was me inventing

I was guiding myself with the TypeScript code.

Sebastian · February 7, 2023, 7:20pm

I think keys comes directly from the browser subscription:

github.com

notifo-io/notifo/blob/main/frontend/src/sdk/shared/api.ts#L363



export async function apiPostWebPush(config: SDKConfig, subscription: PushSubscription) {
    const url = combineUrl(config.apiUrl, 'api/me/webpush');

    const response = await fetch(url, {
        method: 'POST',
        headers: {
            ...getAuthHeader(config),
            'Content-Type': 'text/json',
        },
        body: JSON.stringify({ subscription }),
    });

    if (!response.ok) {
        throw new Error(`Request failed with ${response.status}`);
    }
}

export async function apiDeleteWebPush(config: SDKConfig, subscription: PushSubscription) {
    const url = combineUrl(config.apiUrl, 'api/me/webpush');

But I guess when you use blazor and you take care about the serialization yourself, you have to get the keys from the blazor subscription object.

MeloHenrique · February 7, 2023, 7:27pm

I was logging the subscription object and there was nothing there but I will search about it. I didn’t knew that it was from the subscription.