1. vue-adaptive-hooks

vue-adaptive-hooks

vue-adaptive-hooks

GitHub Gitter npm

🚈 基于实验性的浏览器 API,提供最适合用户设备和网络限制的体验

本项目基于 vue-hooks,提供了一系列访问设备和网络信息的钩子用于自适应加载,以改善不同环境下用户的使用体验。

支持以下浏览器 API:

用途

更容易针对低端设备进行优化,同时逐步添加仅限高端设备的功能。使用这些 hooks 可以为用户提供最适合其设备和网络约束的良好体验。
例如,当大型的在线应用运行卡顿或不能运行时,应当提供具有简单样式和功能的见面呈现给用户使用。再例如,最典型的使用场景是视频网站的自动画质。

安装

 npm i react-adaptive-hooks --save

使用方法

首先需要您在项目中加载本库中的钩子

 import { useNetworkStatus } from "vue-adaptive-hooks/network";
import { useSaveData } from "vue-adaptive-hooks/save-data";
import { useHardwareConcurrency } from "vue-adaptive-hooks/hardware-concurrency";
import { useMemoryStatus } from "vue-adaptive-hooks/memory";
import { useBatteryStatus } from "vue-adaptive-hooks/battery";

浏览器支持情况

浏览器 API Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS
navigator.hardwareConcurrency 37+ 15+ 48+ 24+ 37+ 37+ 48+ 24+
navigator.connection.effectiveType 61+ 48+ 50+ 38+ Yes 45+
navigator.connection.saveData 65+ Yes 65+ 65+ Yes
performance.memory 37+ Yes Yes 18+ Yes
navigator.deviceMemory 63+ 50+ 63+ 76+ 46+

License

Licensed under the Apache-2.0 license.

Copyright (c) 2019-present, gylidian