{"componentChunkName":"component---src-templates-post-js","path":"/blog/2019/11/18/network-info-api/","result":{"data":{"post":{"html":"

This year has been full of articles around how the web is bloated with static assets and how this has impacted users to face a poor user experience when using not so good networks around the world. There are resources like web.dev who are actively publishing content on how to make a better future for the web.

\n\n

Background

\n

I’ve also published a few 😁 on how to improve web performance which you should totally check them out 👇🏼:

\n\n

And other tips and tricks like how to use the OffscreenCanvas to render your graphics off the main thread.

\n

This article is around the same topic, but we’re gonna see how to inspect and react to connection aspects of a visiting user to deliver a better experience to them.

\n

There are some implementations of this in the wild such as BBC News showing a warning to users about being charged by operators if they’re on a cellular network:

\n

\n \n \n \n Copy\n \n \n

let preloadVideo = true;\r\nconst slowConnections = ['2g', '2g-slow'];\r\nvar connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;\r\nlet type = connection.effectiveType;\r\n\r\nfunction updateVideoPreloadingStrategy() {\r\n  console.log(\"Connection type changed from \" + type + \" to \" + connection.effectiveType);\r\n  type = connection.effectiveType;\r\n\r\n  if (slowConnections.containes(type)) {\r\n    preloadVideo = false;\r\n  }\r\n}\r\n\r\nconnection.addEventListener('change', updateVideoPreloadingStrategy);
\n

Load low res images

\n

You could potentially set a class to your elements and based on that load a different image:

\n\n \n Copy\n \n \n
function updateImageLoadingStrategy() {\r\n  console.log(\"Connection type changed from \" + type + \" to \" + connection.effectiveType);\r\n  type = connection.effectiveType;\r\n\r\n  const myEl = document.querySelector('#id');\r\n\r\n  if (slowConnections.containes(type)) {\r\n    myEl.classList.add(\"low-res\");\r\n  } else {\r\n    myEl.classList.remove(\"low-res\");\r\n  }\r\n}
\n

And:

\n\n \n Copy\n \n \n
#id {\r\n  background: url(high-res.jpg) 0 0 no-repeat;\r\n}\r\n\r\n#id.low-res {\r\n  background: url(low-res.jpg) 0 0 no-repeat;\r\n}
\n

Summary

\n

We saw how useful can Network Information API be in most of our use cases where we want to address performance issue or even deliver a better user experience. Some other applicable use cases are:

\n
    \n
  • Not load high res images
    • \n
  • Prevent loading web fonts
    • \n
  • HTTP calls are changed to fetch less data using summary instead of full page load
    • \n
  • Timeout values for HTTP calls are increased
    • \n
  • Showing warning and other informative messages to users to let them know they might get charged
    • \n
\n
\n

💡 This API is in a draft state and might change in the future. But it doesn’t hurt to be proactive and update the implementation later rather than waiting for the full spec.

\n
\n

You can find more about this on the specification.

\n

Browser support

\n

So Network Information API is good and everything, but how about the browser support. Currently it is supported in Chrome and MS Edge only.

\n

You can see the full list here.

\n

\n \n \n \n \n

\n

Now go have fun with this API and save your users some money 😁.

","timeToRead":4,"frontmatter":{"unformattedDate":"2019-11-18T00:00:00.000Z","date":"November 18, 2019","title":"Network Information API, another step towards a better web 😍","subtitle":null,"id":null,"author":"Yaser Adel Mehraban","gravatar":null,"canonical_url":null,"tags":["showdev","webdev","networkinformation","progressiveenhancements"],"thumbnail":null,"cover":{"childImageSharp":{"gatsbyImageData":{"layout":"constrained","placeholder":{"fallback":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAIAAAA7N+mxAAAACXBIWXMAAAsTAAALEwEAmpwYAAACAElEQVR42hWO2XLaMBSG/dadvkKvO9NO36BXbWagS5qNLNhgCQgh2HjB8gpeJHmRFzkQKma++W/O959zpKVLtD3TY2amjYNbn7Y+OeOSFpEO4TYqeFR0US7g+4KHOXdxE4ppUkowLCx6eN1VM5S+BLmxK+1YUG2TytgVdtZqIRW2gxs7LQNcW3HhkS5rTz5ppCefLsmbYkYXI/VyuhqOwOBOubiWB7eTH5cPfx/h79H013h2NRzdXFxNTP9GWSydOGlPKK0lOchB0s5TbtCDW74DM7yF2v1cV9bu5NW5BWvV8G4Whr42ItdHzSlkR1S8GaTXYlEOcxg3KsqnNpl75SbpUHEM2FFIcfsetye3Ovrs6FRHqzhYmG8pNzHXcb/aVZJsp3BLVZMAJwduCVA5Q+XSrzZJa2VcYKRcz/iGnNFwr2Fu5OLN/mXHJFmP5w6d2xg6hTg+3iRPejzZ5qrHVLcCLgMeA2ENkg7iHma9GnVjq1ulolxJik2nT/Li8udsS++W3mD8OpDX9/oe+jXwGQjYOc9UIGyeaTd85B8/HL7f989ZKQFUDK/lL5+/KlYqm8nEwVMvH9sZ8CoY1DBg0GcwrGEkdtWLtPn3wj996/88d6pPpcdVMN6kIy1RrEwW2FhGVDETRd8pm72iiYzlLZYdojhECBMnAyGeIvKw3v8HIPsK1uaMRfEAAAAASUVORK5CYII="},"backgroundColor":"transparent","images":{"fallback":{"src":"/static/027bb1fcdcafa32c3e1f0d8eb251ff1c/a2195/socialpreview.png","srcSet":"/static/027bb1fcdcafa32c3e1f0d8eb251ff1c/cadb4/socialpreview.png 750w,\n/static/027bb1fcdcafa32c3e1f0d8eb251ff1c/a2195/socialpreview.png 800w","sizes":"(min-width: 800px) 800px, 100vw"},"sources":[{"srcSet":"/static/027bb1fcdcafa32c3e1f0d8eb251ff1c/11ba1/socialpreview.webp 750w,\n/static/027bb1fcdcafa32c3e1f0d8eb251ff1c/5f042/socialpreview.webp 800w","type":"image/webp","sizes":"(min-width: 800px) 800px, 100vw"}]},"width":800,"height":400}}},"img":null,"socialPreview":{"publicURL":"/static/027bb1fcdcafa32c3e1f0d8eb251ff1c/socialpreview.png"}}}},"pageContext":{"title":"Network Information API, another step towards a better web 😍","postPath":"/blog/2019/11/18/network-info-api","nextPost":"/blog/2019/11/18/vue-state-management","previousPost":"/blog/2019/11/10/vue-form-handling"}},"staticQueryHashes":[],"slicesMap":{}}