Заявления как
«Мобильный рынок растет»
и
«Люди, получающие доступ к Интернету через мобильное устройство (смартфоны, планшеты и т. Д.), Обгонят тех, кто обращается к нему через настольный компьютер или ноутбук»
не впечатлять больше.
Сегодня мы все осознаем, по крайней мере, так и должно быть, что рынок мобильной связи имеет большое значение при разработке чего-либо для Интернета.
В течение многих лет обсуждались различные мнения о нативных и веб-приложениях, и о том, какие из них являются лучшими. Независимо от вашего мнения, раньше мобильные приложения позволяли получать доступ к аппаратным компонентам, которые веб-страницы не могли получить. Но этот разрыв все еще действует сегодня? Усовершенствованы ли веб-технологии до такой степени, что мы, как разработчики, можем кодировать только с помощью HTML, CSS и JavaScript?
В этой статье я познакомлю вас с некоторыми API-интерфейсами JavaScript, которые позволяют вашим веб-страницам получать доступ к аппаратным компонентам мобильных устройств или которые могут расширить возможности вашего веб-приложения на мобильных устройствах.
API состояния батареи
API состояния батареи предоставляет информацию об уровне заряда батареи или состоянии системы. Благодаря этому API вы можете узнать, заряжается ли батарея или нет, сколько времени до полной разрядки батареи или просто узнать ее текущий уровень. Эти детали доступны через четыре свойства, которые все принадлежат объекту window.navigator.battery Этот API-интерфейс также определяет события, которые могут запускаться при изменении указанных свойств.
Этот API полезен в тех случаях, когда вы (или ваши пользователи) работаете над документом с помощью веб-приложения и забыли сохранить внесенные изменения. Внезапно ваш смартфон выключается, и вы сходите с ума, потому что вы потеряли много времени и всю свою работу. Благодаря этому API мы можем разрабатывать страницы, способные определять текущий уровень заряда батареи и чаще сохранять изменения, чтобы предотвратить потерю данных в случае низкого или критического уровня.
На момент написания API Battery Status поддерживается только Firefox, но найти поддержку этого API легко и показано ниже:
if (window.navigator && window.navigator.battery) {
// API supported
} else {
// Not supported
}
Простой пример использования этого API:
// Print if battery is charging or not
console.log("The battery is " + (navigator.battery.charging ? "" : "not") + " charging");
Если вы хотите поэкспериментировать с этим API, у нас есть демо только для вас . Если вы хотите продолжить расследование, мы рассмотрели API состояния батареи здесь, в SitePoint.
API веб-уведомлений
На мобильных устройствах мы знакомы с концепцией уведомлений, они реализуются многими приложениями, которые мы установили на наших устройствах. В Интернете сайты реализуют их по-разному. Подумайте о Google+ и Twitter, у них обоих есть механизм уведомления, но реализации разные.
API веб-уведомлений — это API, созданный для этой цели, чтобы стандартизировать способ, которым разработчики уведомляют пользователей. Уведомление позволяет предупреждать пользователя вне контекста веб-страницы о событии, например о доставке электронной почты. Хотя разработчики могут создавать уведомления одинаково, спецификации не описывают, как и где пользовательский интерфейс должен их отображать. Это означает, что мы увидим разные стили в разных браузерах. Например, на мобильных устройствах мы можем видеть их в панели уведомлений.
API веб-уведомлений предоставляется через свойство Notificationwindow Это конструктор, который позволяет нам создавать экземпляр уведомления. Чтобы создать новое уведомление, мы можем написать код, подобный следующему:
var notification = new Notification('Email received', {
body: 'You received an email. Read it. Now!'
});
В настоящее время API поддерживается Chrome, Firefox и Safari. Мобильными браузерами, которые поддерживают API веб-уведомлений, являются Firefox, Android 4.4+ и Blackberry. Вы видите что-то странное? Chrome Mobile не поддерживает API! Грустно, но правда.
Из-за браузеров, которые поддерживают этот API, охватывается более половины рынка, но, поскольку мы хотим быть уверены, что наш код JavaScript не пытается вызывать неподдерживаемые методы, мы должны проверить поддержку. Мы можем сделать это, используя следующий фрагмент:
if ('Notification' in window) {
// API supported
} else {
// Not supported
}
Возбуждены этим API? Большой! Подробнее об этом вы можете прочитать в статье « Введение в API веб-уведомлений », а также поиграть с живой демонстрацией .
API близости
Proximity API — это API-интерфейс JavaScript, который мы можем использовать для определения близости объекта к устройству, на котором работает веб-страница. Расстояние измеряется датчиком приближения, если он есть на вашем устройстве. Proximity API не предоставляет свойства или методы, только два события, запущенные для объекта window Мы можем слушать их для выполнения операций. Первое событие, deviceproximityuserproximity
Начиная с версии 15, единственным браузером, поддерживающим этот API, является Firefox, как на настольном, так и на мобильном устройствах. К сожалению, поскольку многие ноутбуки и настольные компьютеры не имеют датчика приближения, мы должны ориентироваться в основном на мобильные устройства.
Чтобы определить поддержку этого API:
if ('ondeviceproximity' in window) {
// API supported
} else {
// Not supported
}
Простой пример использования показан ниже:
window.addEventListener('userproximity', function(event) {
console.log( (event.near ? '' : 'no ') + 'object detected nearby');
});
Если вы хотите узнать больше об Proximity API, я написал статью под названием « Введение в Proximity API ». Если вы хотите увидеть его в действии, вы можете поиграть с этой демонстрацией .
API вибрации
Vibration API — это очень простой API, состоящий из одного метода, который дает нам возможность вибрировать устройство. Одно из очевидных применений — игры, в которых мы можем воссоздать эффекты, появившиеся десять лет назад некоторыми консолями. Однако это не единственное возможное использование этого API.
Как я уже упоминал, Vibration API предоставляет только один метод, называемый vibrate() Последний принадлежит объекту window.navigator
Этот API поддерживается всеми основными браузерами, кроме Internet Explorer и Safari. Несмотря на это, это может быть подходящее время для использования в вашем следующем проекте. Фактически, если это поддерживается, вы предложите своим пользователям лучший опыт (если, конечно, вы не злоупотребляете этой функцией). Найти поддержку очень просто, и она показана ниже:
if (window.navigator && window.navigator.vibrate) {
// API supported
} else {
// Not supported
}
Очень простое использование API заключается в следующем:
// Vibrate for three seconds
navigator.vibrate(3000);
Чтобы узнать больше об этом API, прочитайте статью « Как использовать HTML5 Vibration API » и не забудьте поиграть с демо .
API ориентации устройства
Последний API, который я хочу обсудить, — это Device Orientation API . Определение ориентации устройства полезно в широком диапазоне случаев, от навигационных приложений до игр. Этот API-интерфейс определяет несколько событий, которые предоставляют информацию о физической ориентации и движении устройства. Этот API является рабочим проектом W3C, что означает, что спецификация нестабильна, и мы можем ожидать некоторые изменения в будущем.
API предоставляет следующие три события deviceorientationdevicemotioncompassneedscalibration Первый срабатывает, когда акселерометр обнаруживает изменение ориентации устройства. Второе срабатывает каждый раз, когда устройство ускоряется или замедляется. Последнее событие срабатывает, когда пользовательский агент определяет, что компас требует калибровки.
Этот API поддерживается почти всеми основными браузерами (кроме Safari), но поддержка является частичной или имеет несоответствия. Например, на момент написания очень немногие браузеры поддерживают событие compassneedscalibration Поэтому я советую проверить каждое из этих событий, чтобы узнать, поддерживается ли оно. Чтобы проверить наличие события deviceorientation
if (window.DeviceOrientationEvent) {
// Event supported
} else {
// Not supported
}
или альтернативно:
if ('ondeviceorientation' in window) {
// Event supported
} else {
// Not supported
}
Если, например, вы хотите проверить событие devicemotion
if (window.DeviceMotionEvent) {
// Event supported
} else {
// Not supported
}
Если вы хотите поиграть с этим API, у нас есть демо, которое вы можете использовать . Если вы хотите изучить его, у нас есть статья « Использование ориентации устройства в HTML5 ».
Выводы
В этой статье я показал вам некоторые API, которые могут расширить возможности ваших веб-страниц для мобильных посетителей.
Варианты использования этих API бесконечны, и все зависит от вашей фантазии и типа приложения или веб-сайта, который вы разрабатываете. Я надеюсь, что вам понравилась эта статья, дайте мне знать о любых других API, которые вы считаете полезными.