vue-adaptive-hooks

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

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

支持以下浏览器 API:

• 数据保存首选项
• 电量信息与电池状态
• 设备 RAM 存储容量
• 设备网络连接信息
• 可用 CPU 核心数

用途

更容易针对低端设备进行优化，同时逐步添加仅限高端设备的功能。使用这些 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