Web-push demo fails

Glitch Help
1

Here is the Glitch project.

from index.js

app.post('/subscribe', (req, res) => {
  const subscription = req.body;
  res.status(201).json({});
  const payload = JSON.stringify({ title: 'test' });

  console.log(subscription);

  webpush.sendNotification(subscription, payload).catch(error => {
    console.error(error.stack);
  });
});

When the server calls webpush.sendNotification(… ) to the web-push service, the promise doesn’t resolve, instead errors with the following log:

WebPushError: Received unexpected response code

    at IncomingMessage.<anonymous> (/rbd/pnpm-volume/aedd9ff5-c375-41c7-9af0-c62ca2f8fd7c/node_modules/.registry.npmjs.org/web-push/3.3.0/node_modules/web-push/src/web-push-lib.js:298:20)

    at IncomingMessage.emit (events.js:187:15)

    at endReadableNT (_stream_readable.js:1094:12)

    at process._tickCallback (internal/process/next_tick.js:63:19)

The referenced section of code in web-push-lib.js is:

298      if (requestDetails.proxy) {
299        httpsOptions.agent = new HttpsProxyAgent(requestDetails.proxy);
300      }
2

Hey @SirFizX, it took me a while to get a working version of this together because I kept screwing unrelated things up, but now I have one. I think the issue you’re running into is that the public VAPID key at https://glitch.com/edit/#!/hello-web-push?path=public/client.js:1:0 probably doesn’t match the one in your .env file.

The demo you’re working from in the article at https://thecodebarbarian.com/sending-web-push-notifications-from-node-js.html seems a little fragile to me. For instance, the error handling for sendNotification() only sends the stack, which means you don’t get the body, which indicated that there was a SenderId mismatch. It also doesn’t handle re-registering the service worker, and that error handler only outputs a DOMError without the relevant details.

This is pretty cool! It would be super cool if remixes automatically ran web-push generate-vapid-keys and took the values and updated the remix (and client.js), although that might be pretty challenging

1 Like
3

Thanks @cori ! I am still a newbie with server push.
Have a great day!

4

I still don’t have it running even after putting the right public VAPID key in the client.js . :confused:

I still get the same error stack.

5

I see that I need to have the client re-register with the proper key.

6

Yeah, I’m still a newbie with this, too.

My (working, I think) remix is at https://glitch.com/edit/#!/season-rabbit.

First I made https://glitch.com/edit/#!/season-rabbit?path=index.js:23:23 output just the whole error, which let me see the error body which told me about the SenderId mismatch.

At some point in the process of changing the keys I ran into a problem having to unregister and reregister. The only way I discovered that was by setting a breakpoint on https://glitch.com/edit/#!/season-rabbit?path=public/client.js:8:12 and examining the DOMException. I just cleared the application data and ran it again, although that’s probably not the best solution.

7

I unregistered the service worker yet the client still tries calls the subscribe endpoint with the old key. I am missing something.

8

Thanks. I got it working! :heart:

1 Like
9

Now my remix, which I had working, is now spazzing out an won’t get past reconnecting…

It happened as I was editing the README.md.

spazzing_out
spazzing_out.gif1426×788 1.93 MB

10

It is working again.

What did you do?

11

Heh nothing at all - I just opened the editor and tilde page and both seemed to work fine for me.

12

Nice! I just got your post as a notification. :grin:

1 Like