web-push-notifications-tutorial/

[utterances-bot]

How to Create Web Push Notifications - Full Tutorial

Push notifications have come to the web! In this tutorial, I'll show you how to create a full-stack application that is able to send and receive web push notifications.

https://felixgerschau.com/web-push-notifications-tutorial/

[fgerschau]

First test comment 👋

[jabuj]

Awesome article, it is the only one that suited my needs! Thank you a lot

[fgerschau]

@ialexi-bl thanks :)

[chaim-chv]

hey great article!! your the best.

maybe you forget to clear out how to do the notification permission request & stuff (in client side)? and maybe you can put little describe how to create notification only to specific user (from the data are saved to the database)?

thanks a lot!! chv

[fgerschau]

Hey @chaim-chv, thanks for the feedback! These would be some great additions to the article :) I'll try to add them soon.

One question: Did you follow the whole tutorial along or did you look for an answer to your questions?

[chaim-chv]

hey! thank you for your kindness! As a matter of fact - what I asked I have already solved and run my first app thanks to your wonderful guide But indeed as you write, for others - maybe you should clarify certain parts of the guide, and add an important part - of what I wrote. Clarify how to handle the data received and stored in DB - how to now issue pushes specifically by users, etc.

thank you very much You are the best

[spiffytech]

This tutorial works for my app if I use Firefox. If I use Brave, I get the error Registration failed - push service error. It seems Brave keeps breaking Web Push support. I can confirm it's not just me writing broken code because this Web Push tester emits the same error.

[fgerschau]

@spiffytech thanks for pointing that out. Looking at the GitHub ticket, it looks like there's nothing we can do from our side, right?

[OPiElix]

For what type of OS is this tutorial?

[chaim-chv]

For what type of OS is this tutorial?

This guide is written about nodeJS web apps which is a platform that will work for you in any existing OS

[johnmihalik]

This article is fantastic! Appreciate the systematic walk through. Thank you!

[WiredEntrepreneur]

Great write up! Clarified a lot of things for me reg web push notifications. Thank you

[srinivas1dasari]

This is very good article, i have tried this and looks like push notification getting below error only when you already subscribed . Error: read ECONNRESET at TLSWrap.onStreamRead (internal/stream_base_commons.js:209:20). Thank you.

[txiverke]

Awesome article!!

[ghumar]

Hi Felix,

thanks for this tutorial.

I'd just like to remind you that your link within a sentence

"... I'd be happy if you subscribed to my newsletter..."

leads to wrong url - there is a double https in it "https://https//felixgerschau.substack.com/" and the link doesn't work.

All the best,

Gregor

[fgerschau]

@ghumar thanks for pointing that out 😄

[ilight]

Excellent step-by-step article.

FYI, In case anyone has error with the import statement for web-push (am using v3.4.5), try below Replace

import webpush from 'web-push';

with

import * as webpush from 'web-push';

[ilight]

Also, you need not do urlBase64ToUint8Array. Instead, you can just pass in the publicVapidKey which gives the same output for subscription.

You may replace applicationServerKey: urlBase64ToUint8Array(publicVapidKey) with applicationServerKey: publicVapidKey

[fgerschau]

Thanks for the tip, @ilight! I'm glad that the tutorial still works, as it's been two years since I published it 😄

[osoza]

Hi, im having problem with the push send, the subscribe and the unsubscribe works perfect but when i try to send the push y get this error:

GET http://localhost:8080/broadcast 410 (Gone) window.broadcast @ index.js:80 onclick @ (índice):11

and the js error show this:

window.broadcast = async () => { await fetch('/broadcast', { <---- here show error method: 'GET', headers: { 'content-type': 'application/json', }, }); };

[osoza]

And this:

WebPushError: Received unexpected response code at IncomingMessage. (C:\Users\user\Documents\Angular Private Projects\web-push-notification-app\node_modules\web-push\src\web-push-lib.js:347:20) at IncomingMessage.emit (events.js:326:22) at endReadableNT (_stream_readable.js:1241:12) at processTicksAndRejections (internal/process/task_queues.js:84:21)

[matthias-ae]

Hi Felix, Thanks for the tutorial, I want to add push-notifications to my web-app, and find the tutorial very helpful and nicely written. Could you add a License to the git repository so I can use some of your code examples in my app? Would be very much appreciated! Cheers, Matthias