App or WebApp ...

[bartbutenaers]

Dear Mihael,

Thanks a lot for contributing this node to the community! I registered this issue, but it is perhaps more a question about your contribution.

I want to achieve the following: when my Node-Red flow detects a door being opened, a notification should be triggered on my Android device. When I click in Android on that notification, either my Node-Red dashboard or the flow editor should be opened (without an extra app so a pure Node-Red solution). Summarized:

But from what I understand this is not possible currently with this contribution. Is that correct? Instead I have to use (or create) a GCM enabled app, and copy it's registration token into your contribution. When the notification is being clicked, that GCM enabled app will be opened.

Do you think it would be possible what I want to achieve? I found this documentation, but it is to fuzzy for me at this moment. The token should be resended automatically to Node-Red when it is being refreshed, and so on ...

Thanks in advance !!!

Bart Butenaers

[Xzya]

Hello,

From what I understand, you want to receive notifications on android, you do not want a native android app for this, and it would be great if it could all be contained in node-red. You can achieve this using web notifications, which are supported in most browsers on android and desktop (Chrome, Firefox and Opera for Desktop and Android, Safari for Desktop, iOS does not support any type of web notifications, only native apps).

But from what I understand this is not possible currently with this contribution. Is that correct?

This library only takes care of sending the notifications, it takes a notification and some tokens as input, and sends the notification to those tokens. What you need is a bit more (which Firebase seems to take care of, but more on this later).

First, let me give you some details on how web notifications work (I will only describe Chrome, Firefox and Opera, since Safari is a bit more complicated and you do not seem to be interested in it).

Web notifications rely on service workers to work. A service worker is a script which can run in your browser in the background, even while you are not currently on that page (the browser can be in the background as well). Thanks to this, you can add push notifications event listeners to it, and since it's always run in the background, you can receive and handle the notifications even while the user does not have the page opened (also, if the user's token is refreshed, an event will be triggered, you can listen to it and when it's triggered you get the subscription again and send it to your server). The flow will be this:

1. You will need a web page where the users will have to visit in order to subscribe for notifications (you should be able to make it using the node-red nodes)
2. The user visits the page
3. You will have a script which will register the service worker, and then it will request push notifications permission from the user
4. The user accepts the permission
5. You will get the user's subscription object in the script
6. You send this subscription to your server (again, you can have a simple http node listening for POST requests)
7. You store the subscription in a database **
8. The alarm is triggered
9. You get the tokens from the database
10. You send a notification to these tokens using this library
11. Since we registered a service worker in the user's browser which listens for push notifications events, the listener will be called

12. You display the notification to the user

    ** I think you can bypass this by using topics and/or possibly device groups. Basically after the user subscribes to notifications, you will also subscribe him to a topic, let's say topic "alerts". Then when the alarm is triggered, you will simply send a notification to that topic, without having to specify the tokens, since FCM already knows which tokens are subscribed to that topic.

So, as you can see, this library only takes care of the sending step, all others need to be implemented separately.

Now, about Firebase, I only used the native app notifications in the past, so I have no experience with the web part, but looking at their documentation it seems to provide you with an sdk which makes it easier for you to implement the scripts which you have to host on the webpage. I would recommend watching their tutorial video since it explains really well how it works, and you can also check their details.

I will try to make a small demo of this if/when I have some time, but until then, I will leave these resources to you if you want to learn more: Lots of service workers examples Push Notifications on the Open Web

Let me know if you have any questions, Thanks!

[bartbutenaers]

Hi Mihael,

thank you for this great overview in chronological order! The stuff about bypassing seems indeed to be a good idea. I'm considering of implementing a template node** for steps 1 to 6, that allows me to show a button in my dashboard:

The template node would do the following:

• Register a service worker
• Show a standard popup for requesting permission
• Get the token (or a refreshed token via the service worker in background)
• Send the token to the output port

The output of the template node could contain the token as payload

This way anybody can choose what to do with the received token (in the output message): they could store it somewhere, they could ignore it, etc ...

Does this way of working makes sense to you? I really appreciate your insights on this topic!

Kind regards, Bart

[Xzya]

Hey,

Yes, that sounds good.

One thing to note though: As far as I know, the service worker needs to be in a separate file, however, I'm not 100% sure about this. You should be able to emulate this by using a http in node with a url like "/service-worker.js" and set the correct content type header for the output. Another thing to note is that this will only work over https. You can use ngrok while testing locally and letsencrypt when you deploy to the server.

I recommend trying the firebase notifications demo here . The demo project is pretty much ready to go, you just have to replace your project's details from firebase. While this will not work with node-red out of the box, it can give you an idea of how everything works together and then you can try porting it to node-red.

Let me know if you have any questions, Thanks!

[eperry]

Did either of you fine gentleman ever create a sample flow of the "HTTP" content to subscribe?

[bartbutenaers]

Hi Edward,

Sorry for the delay, but was abroad a couple of days...

I have been experimenting with FCM in Node-Red last year, but I finally gave up for a couple of reasons:

• Some custom stuff had to be inserted in the header of the html page. Don't think that is an issue anymore, since the dashboard's Template node currently allows to put custom stuff in the header:
• As Mihael already explained, it is not a general solution (e.g. Safari). But meanwhile Apple seems to have added service workers to their 11.1 version. But it is not clear to me whether that is sufficient to create now a single solution that works also on Safari, or are there other exceptional things required for Safari?
• Was at that moment a bit tired of Google updating all their API's and frameworks frequently, causing lots of my developments to become obsolete ...
• And last but not least, I was running out of spare time ;-)

Therefore I started using Telegram as a workaround. Not a fully integrated solution like FCM, but it does the job ...

Kind regards, Bart

[eperry]

Hi Bart

I have seen telegram mentioned in the node-contrib-chatbot but have not looked at it yet.

I hear you, I did some diving in to Workers and seems extremely over complicated for a simple process. Of registering, with endpoints and the compatibility issues with apple are there too.

I did find a nice Static Website demo https://github.com/gauntface/simple-push-demo and embeded the site in the static directory of NodeRed i just could not figure out where to add some code to save 'DEVICE ID' and other data to that project. Though my JS skills are not great so after mucking around I gave up.
I did get it working with copy and pasting the data from the curl example in the static site, into a HTTP OUT pipeline worked just not with this pipeline.

I may return to the idea, but like you said it changes often and I probably should look for a different solution and more maintained option.

Thanks for getting back, to me. I probably will hack/try again in a couple week and if I get any positive results will let you know.