Веб-API, о которых вы могли не знать

1.Видимость страницы (оценка видимости веб-страниц)

Значение этого нового API заключается в том, что, отслеживая видимость веб-страниц, он может прогнозировать удаление веб-страниц, а также может использоваться для экономии ресурсов и снижения энергопотребления.

Когда мы достигли делового спроса, мы судим, утеряна ли страница, с OnBlur, Onfocus, с этой API, это будет гораздо удобнее.

window.addEventListener('visibilitychange', () => {
  /*if(document.hidden) {
    console.log('Tab呈现之前');
  }
  else {
    console.log('Tab被聚焦');
  }*/
  switch(document.visibilityState) {
    case 'prerender':
      console.log('Tab呈现之前');
      break;
    case 'hidden':
      console.log('Tab隐藏');
      break;
    case 'visible':
      console.log('Tab被聚焦');
      break;
  }
});

используемые сцены:

• Комната чата, которая может отображать уведомления о сообщениях в заголовке вкладки браузера (document.title), когда она не видна;
• Пауза аудио или видео при переключении вкладок

2.жизненный цикл страницы

Ранее я представилPage Visibility API. С его помощью вы сможете следить за выгрузкой веб-страниц в различных ситуациях.

Однако это не решило проблему. Android, iOS и новейшие системы Windows могут автономно останавливать фоновые процессы в любое время и вовремя освобождать системные ресурсы. То есть веб-страницы могут быть отброшены системой в любое время. Page Visibility API срабатывает только тогда, когда веб-страница не видна пользователю.Что касается того, будет ли веб-страница отброшена системой, это не имеет никакого отношения.

Для решения этой проблемы W3C разработал новыйPage Lifecycle API, унифицирует режим поведения веб-страниц от рождения до выгрузки и определяет новые события, позволяя разработчикам реагировать на различные переходы состояний веб-страницы.

С помощью этого API разработчики могут прогнозировать следующее состояние веб-страницы, чтобы выполнять различные целевые обработки. Chrome 68 поддерживает этот API, для старых браузеров можно использовать библиотеку совместимости, разработанную Google.PageLifecycle.js.

стадия жизненного цикла

пример:

window.addEventListener('visibilitychange',() => {
    // visibilitychange事件在网页可见状态发生变化时触发，一般发生在以下几种场景
    switch(document.visibilityState){
        case'prerender': // 网页预渲染 但内容不可见
        case'hidden':    // 内容不可见 处于后台状态，最小化，或者锁屏状态
        case'visible':   // 内容可见
        case'unloaded':  // 文档被卸载
    }
})

используемые сцены:

• Комната чата, которая может отображать уведомления о сообщениях в заголовке вкладки браузера (document.title), когда она не видна;
• Пауза аудио или видео при переключении вкладок

3. Геймпад (геймпад)

Gamepad APIПредоставляет разработчикам простой и унифицированный способ идентификации игровых контроллеров (геймпадов) и реагирования на них. Он содержит три интерфейса, два события и специальную функцию для реагирования на подключение и отключение контроллера, получения другой информации о контроллере и определения того, какая кнопка или контроллер нажата в данный момент.

интерфейс

window.addEventListener("gamepadconnected", function(e) {     
 console.log(e.gamepad.index) // 一个自增的整形数字，对于当前连接到系统的每一个设备是唯一的
 console.log(e.gamepad.id) // 手柄ID 每个游戏手柄都有一个与之关联的唯一ID，可在活动的gamepad属性中找到 
 console.log(e.gamepad.buttons.length) // 一个 gamepadButton 对象的数组，表示设备上的按键的数组
 console.log(e.gamepad.axes.length) // 一个表示控制器设备上存在的坐标轴的数组 (比如控制器摇杆)
});

Отключить геймпад

window.addEventListener("gamepaddisconnected", function(e) {
  console.log("Gamepad disconnected from index %d: %s",
    e.gamepad.index, e.gamepad.id);
});

4. Вибрация

Vibration API позволяет разработчикам напрямую вызывать вибрацию устройства с помощью JavaScript, чтобы вибрировать шаблоны в заданное время.

одиночная вибрация

Вы можете колебать аппаратное обеспечение за раз, указав одно значение или массив только одного значения:

window.navigator.vibrate(200);
window.navigator.vibrate([200]);

режим вибрации

Набор значений описывает чередующиеся периоды времени, в течение которых устройство вибрирует и не вибрирует. Каждое значение в массиве преобразуется в целое число, а затем интерпретируется попеременно как количество миллисекунд, в течение которых устройство должно вибрировать, и количество миллисекунд, в течение которых оно не должно вибрировать. Например:

window.navigator.vibrate([200, 100, 200]);

перестань вибрировать

Сценарии использования: при разработке веб-игр или мультимедийных приложений в мобильных приложениях сенсорная обратная связь может обеспечиваться с помощью вибрации.

5.ориентация устройства (гироскоп)

Привязав событие для получения физической ориентации устройства, вы можете получить три значения:

