0

We create a report about the current opened products. We use Angular Component that is responsible to show a product by its id. So if a product page is opened, the frontend instantly sends a notification with tenantId and productId so we increase this productId in this tenantId by one and vice versa when the user closes the product component, the frontend sends a notification with tenantId and productId so we decrease this productId in this tenantId.

Scenario:-
User1 open product page so front send {"tenantId":"abc","productId":1} so in backend in temporary map increase this productId in this tenantId

User2 open product page so front send {"tenantId":"abc","productId":1} so in backend in temporary map increase this productId in this tenantId

User2 closed product page so front send {"tenantId":"abc","productId":1} so in backend in temporary map decrease this productId in this tenantId

But the problem is when the frontend sends a notification when the user closes the browser or closes the browser tap the request is already triggered but not complete.
So what is the best practice to complete this task?

No necessary this implementation you can give any workaround.

java dev
  • 313
  • 1
  • 3
  • 12
  • Does this answer your question? [How can we detect when user closes browser?](https://stackoverflow.com/questions/37642589/how-can-we-detect-when-user-closes-browser) – H3AR7B3A7 Sep 29 '21 at 15:13
  • No, I already checked it but the request was triggered without complete. I guess this is because when the parent is killed it kill all children. – java dev Sep 29 '21 at 15:16
  • If the request triggers, isn't that enough for your backend to know those products closed? You can't expect a browser not to close when it is told to... – H3AR7B3A7 Sep 29 '21 at 15:26
  • No, not enough because it stopped in filter not reach to API to do action. – java dev Sep 29 '21 at 15:31
  • Maybe a beacon will help you? That is how we do it and it’s pretty reliable. https://developer.mozilla.org/en-US/docs/Web/API/Navigator/sendBeacon – MikeOne Sep 29 '21 at 15:48
  • Thanx @MikeOne it works perfectly. Please make it an Answer to the question. – java dev Sep 29 '21 at 16:55
  • Done.... Hope it helps someone ;-) – MikeOne Sep 29 '21 at 18:40

1 Answers1

1

In order to send something to the server at the moment of 'unloading' the browser tab, there is fairly well supported Native Browser API called sendBeacon (https://developer.mozilla.org/en-US/docs/Web/API/Navigator/sendBeacon). This really is unrelated to Angular and you cannot use the HttpClient for it.

it would look something like this:

document.addEventListener('visibilitychange', function logData() {
  if (document.visibilityState === 'hidden') {
    navigator.sendBeacon('/log', analyticsData);
  }
});

The sendBeacon is almost guaranteed to be send to the server. There is no response needed from the server as the API doesn't actually expect a response to its call. Also, if you need to sent a JSON payload, you can do that using a blob like:

const payload = {'tenantId':'abc','productId':1};
const json = new Blob([JSON.stringify(payload)], { type: 'application/json' });
navigator.sendBeacon(url, json);
MikeOne
  • 4,789
  • 2
  • 26
  • 23