[ANNOUNCE] node-red-contrib-ui-web-push: beta version

Hi folks,

I am using Telegram already a couple of years, to allow my Node-RED system to send notifications to my Android smartphone. And although Telegram works very good, I have always wanted to have a 100% Node-RED solution (without the need for third party apps).

However the Node-RED dashboard is not a native app, but it is a web app. So instead of native notifications, I needed to add web push notifications to the dashboard. The development of this UI node has become a real struggle, with following history:

  1. The first beta version didn't feel right to me. Fortunately I got very good practical advice from Maxim Salnikov, and after a Skype session I had a lot of homework :thinking:
  2. The second beta was almost started from scratch, but the result was more stable and more straightforward to use. And the second Skype session went much smoother, with less homework.
  3. The third beta is what we will discuss below ...

So would like to thank Maxim Salnikov (@webmaxru - PWA speaker/trainer, organizer of PWA Slack and PWACon) for reviewing my node and sharing his real-life experiences!

You can find the documentation and examples on my Github repository:

Since it is not published on NPM yet, you will have to install it directly from my Github repository:

npm install bartbutenaers/node-red-contrib-ui-web-push

CAUTION There are some prerequisites:

  • You need to use the Node-RED dashboard in your setup
  • You need to use a browser that supports notifications (not Safari on iOs!)
  • You need to use https with a trusted certificate (e.g. Letsencrypt)
  • You need to install Maxim's node-red-contrib-web-push nodes

Then you can start sending notifications to your devices!
As soon as you click a notification, the dashboard will automatically open. And you can also add images to the notifications, or even buttons (which can send triggers to your Node-RED flow to control your devices)!

As usual 'constructive' feedback is very welcome!

Have fun with it!
Bart

11 Likes

Sorry to be the one to ask (again!), but...

Could you give a real life example of how users would use this? Many of us will not be familiar with the term 'web-push', and therefore not appreciate what this node can do.

Also, it's most unusual to have to install an additional contrib node (node-red-contrib-web-push) for a different contrib node to work, normally additional services are added by being a node dependency.

1 Like

Hey Paul,
Good that you mention this, because I didn't realize at all that this was not clear...
But of course I'm into this kind of stuff over my ears...
For me it is a full replacement of myTelegram app. Although Telegram most probably can do much more, but I only use it to send notifications from Node-RED to my smartphone.

But now I now I don't need any third-party stuff anymore to send notifications to my Android phone, since it is all integrated now in Node-RED...

Here step by step on my Android phone, after I have installed it using the step-by-step tutorial on my readme page.

  1. The UI node shows this button on my dashboard:

    image

  2. When I hit the subscribe button, a subscription is send to Node-RED (and stored there e.g. on flow memory using the example subscription manager that I use in my example flows):

  3. When I click on the Inject node's button in my example flow, the notification is send to all subscriptions. So I will get a sound and there it is... The notification arrives on my device, like any other kind of messages:

    image

  4. When I click it, my dashboard opens automatically.

  5. Or when I have send extra info (e.g. image or buttons), you can show those by clicking on the small arrow inside the notification:

    image

  6. And if you don't want to receive notifications anymore on that device, just press the 'Unsubscribe' button:

    image

Is it more clear now? If anybody has any suggestions to explain this better on the readme page, please be my guest!!!!!

Yes I know. But I wanted to reuse the config nodes of Maxim's node-red-contrib-web-ui nodes. Otherwise there would be two similar config nodes, and users had to copy their public and private keys (which seemed not very user friendly to me). But all suggestions for improvement are welcome!

@Bobo: See that you have removed your question. But if anything is not clear to you, then it might be not clear to others also! I don't see any security differences with Telegram. When you want to access your dashboard from the internet, then the entire setup should be secure. Don't think my notifications will change anything about that. But if anybody thinks I'm wrong, please let me know!

1 Like

Yes it already had my attention that 47 people had read this announcement, and there was only one that liked it. That is always a good indicator whether the community was waiting for this kind of node. Anyway I really can understand that people keep using their familiar messaging app (like Telegram ...), since my node has some prerequisites (like Letsencrypt...).

At least there is one single user in Belgium already using this node with full joy ...

1 Like

Thanks. I missed your pre-reqs on the first read :slight_smile:

