I noticed some news sites such as Washington Post are able to pop up Web Notifications even though I don't have the site open in a tab. I don't recall this being possible before. How is it even possible for a website to execute the JS necessary if the site isn't open? How does one accomplish this using Web Notifications, is there a particular setting to accomplish this?
I believe they are using Push Notifications via Service Workers.
You can check the current support status to see if it's fit for you. It's well supported in modern browsers (although perhaps not the full specification).
A service worker is a script that your browser runs in the background,
separate from a web page, opening the door to features that don't need
a web page or user interaction. Today, they already include features
like push notifications and background sync.
and
A service worker has a lifecycle that is completely separate from your
web page.
Related
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 am talking about this notification:
Somehow SoundCloud (the website) makes this notification appear and it has working controls. I do not have the app installed, that notification originates from com.android.chrome. I don't really need to know this to reproduce it, but I'm curious as to how it accomplishes this and perhaps in what other ways you can use it.
This is accomplished with Chrome Media Notifications. https://developers.google.com/web/updates/2015/07/media-notifications
To get the playback controls, and other information on the notification, you can customise them by providing meta data with the Media Session API. https://developers.google.com/web/updates/2017/02/media-session
When Android is programmed, it gets certain features that allow it to communicate with web hosts and websites. The website will have to be built a certain way that allows it to be communicative, but that seems to be what's happening in this situation.
I know this is not a specific question, but I just want to get design ideas about a screen sharing web site with SignalR.
We want to add a link on our website which is called "Share My Screen" and then our support team be able to see the content of the browser (not whole desktop) and even they be able to click or type on customer browser.
I was thinking to do it as
Taking screen shot from browser by js (by http://html2canvas.hertzen.com for example)
send taken screen shot to server constantly (I don't know how yet)
Server sends the received screen shot to our support team browser
Capturing mouse move and key press on support team browser
Sending this captured data to customer browser
Since each part of this needs a lot of work I just want to gather all possible ideas to find a tested solution
First of all, I do not think your idea of capturing screen is really doable with javascript technology. Security would be a huge issue, you would need to process a high amount of data, and syncing events would be a nightmare no matter how you approach it. Capturing and sharing tab content and events is a much more manageable goal.
If you are aiming to use this for people who can not manage to install a remote control app, then we can count newer technologies such as WebRTC out due to browser compatibility issues.
There is a good blog post discussing this issue here - (Screensharing a browser tab in HTML5?).
I especially like the first method, using Mutation Observer (browser support) and Web Sockets (browser support). It basically syncs two html documents through the use of mutation observer and uses web sockets for communication. You could use SignalR instead of standard web socket API for communication if you prefer.