Informational question about (web) push notifications about node-red-dashboard HOT 10 OPEN

Sorry, only just spotted this thread, not sure why GitHub didn't notify me earlier.

The UI.js part of the uibuilder client library already supports the notification part of the equation & you can push a notification but only via a Socket.IO connection at present (websocket or long-polling interface). uib.notify, ui.notification.

I've several times looked at possibly implementing the Push API for UIBUILDER but was put off by the complexity and having not had anyone ask for it. Still, I'd been looking at this from a PWA perspective as well which I think adds a lot of complexity, don't think I'm quite ready for that though I have created a bare-bones service worker script previously for testing with the uibuilder client library.

However, this has prompted me to look at push notifications again. It seems like it could indeed be useful for mobile users. PWA is certainly on the backlog for uibuilder.

Not sure I would implement as a separate node though since UIBUILDER doesn't really need them. Would probably implement as a command message, maybe an option to the existing uibuilder.notify which can already be triggered from a simple msg to uibuilder.

from node-red-dashboard.

@bartbutenaers Definitely still valid and working on it. I'll let you know what I've come up with.

from node-red-dashboard.

This isn't something I've had to cover before, so isn't my area of expertise unfortunately, although worth stressing, Vue stuff doesn't have to be Vue-specific, you can still write raw JavaScript content and it'll be fine.

@TotallyInformation may have covered similar in UI Builder?

from node-red-dashboard.

https://web.dev/articles/push-notifications-overview

This gives a great overview, and does reinforce that we need a supporting "push service" to get the full pipeline working.

from node-red-dashboard.

Currently my node-red-dashboard-2-ui-web-push is nearly finished. Just need to find time to fix the last bits and pieces. But most of it already works fine.

However today @cgjgh has created a pull request which is somehow related to this. So not sure at the moment how to continue with my node. If I understand correctly then - in case of pwa - you still need to write your own custom service worker js file, but it is registered using PWA (while I register it with my custom code). And I think the remaining part is rather similar (vapid key pair on the server, and so on).

If pwa is the way to go, then I won't publish my web-push node on npm. Then I simply keep it for private use, so I can migrate my own old dashboard finally to D2. But unfortunately I am not in the free time luxery to rewrite my node for the third time to integrated it with pwa....

from node-red-dashboard.

Just need to find time to fix the last bits and pieces.

FYI: I did a series of fixes in the last hour, and now my web-push ui node has no "known" issues anymore at the moment. It seems to work fine for my own home automation, both on Windows and Android. So I can finally start migrating my own dashboard...

from node-red-dashboard.

I think your approach with your custom service worker is pretty similar to the PWA service worker actually, the latter just being a basic one allowing web app to be installed as PWA. Here's some documentation which allows you to inject your custom service worker into Vite-PWA. https://vite-pwa-org.netlify.app/guide/inject-manifest.html

from node-red-dashboard.

I’ll look into integrating your sw from node-red-dashboard-2-ui-web-push into Vite-PWA using the above method.

As for the web push notifications, I think these are just automatically upgraded to “native” push notifications when received by a PWA.

Overall, I think code for the two approaches is quite similar and can be integrated.

from node-red-dashboard.

I’ll look into integrating your sw from node-red-dashboard-2-ui-web-push into Vite-PWA using the above method.

@cgjgh,
That would be most kind of you! Don't hesitate to let me know if something is not clear to you!

BTW each instance of my web-push ui node has its own service worker. It is the same js file but download from separate url's. I added the node id in the url, to achieve this (i.e. each unique url gets its own service worker).

That way, you can e.g. add 3 ui web-push nodes to your flow. So you get 3 subscribe buttons in your flow:

1. All notifications
2. Alarm notifications
3. Doorbell notifications

Each member of the familly can subscribe (via the dashboard on their mobile phones) to a selection of notifications of their interest. Could have perhaps implemented it somehow using a single service worker, but doing it this way was achievable in my limited free time...

from node-red-dashboard.

I’ll look into integrating your sw from node-red-dashboard-2-ui-web-push into Vite-PWA using the above method.

Evening @cgjgh,
I see that you managed to complete your PWA pull request. Nice work!!

Now that PWA is supported in the dashboard, I hope that your above proposal is still valid...

Would be nice if you could find some time to review my repo, and have a look whether you can find a way to do it in a pwa way. Because I have not really an idea what I need to change. Or if you could give me some tips how (and why if possible) you would change some pieces, then I try to refactor it myself. But some PWA noob level feedback might help ;-)

Thanks!!
Bart

from node-red-dashboard.