How to simulate a slow internet connection for the user experience? - javascript

I was wondering if it is possible to throttle user internet speed when accessing the website, based on a user choice. This is needed for a small scale test of how users react to different internet speeds. My workaround would be to get the user to manually throttle the speed in chrome dev tools, but I would prefer that as the last option. Any option to achieve this or something similar would be amazing. Thank you.
Edit: Just to clarify I am looking to code the throttling functionality within the website itself so the user won't have to install something or set the Chrome dev tools manually, as I am aware of those solutions already.

What you desire to do is not easily possible due to security reasons. Chrome (and most other browsers) prevent DevTools access from js scripts. A user has to manually and interactively press the buttons on DevTools to change the network speed of the chrome tab.
On your behalf, you should get the UX testers to use the DevTools.
That being said, there are solutions for this. But they might be complex!
Solutions in JS:
Dirty fix:
Create looping data downloader script that performs a DOS attack on the client.
Basically something like:
let delay = 100*(Math.random() +0.5);
setInterval(/*downloadStuff*/, delay);
Issues with this fix:
This creates real network congestion on the client, which might not be optimal.
Introduces web page lag because of CPU usage.
Better, but time consuming fix:
You can simulate a slow network environment by doing the following:
Periodically do request.abort() some ajax and xhr requests. See here and here. And yes, you have to keep references to the remote calls. (Some inspirational code by bruth)
Randomly prevent some images from loading by changing their src attribute for a few second. See here.
And... there are more to it.
Iframes are tricky as they can be from another domain. Chrome does not support cross domain request. To simulate a slow network, you have to stop the iframe once in a while and refresh it using the src attribute, just like the images. You could use window.frames[].stop(), to simulate a frozen/stopped iframe.
Videos are sometimes loaded with iframes, which is again hard to simulate network lag on. Unlike, images, reloading a video will reset the playback time. AFAIK, there are no way to simulate video lag easily (without heavy change of video playback logic).
And... if you are really into it. Go ahead and override different events such as those from GlobalEventHandlers.
Many solutions aside from js
Use Chrome DevTools (easiest as mentioned)
If the site is connected to a server you own. Add delay on before responding to simulate server congestion.
Use/create a Chrome Extension that changes the network speed
Create your own browser that can run the site, and change the network speed accordingly
Install software to control networks settings on the OS
Change the network speed on the router

Not entirely sure what experience you want other than the Chrome dev tools way but here is an alternative.
clumsy makes your network condition on Windows significantly worse, but in a managed and interactive manner
https://jagt.github.io/clumsy/
https://serverfault.com/a/570702

Related

VueJS block activity on not active browser tab

I have a web app written in Typescript and VueJS that execute a collection of tasks (ajax requests) and to track the whole process (and to execute one task after another) I use a Vue instance as bus to notify changes between components.
If the user open a new browser tab, the process stop. If the user come back, the process resumes.
The issue is present in Firefox and in Chrome.
I put in my code a simple window.setInterval to log every 2 seconds an 'Hello' and...surprise I have an 'Hello' every 2 seconds without any temporal 'hole'.
I see a very old issue in github for a similar situation: https://github.com/vuejs/Discussion/issues/76 but seems to be too old to be this.
I expect that the process doesn't stop but continues without interruptions..
https://developers.google.com/web/updates/2017/03/background_tabs
Background tabs can have a dramatic negative effect on browser performance, especially on battery life. To mitigate this, Chrome has been placing various restrictions on background tabs for the last several years. Recently there’s been a number of efforts to make further improvements, and this document gives an overview of the Chrome policy. This document focuses on describing current policies in Chrome 57. Long-term strategy and further plans can be found in this document.
https://www.chromestatus.com/feature/6172836527865856
As an intervention we want to limit how much CPU a background page is allowed to use and to throttle timer queues when this limit is violated. Current target is that background page CPU load level should be under 1%.

Detect if monitor is powered on from IE Kiosk mode

I developed a web app to display a slideshow, and want to display it on my secondary monitor (Connected via HDMI) with IE's Kiosk mode on Windows 10. Because of CPU and other resources on the shared server, I want to pause the slideshow when the monitor is powered off. (And therefore nobody is seeing it)
Is there a way to detect connected displays from Internet Explorer? Since this is a one-pc kiosk setup, add-ons, etc. are accepted. Triggering javascript/jquery events would be ideal. Thank you!
No, there is no reliable way to detect if a second monitor is physically switched off but still connected via the cable.
I have to ask though: why do you need to physically switch the second monitor off?
As an alternative could you not:
Have the slideshow stop after a timed duration unless it receives an input?
Have the slideshow only on display at certain times of the day?
Accept events from, say, a node server to control when to and not show the slideshow?
Having said that these threads could provided you, albeit unreliably apparently, what you need:
Is there any way to detect the monitor state in Windows (on or off)?
Monitoring a displays state in python?
You can't do in javascript. Why not try some asp component.
http://msdn.microsoft.com/en-us/library/windows/desktop/dd162617%28v=vs.85%29.aspx
You could potentially write a command line program that sits on a particular port, continuously checks for that locally and then use HTML5 WebSockets in IE to communicate with it?
i.e. C# PowerModeChangedEvent
SystemEvents.PowerModeChanged += new PowerModeChangedEventHandler(
SystemEvents_PowerModeChanged
);
I don't think so....
CPU cycles are paused when the client computer is put into Sleep mode. (win+L)
Start>Control Panel>Power
configures how the monitor(s) behave when the client is powered down or put to sleep mode.
the screen object in js returns the metic values (height/width) of the screen object but not its powered state.
the impact of wasted CPU cycles on a powered down secondary monitor should be un-noticable....
probably you have not selected the option to "Use software rendering instead of GPU rendering" on the Advance tab of internet options....
You will notice that your CPU on your desktop will throttle up and the cooling fan will race if you haven't set the above setting when running graphic intensive web pages or canvas scripts.

