I'm trying to implement a sound on my appliaction when it receives some updates (like whatsapp web) using Audio Context API (currently using howler.js).
But I have a problem when the user didn't interact or refresh the page:
The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on the page
It works after the user does some gestures, but after refreshing it asks again and doesn't play the audio.
I looked on whatsapp web, and I realized that it's chat sound always works even without interacting and after refreshing the page.
How can I resolve this issue? Is there another way to solve it?
I think you did not notice that WhatsApp does not make a notification sound until you interact with the page, and the same note that appears for you appears on the WhatsApp web page if you receive a notification without interacting with the page (See the last log in image bellow):
Autoplay is only allowed when approved by the user, the site is
activated by the user or media is muted.
Here is the power of the frontend frameworks (Like Angular) that make all website as a single page, as you only need to interact once so that you continue to receive notifications sound even when you change the page.
Related
We have developed a webchat app that notifies the user if the message was received with firebase notification library, but we are totaly unable to play any sound when the notification arrives, that aparently is happenning due to a chrome performance algorithm
But we notice whatsapp webapp is able to do that, so, does anyone knows how to play a short notification audio when chrome tab is not focused?
Use a JavaScript Webworker https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers
Basically a Webworker is like a Backgroundtask. So your Tab doesnât need to focused to play the sound. Maybe that helps
I have a strict requirement to only allow a logged in user to open my web app in one tab. I've noticed that WhatsApp and Google Messenger's web apps have implemented this. For example, trying to open those apps in more than one tab (be it on the same browser, different browser, or even different device) results in these warnings:
Anyone know how this is done? There must be some sort of sync happening between the server and the client to ensure that only one tab is open. But this would require a unique tab identifier, which can get quite complicated to build reliably. Anyone know how WhatsApp and Google Messenger are doing it? Their technique seems to work flawlessly.
I don't know exactly how this is done at WhatsApp and Google Messenger, but if you work with WebSockets (your post hast the tag "websocket", so I assume, you do) every tab has its single connection to the server, and if your users need to be logged in you could check if the user has already a open weboscket connection to your server.
I am creating a chat application, where I need to send notifications when the user is not watching my website or working in another application.
Now, most of the use cases can be handled using the page visibility API. But there is a particular use case when the user is switching the application from browser to any other application(ex: Outlook), I want to send a notification at that time.
But the issue here is page visibility API does not provide anything on switching applications. That is if the browser active tab has my website and the user switches the application from browser to any other application, it still thinks the user is looking at my website which is wrong because the user is in anther application right now.
I have done R&D on this and I see it is impossible because browsers can't detect these kinds of changes due to security reasons.
But when I checked with Whatsapp web there, javascript is able to find weather user opened the current application or not and based on that they are sending notifications.
So, How can I implement same feature that Whatsapp guys implemented? Is there any web API I am missing here. Are any hacks available to implement this kind feature?
Thanks in advance.
After visiting Facebook website and closing its page, weeks after I'm still getting browser notifications from Facebook about messages, posts, etc.
How is it implemented? Could a website install some scripts to be executed indefinitely regardless of having the website opened in a browser?
The most of browsers are allowing what we called it Push notifications
For example if in Chrome Browser
if you look at chrome://settings/content/notifications
You will find all websites allowed to send you notifications, it's kind of embedded scripts that will be stored in the browser website's cache
The notifications are simply an implementation of Observer design Pattern
actually the website makes a socket connection with your browser so even if you close your browser you can get push notification!
I've been looking around, but I can't think of the correct terminology to describe what I want (and hence get the results that I want from searching).
I'm going to be integrating the QuickBlox video chat into an existing web app. I've been asked to display the video window in a type of persistent floating window that will allow the user to continue using the website while they still have the video chat window open and chatting with the person (eg they could be chatting with a trainer, who might ask them to visit a specific page).
Is this type of thing possible with html/js/css? I need this special pop up window to be persistent and stay connected to the video chat.