• alpha: Угол поворота устройства по оси Z.
  
• beta: Угол поворота устройства по оси X
  
• gamma: Угол поворота устройства по оси Y
  

Код:

window.addEventListener('deviceorientation',ev => {
    console.log('Beta:',ev.beta); // Z轴的旋转角度
    console.log('Alpha:',ev.Alpha); // X轴的旋转角度
    console.log('Gamma:',ev.gamma); // Y轴的旋转角度
})

6. Буфер обмена

Clipboard APIизClipboardИнтерфейс предоставляет способ чтения и записи в буфер обмена операционной системы.

Копировать: записать текст в буфер обмена

writeText() может записывать текст в буфер обмена. writeText() является асинхронным, он возвращает обещание

navigator.clipboard.writeText('要复制的文本')
  .then(() => {
    console.log('文本已经成功复制到剪切板');
  })
  .catch(err => {
    // This can happen if the user denies clipboard permissions:
    // 如果用户没有授权，则抛出异常
    console.error('无法复制此文本：', err);
  });

Вставить: прочитать текст из буфера обмена

navigator.clipboard.readText()
  .then(text => {
    console.log('Pasted content: ', text);
  })
  .catch(err => {
    console.error('Failed to read clipboard contents: ', err);
  });

Событие для обработки пасты

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

document.addEventListener('paste', event => {
  event.preventDefault();
  navigator.clipboard.readText().then(text => {
    console.log('Pasted text: ', text);
  });
});

7.document.execCommand (выполнить команду)

Большинство команд влияютdocumentизselection(жирный, курсив и т. д.), когда другие команды вставляют новые элементы (добавляют ссылки) или воздействуют на целые строки (отступ). когда используешьcontentEditableВремя, звонитеexecCommand()Будет влиять на текущий активный редактируемый элемент. Используйте этот метод для выполнения некоторых команд, таких как копирование, вырезание, изменение, цвет фона, цвет, отступ, вставка изображения, выделение выделенного текста жирным шрифтом, курсивом и т. д.

let iframe = document.createElement('ifram');
let doc = iframe.contentDocument;
// 将HTML文档切换成设计模式execCommand

doc.designMode = 'on';

// 然后就可以使用execCommand 这个命令了；
// 执行复制命令

// 全选
doc.execCommand('selectAll')
// 将选中文字变成粗体，同时接下来输入的文字也会成为粗体，
doc.execCommand('bold')
// 将选中文字变成斜体，同时接下来输入的文字也会成为斜体，
doc.execCommand('italic')
// 设置背景颜色，，比如设置背景色为红色，就传入 'red'即可
doc.execCommand('backColor',true,'red')
doc.execCommand('copy')
// 剪切选中区域
doc.execCommand('cut')

Простой редактор форматированного текста

8. Окружающий свет (датчик окружающего света)

использовать

let sensor = new AmbientLightSensor();
sensor.start();
sensor.onchange = (e) => {
  console.log(e.reading.illuminance);
};
sensor.stop();

9. состояние батареи (состояние батареи)

Разрешить веб-страницам доступ к информации об аккумуляторе с настольных и мобильных устройств.

// 首先去判断当前浏览器是否支持此API
if ('getBattery' in navigator) {
    // 通过这个方法来获取battery对象
    navigator.getBattery().then(battery => {
    // battery 对象包括中含有四个属性
    // charging 是否在充电
    // level   剩余电量
    // chargingTime 充满电所需事件
    // dischargingTime  当前电量可使用时间
    const { charging, level, chargingTime, dischargingTime } = battery;
    // 同时可以给当前battery对象添加事件  对应的分别时充电状态变化 和 电量变化
    battery.onchargingchange = ev => {
        const { currentTarget } = ev;
        const { charging } = currentTarget;
    };
    battery.onlevelchange = ev => {
        const { currentTarget } = ev;
        const { level } = ev;
    }
    })
} else {
    alert('当前浏览器不支持~~~')
}

10. онлайн-состояние (состояние сети)

Определите, подключена ли веб-страница к Интернету.

console.log(navigator.onLine ? 'online' : 'offline');
window.addEventListener('offline', networkStatus);
window.addEventListener('online', networkStatus);

function networkStatus(e) {
  console.log(e.type);
}

11. Веб-VR

WebVR API обеспечивает поддержку рендеринга на устройствах виртуальной реальности, таких как Oculus Rift или Oculus Rift.HTC Vive Подключение такой гарнитуры к веб-приложениям. Это позволяет разработчикам преобразовывать информацию о положении и движении в движение в трехмерной сцене. На основе этой технологии можно создавать множество интересных приложений, таких как виртуальные демонстрации продуктов, интерактивные обучающие курсы и супер-иммерсивные игры от первого лица.

Для получения подробной информации, пожалуйста, посетите MDN

Ссылаться на

Руководство Ruan Yifeng по Page Visibility API

Документация MDN

API вибрации JS, чтобы заставить телефон вибрировать