Communicating two tabs on two devices in javascript using broadcast channel - javascript

I need some advice on whether I need to reimplement my project or I can make the current implementation work. I have implemented a user interface to do some wizard of oz testing. I have a user-side page (Page A), which fires up a second page, the wizard page (Page B). When the user asks questions on page A, the question is sent to page B using a broadcast channel, and the answer is received through a broadcast channel. Everything works great on the same computer.
But my problem is that I want to open the wizard page on a second device, so the user doesn't see the wizard is answering the user's question. When I open the wizard page on a second device (my first device is an apple MacBook, and my second device also is an apple MacBook), the communication between the two pages doesn't happen. Both pages are located on the same server and have the same host name.
Is there any way I can make my current implementation work on two devices?
Or should I just re-implement the communication part?
I would very much appreciate any solution or hint.

Related

Force one tab only on web app (e.g. similar to WhatsApp and Google Messenger)

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.

VueJS perform background operations only on one tab

I wanna improve my VueJS application system.
Currently, each browser tab once per 20 seconds makes synchronization with the server - getting notifications and the latest settings.
It's problematic because a typical user often has 20+ opened tabs, so each synchronizes itself.
I know, that I can share the Vuex Store between tabs, using localStorage, and currently I'm doing this, so I don't have to synchronize everyone tab, cause if one of them synchronizes, all of them will have current data about app notifications and settings.
So the question is - how to do it?
I tried using this solution, but what if the user closes the tab? How to control that, one of the tabs synchronized the data?
Thanks in advance, have a nice day!

redirect my web to a specific application on the user device

I'm building a shopping web site which should redirect the user to a spesific application in his device when he click 'submit'.
I'm developing this site with Java Script.
the requirements are:
1) if he uses the site from a computer-the application should not be open.
2) if he uses the site from a device which the application is already installed in- it should be open,
else-playstore ao itunes should be opened in the applicarion page.
now, my problem is with #2- I dont know how to redirect the user to a specific application in his device and automaticly open it.
I dont know the application URL or any API of it.
Is it possible? how?
You could do this using universal links. Here is the link to the documentation provided by Apple themself. There is even an entire video related to this topic on their website, here's the link. I think these documentations are more than enough for even a beginner to adopt a universal link.

How to find whether the user is watching our website or not(it should work when switching applications also)?

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.

How to detect that User has added webapp to the homescreen on mobile device?

I am working on a webapp. I want to count the number of Users that added my webapp to home screen.
suppose my website is.
http://www.example.com
I have added meta tags that allow Mobile users to add it to home screen. I want a count of users that downloaded my webapp. If User has downloaded even if he has not opened that then also I should get notification that User has added it to home screen.
So I need any event that should work when an Webapp is added to home screen.
My webapp is in HTML5
First of all, officially it's not possible, as per the official FAQ:
How can I detect if the app is running as an installed app?
You can’t, directly.
which is again re-iterated
Best practices
Do not prompt the user to add your app to the homescreen. There is no way to detect if the app is running installed or not.
Source: https://developer.chrome.com/multidevice/android/installtohomescreen
You could do some manual checking of the screen sizes though on page load, as chrome can't go fullscreen by hand, but do not rely on this (though for statistical purposes it might be interesting).
Another clarification which might be useful, the application is not downloaded when it's added to the homescreen. All that happens is that a 'link' will be created to chrome with certain parameters. By design little information is disclosed to developers regarding this process to prevent companies from forcing users to 'install' webapps before they would function.
As of 2018, according to https://developers.google.com/web/fundamentals/app-install-banners/:
To determine if the app was successfully added to the user's home screen after they accepted the prompt, you can listen for the appinstalled event.
window.addEventListener('appinstalled', (evt) => {
app.logEvent('a2hs', 'installed');
});

Categories

Resources