Несколько полезных веб-API — API состояния сети

JavaScript HTML
Несколько полезных веб-API — API состояния сети

Несколько полезных веб-API — API состояния сети

Оригинальная ссылка

предисловие

При просмотре веб-сайта с видео на мобильном телефоне при необходимости могут появляться подсказки в зависимости от типа сети, которую пользователь использует в данный момент, что является хорошим опытом.

Вот так (мобильный браузер UC):UC

Это (браузер QQ мобильного телефона):QQ

У этой функции есть еще одно применение: предварительная загрузка ресурсов. При использовании Wi-Fi мобильный телефон может загружать статические ресурсы страницы заранее, чтобы улучшить впечатления пользователя от просмотра, а при отсутствии Wi-Fi можно использовать отложенную загрузку для экономии трафика для пользователя.

Однако нетрудно обнаружить, что они реализованы API программной оболочки, а не простой реализацией JS. (Вообще, при воспроизведении видео на другом носителе подсказка не появляется. Можно догадаться, что JSBridge в этой среде не вызывается)

Например, в WeChat или апплете WeChat тип сети можно получить так:

//微信
WeixinJSBridge.invoke('getNetworkType', {}, e => {   
	//blabla
});

//小程序
wx.getNetworkType({
	success: res => {
		//blabla
	}
})

На самом деле в HTML5 уже есть такой Web API для стандартизации этой функциональности: onLine и API подключения.

Теперь первое лучше реализовано на стороне мобильных устройств и ПК, а второе поддерживается только некоторыми расширенными версиями на стороне ПК (я использую поддержку Chrome67). Итак, если вы хотите использовать чистый JS для реализации этой функции на своем мобильном телефоне, вы можете отключить ее здесь. . .

Если вы все еще возлагаете надежды на ПК, то можете продолжить поиск 😄 .

onLine: одно свойство два события

navigator.onLine:

Логический тип, чтобы определить, подключено ли устройство к сети.

онлайн, оффлайн мероприятия

Обычно привязанный к окну, он срабатывает, когда устройство переключается между сетевым и несетевым режимами.

var online = navigator.onLine;  //是否在线
//事件绑定
window.addEventListener('online',  updateOnlineStatus);
window.addEventListener('offline', updateOnlineStatus);

соединение: один объект и одно событие

Объект: navigator.connection

type

Тип сети

bluetooth: 蓝牙
cellular: 蜂窝网络(e.g., EDGE, HSPA, LTE, etc.)
ethernet: 以太网
none: 无连接
mixed: 多类型混合
other: 类型可知，但不可枚举
unknown: 有链接，但类型未知
wifi: Wi-Fi
wimax: WiMAX

effectiveType

допустимый тип соединения

'2g'
'3g'
'4g'
'slow-2'

downlink

Эффективная пропускная способность, М/с

downlinkMax

Максимальная скорость передачи в нисходящем направлении

rtt:

Время приема-передачи (время приема-передачи): указывает общее время, прошедшее с момента, когда отправитель отправляет данные, до момента, когда отправитель получает подтверждение от получателя (получатель отправляет подтверждение сразу после получения данных, исключая время передачи данных).

Событие: connection.onchange

Очень просто, запускайте событие при изменении типа сетевого подключения устройства.

Demo

Основной код:

{
	onGetStatus () {
		if(!this.canUseConnection) {
			this.$message.error('浏览器不支持navigator.connection（>_<）...');
			return;
		}
		this.updateConnectionStatus();
	},

	update () {
		this.connection = navigator.connection;
	},

	bindEvents () {
		let self = this;
		window.addEventListener('online', e => {
			console.log(e);
			self.updateOnlineStatus();
		});

		window.addEventListener('offline', e => {
			console.log(e);
			self.updateOnlineStatus();
		});

		if(navigator.connection) {
			let timer = null;
			navigator.connection.addEventListener('change', e => {
				timer && clearTimeout(timer);
				timer = setTimeout(() => {
					self.updateConnectionStatus(e);
				}, 500);
			});
		}
	},

	updateOnlineStatus () {
		this.online = navigator.onLine;
		console.log(this.online);
		if(this.online) {
			this.$message.success('有网啦❛‿˂̵✧');
		} else {
			this.$message.error('掉线啦（>_<）...');
		}
	},

	updateConnectionStatus (e) {
		console.log(e);
		this.connection = navigator.connection || initConnection;
		this.$notify.info({
			title: '提示',
      		message: '当前网络：' + (e ? e.currentTarget.type : this.connection.type || 'unknown')
		});
	}
}
Браузер не поддерживает navigator.connection и не может получить текущую используемую сеть

Не поддерживает navigator.connection, эффекта не видно? Выглядит это так (скриншот) -demo截图

Суммировать

Из-за ограничений совместимости функции, которые можно выполнять сейчас, действительноочень - иметь - ограниченный.

Но будем надеяться...будущее😄.

использованная литература

Категории