Deliver experiences best suited to a user's device and network constraints (experimental)
This is a suite of Vue Components and utilities for adaptive loading based on a user's:
It can be used to add patterns for adaptive resource loading, data-fetching, code-splitting and capability toggling.
Make it easier to target low-end devices while progressively adding high-end-only features on top. Using these hooks and utilities can help you give users a great experience best suited to their device and network constraints.
npm i vue-adaptive-components --save or yarn add vue-adaptive-components
You can import the components you wish to use as follows:
import VueAdaptiveNetwork from 'vue-adaptive-components/network'; import VueAdaptiveSaveData from 'vue-adaptive-components/save-data'; import VueAdaptiveMemory from 'vue-adaptive-components/hardware-concurrency'; import VueAdaptiveHardwareConcurrency from 'vue-adaptive-components/memory';
and then use them in your components. Examples for each component and utility can be found below:
VueAdaptiveNetwork Vue component for getting network status (effective connection type)
<template> <vue-adaptive-network> <template v-slot="{ effectiveConnectionType }"> <img v-if="effectiveConnectionType === 'slow-2g'" src='...' alt='low resolution' /> <img v-else-if="effectiveConnectionType === '2g'" src='...' alt='medium resolution' /> <img v-else-if="effectiveConnectionType === '3g'" src='...' alt='high resolution' /> <video v-else-if="effectiveConnectionType === '4g'" muted="" controls="">...</video> <video v-else="" muted="" controls="">...</video> </template> </vue-adaptive-network> </template> <script> import VueAdaptiveNetwork from 'vue-adaptive-components/network' export default { components: { VueAdaptiveNetwork } } </script>
effectiveConnectionType values can be slow-2g, 2g, 3g, or 4g.
This component accepts an optional initial-effective-connection-type string attribute, which can be used to provide a effectiveConnectionType state value when the user's browser does not support the relevant NetworkInformation API. Passing an initial value can also prove useful for server-side rendering, where the developer can pass an ECT Client Hint to detect the effective network connection type.
<!-- Inside of a Vue component --> <template> <vue-adaptive-network :initial-effective-connection-type="4g"> ... </vue-adaptive-network> </template>
VueAdaptiveSaveData Utility for getting Save Data whether it's Lite mode enabled or not
<template> <vue-adaptive-save-data> <template v-slot="{ saveData }"> <img v-if="saveData" src='...' /> <video v-else="" muted="" controls="">...</video> </template> </vue-adaptive-save-data> </template> <script> import VueAdaptiveSaveData from 'vue-adaptive-components/save-data' export default { components: { VueAdaptiveSaveData } } </script>
saveData values can be true or false.
This component accepts an optional initial-save-data-status boolean attribute, which can be used to provide a saveData state value when the user's browser does not support the relevant NetworkInformation API. Passing an initial value can also prove useful for server-side rendering, where the developer can pass a server Save-Data Client Hint that has been converted to a boolean to detect the user's data saving preference.
// Inside of a Vue component <template> <vue-adaptive-save-data :initial-save-data-status="false"> ... </vue-adaptive-save-data> </template>
VueAdaptiveHardwareConcurrency Utility for getting the number of logical CPU processor cores of the user's device
<template> <vue-adaptive-hardware-concurrency> <template v-slot="{ numberOfLogicalProcessors }"> <img v-if="numberOfLogicalProcessors <= 4" src='...' /> <video v-else="" muted="" controls="">...</video> </template> </vue-adaptive-hardware-concurrency> </template> <script> import VueAdaptiveHardwareConcurrency from 'vue-adaptive-components/hardware-concurrency' export default { components: { VueAdaptiveHardwareConcurrency } } </script>
VueAdaptiveMemoryStatus Utility for getting memory status of the device
<template> <vue-adaptive-memory-status> <template v-slot="{ deviceMemory }"> <img v-if="deviceMemory < 4" src='...' /> <video v-else="" muted="" controls="">...</video> </template> </vue-adaptive-memory-status> </template> <script> import VueAdaptiveMemoryStatus from 'vue-adaptive-components/memory' export default { components: { VueAdaptiveMemoryStatus } } </script>
deviceMemory values can be the approximate amount of device memory in gigabytes.
This component accepts an optional initial-memory-status object attribute, which can be used to provide a deviceMemory state value when the user's browser does not support the relevant DeviceMemory API. Passing an initial value can also prove useful for server-side rendering, where the developer can pass a server Device-Memory Client Hint to detect the memory capacity of the user's device.
// Inside of a Vue component <template> <vue-adaptive-memory :initial-memory-status="{ deviceMemory: 4 }"> ... </vue-adaptive-memory> </template>
Deliver a light, interactive core experience to users and progressively add high-end-only features on top, if a users hardware can handle it. Below is an example using the Network Status component:
<template> <vue-adaptive-network> <template v-slot="{ effectiveConnectionType }"> <vue-full v-if="effectiveConnectionType === '4g'"/> <vue-light v-else="" /> </template> </vue-adaptive-network> </template> <script> import VueAdaptiveNetwork from 'vue-adaptive-components/network' export default { components: { VueAdaptiveNetwork, VueFull: () => import(/* webpackChunkName: "full" */'./vue-full'), VueLight: () => import(/* webpackChunkName: "light" */'./vue-light) } } </script>
vue-light.vue:
<template functional> <img :src="props.imageUrl" alt='product' /> </template>
vue-full.vue:
<template> <vue-magnifier :src="imageUrl" :src-large="imageLargeUrl" alt='product' /> </template> <script> import VueMagnifier from 'vue-magnifier' export default { components: { VueMagnifier } } </script>
-
Network Information API - effectiveType is available in Chrome 61+, Opera 48+, Edge 76+, Chrome for Android 76+, Firefox for Android 68+
-
Save Data API is available in Chrome 65+, Opera 62+, Chrome for Android 76+, Opera for Android 46+
-
Hardware Concurrency API is available in Chrome 37+, Safari 10.1+, Firefox 48+, Opera 24+, Edge 15+, Chrome for Android 76+, Safari on iOS 10.3+, Firefox for Android 68+, Opera for Android 46+
-
Performance memory API is a non-standard and only available in Chrome 7+, Opera, Chrome for Android 18+, Opera for Android
-
Device Memory API is available in Chrome 63+, Opera 50+, Chrome for Android 76+, Opera for Android 46+
-
Network-aware loading with create-react-app (Live)
-
Network-aware code-splitting with create-react-app (Live)
-
Network-aware data-fetching with create-react-app (Live)
- React Twitter - save-data loading based on Client Hint (Live)
- React Twitter - save-data loading based on Hook (Live)
- Hardware concurrency considerate code-splitting with create-react-app (Live)
- Hardware concurrency considerate loading with create-react-app (Live)
-
Memory considerate loading with create-react-app (Live)
-
Memory considerate loading (SketchFab version) with create-react-app (Live)
-
Memory-considerate animation-toggling with create-next-app (Live)
- Adaptive serving based on network quality
- Adaptive Serving using JavaScript and the Network Information API
- Serving Adaptive Components Using the Network Information API
Licensed under the Apache-2.0 license.
This project is brought to you by Addy Osmani and Anton Karlovskiy.
Ported to Vue by jefrydco.