Hi @BartButenaers, I can't easily play with this as I don't have node-red available via https, so hopefully you can answer a question for me. - Do you have to keep the dashboard open in the phone (or at least opened in the background) for this to work?

Makes me look longingly over at the android side of things while i type this from my iphone where apple doesn’t allow us to do all those fun things :confused:

Hi Colin,
No dashboard should not be open. Even your browser app should not be open!
And when you click on the notification, I check whether the dashboard is already open in the browser. If yes the I show that session, and otherwise I open a new session (in new tabsheet or new window, depending on your browser settings). That way you don't end up with a large series of open dashboard sessions, which you otherwise should close all manually...

Yes I know. Here is a link to a petition, which can sign to convince Apple to implement this on iOS. Safari already supports it on OSX, so it is only a matter of big chief decisions...
And if I'm not mistaken even other browsers (like chrome...) don't support it on iOS, because the are just wrappers around Safari...

1 Like

Wow, I didn't even know that was possible. I shall have to try this out :slight_smile:

1 Like

Nice to hear! But make sure you have a good look at all the prerequisites! What could be an issue for lots of users, who use self signed certificates at the moment... I have also another node to integrate Letsencrypt certificate renewals in Node-RED, but that is in alpha phase yet. It works already, but need to find time to discuss it on Discourse because it lacks some fundamental stuff yet :woozy_face:

Sorry, I have to ask, since I'm already sending messages to my iPhone since years using Telegram. The app in the phone is working well. It's also very easy to send messages from NR to Telegram, using already available Telegram bot nodes, with or without images, also from the dashboard.

What is it I'm missing?

I would suggest the main benefit is that it doesn't use external servers or services, permitting you to be self sustaining.

Additionally... while you could achieve the same affect in many ways (email, polling etc), this utilises push technology (i.e. not polled) so is a good solution for those wanting to avoid external services.

I see, makes sense, more privacy as well

Hi Walter,
I had added to my post that Telegram indeed works well and that I understand that people keep using it, to avoid that people start discussing "why" I created this new node. This is just one of the many ways to send notifications from Node-RED. It is intended for people that want to do as much as possible with only Node-RED without having to install third party apps. People like me... And other people will try to combine lots of good tools, to achieve quickly a powerfull setup. That is all fine for me, but as a developer profile I like to extend Node-RED...

But if there is functionality from other apps that should be added to my node, all suggestions are very welcome!!! Although I realize that I can never achieve the same result, developing alone in my few limited time...

Well the operating system gets the notification, calls the browser app, which calls my background service worker, which shows the notification. When you click the notification you again arrive in my service worker, which calls the dashboard.

But I could e.g. also call the flow editor, or do other stuff in Node-RED. We certainly can extra features there in the near future...

I absolutely like this idea. Although I have no clue how you define "few limited time" given the whole lot of different nodes you are contributing with ... hehe :sweat_smile:

To be clear: It will NOT work with iOS? Or it can, if ...?

Haha :joy: I limit my sleeping time to extend my development time :shushing_face:

I don't know any IF's. But I'm using it only on android and windows, so I haven't looked for the Apple stuff much in detail...

Fair enough, Bart. I neither have a clue, however, I hope that someone will provide an idea. I am only using IOS and macos :smiley: ... I will follow this discussion closely.

The problem with apple...

Edit. Sorry, just noticed Bart already posted that link.

2 Likes

Thanks for the explanation, like @Colin I was thinking that the browser would need to be open, but yes, I understand now.

But wouldn't there just be just 1 config node - for your node? Users would not need to have Maxim's node installed as it would be redundent and just consuming pallette space as well as disk storage space.
It's just my opinion Bart, but I like the ethos of nodes being self contained and providing their own dependencies/configs without relying on other nodes.
Other users may have a different opinion :+1:

That is not correct. My UI node makes sure that your device can accept notifications. But Maxim's nodes sends the notification from Node-RED to that device. So you need both! Will need to explain that on the readme page...

So his nodes require the SAME config node as my ui node. We both need to have the same keypair, otherwise it wouldn't work. Indeed I could create my own config node, but then you need to copy your keypair manually from his config node to my config node. And you have to install his nodes anyway. Therefore I had decided to use his config nodes in my ui node...

But I can understand you don't like this non-standard solution. If anybody has a better solution, just let me know!!

[EDIT] Does anybody knows whether we could add the config node in a separate npm library, which both Maxims and my node could have as a dependency??

1 Like