Notification on client desktop without involving server - javascript

I am building web application to keep track of activities of users using an Angular front-end and the back-end using PHP. User click start button, what activity he/she is doing. When user click the start button, timer start to run. But sometimes user may forget to stop timer or just close the browser. What i want to is to notify to the user desktop with some notification something like web push notification when activity goes too long. And my question is
1.Is it possible to notify the user when he/she close my web in browser,but his/her desktop is on? and how?
2.How to send push notification to the user desktop without interacting with server?
I see some tutorial like push notification where server send notification but I have nothing update in database I have my clock running in AngularJS. So I have to check clock time also in Angular. As Angular is a framework of JavaScript, I am comfortable with JavaScript too. Any ideas how to use GCM or ServiceWorker or push notification. I am new to GCM, push notification and service worker.
Any suggestions?

Related

How to display messages in a chat application in Django

I am building a chat application in Django. But I am confused about how to show messages as soon as the person on the other side sends a message. At present, I have to reload the page to view the messages. I thought of refreshing the page automatically for 3-5 seconds. Is there any way to display messages as soon as the other person sends a message
You need to use websockets to obtain such type of applications . Web sockets maintain a link with your server and when ever there is a change in server the user gets notified automatically without refreshing.
You should use websockets to accomplish this. The library to go is django channels (https://channels.readthedocs.io/en/latest/) and in their example they also build a small chat application.

sse with push notification in a pwa

I am trying to integrate push notification in a web app(also PWA). I am using Mercure(https://symfony.com/doc/current/mercure.html) to send notification to users.
The webapp is made using Angularjs and PHP-symfony. I think for SSE the connection should remain open or re open every few seconds to send an event.
I don't know if it will work for PWA. Can I send a push notification using SSE to a PWA even when it's not open? If not, what should I use to send a push notification.
Should I use websockets? All the libraries for websockets I've seen create channels. And I don't know how to send a notification to a particular user in my database because in websocket, the only way to distinguish a user is a sessionId that's generated when they join the channel.
I will probably have to save the sessionId of the user in database when they login and join a common channel in the application and find sessionId of users I want to send a notification to and then send.
My question is, if I use SSE, can I send push notification when the webapp or PWA isn't open. Will websockets help? If yes, please give a suggestion on how I do what I want to do.

Sending a notification to my Android from a button press on a website (JavaScript)

I'm trying to create a button action on a website that will send a notification alert on my phone (Kind of like a pager).
I have a button on a website, and I'm trying to determine what the best way to receive notification of that button press on my Android phone.
Basically:
Button Press on website -> Notification on phone saying button was pressed
How would I implement this in JavaScript, and what would be the best service to do so? Maybe through Google Push, or even another app that I can piggy back off of an existing IM service?
I imagine you can use 2 approaches:
Push Notifications
WebSockets
Both of them are workable solutions for your issue
Probably, Push Notifications will be easier and more resource-consuming for mobile app, so let me explain how you can do it
There are lot's of ready-to-go and FREE solutions for push notifications, for example, ConnectyCube
So the flow can be like this:
You have a user (you can create it via ConnectyCube dashboard, Users module). So you use this user on both Web and Android ends
On Android part, you authenticate this user and subscribe for push notifications
On web part, you also authenticate this user. Then send a push notifications for himself when a button was pressed
So Android user will receive a push then

Pubnub: Background Processes for an Auction App Development

Hello I am developing an auction app like tophatter.com. I want to implement an application that has background process in it. I want this process to run forever until I stop it
http://eoction.com thatss our current site. The problem on our site when we refresh the page the auction also restart. We need something like a continuous process like tophatter.com if you refresh the page it will load the updated auction process.
I found this great service called pubnub. I am thinking we need a background process for this? This will process the auction on the pubnub blocks and then when we visit the site we will just need to query on its updated process?
Does pubnub support something like this?
PubNub Web Page Best Practices
When user refreshes your web app page or navigates to another page there are things you need to consider as a web app developer no matter what technologies you may be using. I will address, at a high level, the things you need to do when PubNub is integrated into your web page.
Restore Parameter
Whether the user interrupts your connection to PubNub or it is a network failure, you will want PubNub to reconnect and continue where it left off as much as possible. The PubNub JavaScript SDK has a initialization parameter called restore that when set to true, will reconnect to PubNub and get missed messages after the connection is dropped and reestablished.
var pubnub = new PubNub({
subscribeKey: "mySubscribeKey",
publishKey: "myPublishKey",
ssl: true,
uuid: getUUID();
restore: true
});
Reuse UUID
It is important to reuse the same UUID for each end user as this will allow PubNub to identify that user uniquely when it comes to Presence so that it doesn't produce new join events for the same end user. The PubNub JavaScript SDK actually generates a UUID and stores it in localStrorage and reuses it by default but very likely you have your own UUID that you would like to use for each of your end users.
Last Message Received Timetoken
If the network disruption is brief as is the case with a page refresh or page navigation, then missed messages are retrieved when restore:true is implemented in the init as stated above. But when the user is offline for more than say 5 minutes, you may want to retrieve missed messages on one or more channels. The best way to do this is to keep track of the timetoken of the last received message by storing it in localStorage every time a message is received via subscribe callback. When the user comes back online and it is has been more than 5 minutes since they were last online, call history using this last received message timetoken on each channel that you need to get missed message from.
Subscribe to Channels
Finally, you'll want to make sure that the user is subscribed to the channel they expect to be based on what their state prior to the connection disruption. If it is a page refresh, you likely just want to resubscribe them to the same list of channels. To do this, you just need to keep a list of channels they are currently subscribed to, once again, in localStorage. If the user navigates to a new page and this causes a full page reload (modern web apps should not require this, but...) then you may want to unsubscribe from some channel(s) and subscribe to new channel(s), it just depends on what that page navigation means to your app. Modern web app frameworks do not require full page reload for page navigation since the web app acts more like a desktop app than older web apps. And again, if the the user was offline for quite some time (more than 5 minutes) then it may not make sense to subscribe them to the same channels that they were subscribed to before. Really depends on your use case.
And by the way, Tophatter uses PubNub ;) but all of the above are generic best practice guidelines and recommendations and is not referencing any one app in particular.
EDIT: To address you question specifically, as pointed out in comments below...
You can't implement long-running process in PubNub BLOCKS (not currently, anyways), so you will need a server process for this. When the user refreshes the page, you just need to hit your server for current state. If using PubNub to keep this progress bar updated in realtime, you just subscribe to that channel that is sending the state of that progress bar and update your client. Using the same best practices I provided above are still necessary.

Listener on a Web Page?

Is there a way for a web page to respond to a message from a web server, while idle? I need to display a page of user information. As a user swipes his card, a system will authenticate him, and then send a message to my solution, indicating that a user authenticated.
I then need to update a web page with his details. So, no interaction with the page from the user. It must just refresh when I send a message to it - somehow. Is this possible?
I was thinking of some sort of page which has 'subscribed' to events from a server, allowing me to send it, maybe a JSON object, and when it receives this message, refreshes the screen with the data from the messages it recieves?
We don't want to poll the server every second. We need to it respond to an incoming event. So, listening, as opposed to asking. and it has to be quick. So, the only delay would be the amount of time for the message to go from the web server, to the client browser.
We're using .Net application server, standard browser (Chrome, IE etc), a Bootstrap UI (Irrelevant, I guess).

Categories