navigator.connection.effectiveType is useful for delivering different assets based on the quality of the user's network connection.
effectiveTyp...
For further actions, you may consider blocking this person and/or reporting abuse
This is a great addition to the app shell architecture. Pre-installed shell loads different versions of the network-served app depending on connection. Really nice.
Well .. that took them quite some time. I've implemented this feature in an .NET application in 2006. So, just 12 (!) years after I've done this, that feature is finally live .. :)
I wouldnt waste this on some app though - use it for proper Adaptive Images instead - or go as far as in your example, and implement Adaptive Media (Embeds) :)
cu, w0lf.
Nice, thank you!
Awesome article addy!!!
I’m not so sure that silently replacing the video with a poster image is a good idea. What if a user shares the page on social media after watching the video, and some users who open the shared page are served the image instead? Would these users not think that the website is broken somehow as they expected to see a video?
I think a better approach would be to just prevent the video from auto-playing instead. But then, that sounds like a job for the browser, not the website (a “Don’t auto-play videos on slow connections” browser setting).
Pretty easy to use that in the latest version of Chrome. How well is it supported in other browsers and backward compact? I suppose there would be a pollyfil? 🤔
In Chrome, we leverage our Network Quality Estimator to plumb through the information that gives you a more accurate effective connection type. Although it isn't possible to entirely replicate this client-side, you could write a polyfill for estimating something like bandwidth speed. JS could download files from a server (with correct caching headers, so not in cache) and approximate download speeds that way. This can be notoriously inaccurate so it's important to consider the tradeoffs.
That's what I have been thinking. Maybe that could be put in a worker but inaccuracy would be a big tradeoff — I think it's better to keep things civil and let it work for the latest versions. Otherwise, I am thinking we'll have to sideload things for mobiles — also I found out that you can't really estimate the network with smaller files coz many ISPs have dynamic fluctuations in a dynamic IP settings — the initial network push is quite strong to download up to a 1Mb file but real speeds start to reflect as we move closer to 10Mb and that's a terrible idea to be implemented. Maybe, that's me but that's where I am :)
Thanks, Addy. What's the compat of the spec, currently? Any talk at the other shops when this will land?
It took a long time to find a instruction on javascript with network information API. Thanks!