Check out a free preview of the full A Tour of Web Capabilities course

The "Vibration, Battery Status, & Idle Detection" Lesson is part of the full, A Tour of Web Capabilities course featured in this preview video. Here's what you'd learn in this lesson:

Max reviews the APIs for vibrating a device, reacting to changes in status with the battery, and determining the idle or lock state of the user and screen.

Preview
Close

Transcript from the "Vibration, Battery Status, & Idle Detection" Lesson

[00:00:00]
>> Vibration. You've heard how we were vibrating the gamepad, but also there is a very simple API targeting phones that is currently available in Chrome and Android mainly, only Chrome and only Android, where you can vibrate the phone. We'll just once and you pass a number of milliseconds or you can pass a pattern that's an array and the first one is vibration, the second one is pulse, vibration, pulse, vibration, pulse, vibration, pulse.

[00:00:36]
So you can express in milliseconds the pattern that you wanna play, the vibration pattern that you wanna play on that particular device. Okay, it was just that.
>> It was vibration pulse and what was the last one?
>> Another vibration. So it's vibration pulse, it's always two kinds of numbers, always in milliseconds.

[00:01:01]
Is vibration pause, vibration pause, vibration pause, that's about it. Battery status. So for example, in our web app, Cookie Master, we're going to connect to Bluetooth that is using of course, battery, and a game pad, everything consumes battery. And maybe we can check, hey, the battery's low, is 5%, maybe we can alert the user about that.

[00:01:33]
So for that we have battery status. It's an API that will give you information about the current battery status and a lot of events that you can use to know, for example, if the charging is changing. Charging changing means you are charging or you are not charging, okay?

[00:01:55]
So you have the power connected or not and when you change that it will execute your callback. Levelchange is when the battery level is going down or up. Chargingtimechange is when it's, the estimation it's giving you that, okay, we will get these charged in an hour or something like that, yeah.

[00:02:16]
>> So a lot of these that you're showing doesn't work, how many browsers are there like not those green ones and you would probably, I'm asking, would you still be able to use these APIs on anything? Like if it's an API that you would make a request to, in the cloud or some other server like that?

[00:02:32]
Are all these available, just like you have to pay for them in different instances?
>> Well, let's see. So let's go and check first the current compatibility. So the current compatibility for battery status is Chrome and Edge on desktop, Chrome for Android, Samsung internet and then we have Opera, Android browser, blah, blah, blah.

[00:02:51]
So it's currently three quarters of the users, which is not bad. Yeah, it's not an iPhone, but it's still if you have it you will still offer a service to three or four users. Do we have any alternative in case you are in iOS? It will depend on the case, on the API.

[00:03:15]
In the case of the battery status, there is no other way to get that. There is no service, no one can let you know the current battery status of that device. So the only alternative you have is, for example, if you really need to create an app, so your app is based on that, then there are not so many use cases, I know one.

[00:03:36]
Do you know the app Die With Me? I know the name sounds scary, Die With Me is an app that you can use only when you have less than 5% of your battery, okay? So the idea is that, first, it's an app that is black and white, so it's not using a lot of screen.

[00:03:55]
And the idea is to chat with people that are on the same train, as you are. You don't know who they are, it's just chatting before we die, okay? That's the app, that's the only thing the app is doing. Well, if you need to do this with the web and you need to cover iPhone, the only way to do that is to publish the PWA in the App Store.

[00:04:19]
So if you can still use HTML, CSS and JavaScript, but then you will need to create like a little plugin, a little part of your app that will be native, in this case, it can be Swift. And that Swift will provide to JavaScript the API that you don't have, but you must go through the App Store, that's the difference, but you don't have other way to do that from Safari.

[00:04:41]
Idle detection. So, the API is also pretty simple, we just check if we do have permission. We ask for permission actually, we request permission, and then we create an idle detector. What's they the idea? The idea is to know if the user is still there or not, okay, that's kind of the idea.

[00:05:01]
And some apps are using this, I mean, the main use case for this is a chat application, when you see that the user is still online or away. Do you realize that some chat applications are showing you when you are online, you are away? Well, they're using algorithms from the operating system to know if you're still there or not.

[00:05:22]
If you're moving your mouse after a few seconds or a few minutes, nothing happens, it will go into idle, okay,? And then you can do something, you can decrease the frequency of your timers just to reduce battery because it seems like the user is not there. Or for example, there are some video systems similar to Netflix that after a while it will tell you, hey, are you still there?

[00:05:48]
Like hey, move something so we know you're still there, if not we are not going to waste bandwidth showing you a video that you're not seeing, okay? So it's just that but from JavaScript. So you can know the user state and the screen state. The different screen state means the screen might be locked, for example.

[00:06:08]
And user state means that we know the user is there, the user has just touched something, even if it's not in the web app, maybe in the OS. Maybe the user has just seen a notification or the user is on WhatsApp, so we know the user is still there so it will give you the user is active, but not in your app.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now