Will a chrome extension specified for a website running when I'm not visiting that site?

Suppose there is an extension for Google+, so when I'm visiting plus.google.com, it's running, but what happens if I close Google+ tab? Is it still running and consume my computer resource?
PS: I ask this because I'm wondering that if this is the truth, I can write an extension that enable or disable other extensions according to the website that I'm visiting, so maybe my Chrome would be faster
It depends.
The author of a Chrome extension can tell Chrome that the extension should only be active on particular websites. However, no matter the website you are visiting, the extension will always be running. To observe this phenomenon for yourself, hit Shift+Esc to display the task manager. Note the extension processes. You can see by trial and error that if Chrome is running, all of your enabled [background] extensions are also running.
The benefit of the Chrome extension developer specifying particular websites is that, even though the extension is always running, it will not receive event notifications for websites that don't apply to it - basically, it will be sleeping. So the effect is appreciable.
For more information about Chrome extension configuration options, see the Chrome extension manifest documentation here.
Edit: Please see Serg's answer re: modifying other extensions.
There are two types of extensions from resource consumption point of view - those that have a background page and those that don't. Permission warnings you see in the gallery don't give you any indication what kind of extension it is.
Extensions without a background page are consuming resources only (well, probably mostly) when used. Those with - consume memory always, plus might consume CPU depending on what they are doing there.
You can very easily write extension that disables all others with management api and the benefit from it will be noticeable on performance (I wrote one for myself actually).

Is it possible to externally trigger Javascript in Google Chrome from another process, maybe via an extension?

I'd like a local process on my machine to be able to trigger javascript in a specific tab in my local Google Chrome browser. The tab is not connecting to localhost, but to another known domain.
This may sound a bit weird, but what I'm actually trying to do is allow my in-browser music player to be controlled via global OS keyboard shortcuts, so I don't have to go to my tab in Chrome to pause or skip a track, for example.
I haven't been able to find any references to this type of behavior anywhere. Here are some solutions I've though of so far:
I tried looking at the Chrome Extensions APIs, and found the NPAPI Plugins which seem to allow javascript to trigger an external process, but I'm not sure if I could get it to work in the opposite way?
If directly triggering javascript is not possible, I may look into opening an HTML5 WebSocket to a tiny localhost webserver that can push control messages to the browser. I've read that WebSockets can function cross-domain in this way.
If both of the above don't work, I could always have a localhost process push to the remote server, which can forward the message back to my Chrome tab via WebSockets or another callback method. I really hope I can avoid this.
Are there features of Chrome extensions I'm overlooking that can be triggered externally? Or will a NPAPI plugin be able to do what I want? Or is there a better solution for this somehow? These all seem a little needlessly complex for such a simple task.
I would use the NPAPI Plugin becasue it is the best one too use for the thing your doing.
Good luck completing it.

Is there a setting in FireFox to allow the parent document access to the DOM of an IFRAME on another domain?

Notice how Firebug can access the DOM of cross domain iframes and even allow you to modify them? I'm wondering if there is an firefox addon extension or a config setting that will allow a page on our intranet to do this.
Longer explanation:
I have a two "kiosks" in our reception area that the public can use. As we're running in kiosk mode (fullscreen, no chrome), I have created a small web application consisting of a menu and an IFRAME. The menu allows users to browse to approved sites and also perform actions like printing. It also gloms onto requests for popup windows and instead overlays them in a modal iframe rather than allowing the browser and OS chrome to be exposed - breaking the "kiosk" experience.
Obviously, this works perfectly on anything internal because it's all on the same domain. It gets trickier when browsing external sites because the XSS protection kicks in and you can't see the DOM inside the IFRAME.
I have also tried using a web-based proxy server on the same domain (PHProxy for example), which works okay, but there are horrible edge cases where it doesn't work - a big one is the CAPTCHA on our website forms. So that's pretty much not an option for me.
Basically I think the only solution that will work for me is to modify the browser in some way using a security setting or an addon. Any ideas?
Thanks guys very much for you time and consideration. It is VERY much appreciated.
--Iain
There is a way for unpriviledged JavaScript code (loaded from a web page) to request more privileges in Firefox. This is an old, non standard API that prompts the user for permission and if accepted allows the JavaScript to do things normal JavaScript cannot. One of these things is to bypass Same Origin Policy.
Sample code:
try {
// ask user for permission
netscape.security.PrivilegeManager.enablePrivilege('UniversalBrowserRead');
} catch (e) {
// user refused permission
alert('Permission "UniversalBrowserRead" was denied.');
}
//Should now be capable of bypassing same origin policy if user accepted
Since the kiosk browser does not restart (I suppose) very often, the dialog just has to be accepted once. Not sure this is the most elegant solution but might work, at least for now (the API is old and might disappear).
Here is a link for more details: http://www.mozilla.org/projects/security/components/signed-scripts.html#privs-list
While looking for the exact privilege name I found this page about Security Policies in Firefox. This would be a much nicer solution. I have never used it, so I cannot give more info, but here is the link, might be a good place to start looking:
http://www.mozilla.org/projects/security/components/ConfigPolicy.html
Hope this helps!
I found an addon called CrossDomain. The addon hasn't yet been updated for newer versions of Firefox. In the end, I solved this whole problem by writing an HTA and using the internet explorer rendering engine - which made my IT manager happy :). Here is the link to CrossDomain in case this helps someone one day. Thank you everyone for your submissions.
https://addons.mozilla.org/en-US/firefox/addon/13004/
Why not use Greasemonkey, it will allow you to run your script on any page.

Categories

Resources