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

The "Geolocation API" 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 introduces the Geolocation API, which uses several metrics to determine a user's location. The metrics may include data from GPS satellites, WIFI networks, and other location-enabled devices.

Preview
Close

Transcript from the "Geolocation API" Lesson

[00:00:00]
>> Okay the next one Geolocation API, that was, as I mentioned, one of the first capabilities available on the web. So the Geolocation API. How does it work? Actually it reads user's location, but how? Question for you, how do you know which providers or which methods do you know that phone or a computer can use to locate the user on Earth?

[00:00:29]
>> GPS.
>> GPS, that's the most common one.
>> Radio towers have.
>> Radio towers with cells, actually, that was used a lot at the beginning of the let's say smartphone era but to locate the user with cell towers that location happens server side our server side. It happens on the carrier server side.

[00:00:56]
So right now, all if you are here in Frontend Masters' office in Minneapolis and your phone is currently connected to a cell here of your carrier. It can be anyone, Verizon, T-Mobile, AT&T. And they know that you're here, but not your phone, because your phone, the only thing that knows is the cell ID.

[00:01:21]
It knows that you are in X carrier and what's the cell ID. What do you do with the cell ID? It's just an ID. It's where the tower is, in which building is the tower, I don't know. Because I'm not the carrier, I don't have their database of cells and addresses, okay?

[00:01:40]
So that's why originally Apple and Google they were making agreements with carriers so they can share the data with you via your phone can get it but that's not a case anymore, so let's say that today that's not on a phone. That's not typically how it's going to locate you.

[00:02:01]
GPS has to do with receiving signal from satellites. It needs four. There is a process there. We're not going to get too deep to that because as web developers, we don't care too much. But I do have a question for you. So if I open any browser, I will open Canary because I think I'm not logged in there.

[00:02:23]
So it's like an empty. If I'm going to googlemaps.com, google maps, will give me here a way to locate myself. And if I click there, it's asking me for permission. So that's the geolocation permission dialog. I will say hello, by the way, it's off. Why? Because my Mac is not given permission to Canary.

[00:02:57]
So I will do that. I will use my finger privacy of security blah blah blah blah. Now I can try again And it's getting the current location and at one point I will get a location. We are there, okay? And it's even showing me within the block where I am.

[00:03:21]
How is that working?
>> That's too precise for IP address.
>> The IP address, the precision of an IP address is here in the US, the city. In the rest of the world, the country and sometimes not even the country because sometimes providers they are in different countries in Europe for example, there the same provider is in different countries and they share the IP address ranges.

[00:03:47]
So then you are in France and it says that you're in Belgium GPS I'm on a Mac. Do I have GPS on a Mac?
>> Is it located by Wi-Fi or Bluetooth?
>> By Wi-Fi or Bluetooth. Let's see Bluetooth. I can turn off Bluetooth. And you will see that's not Bluetooth.

[00:04:06]
And so why? How Bluetooth will tell me where I am? Bluetooth is a way that we have to communicate two devices. Up to eight actually. But yeah, unless we have Bluetooth beacons here in the room that for some reason Chrome knows where we are, that's not the case.

[00:04:25]
But Wi-Fi sounds better. So in fact, it's Wi-Fi. How? In fact the procedure is actually pretty good, okay? It's actually pretty good. So how is that working? So, I'm going to simplify this a little bit. But the idea is that when you're in a while, you don't need to be connected to a Wi-Fi by the way, what's going on?

[00:04:50]
Is that there is a list of Wi-Fis surrounding me. Each Wi-Fi has a list of information, not just the Wi-Fi for example, if I press my option key, I could get more information about the-Wi Fi not just the IP address but be SSID channel the country code noise.

[00:05:12]
The idea is that the browser is taking the whole list of Wi-Fi around me, of access points around me, with all that metadata of each access point that you see here, not just the Wi-Fi that I'm logged in. That list you send in that list, and you can include the Starbucks that we have on the other block, the Wi-Fi from the Starbucks All that list is going to a Google server because I'm using Google Chrome.

[00:05:38]
And Google says, yeah, that's the Frontend Masters' office in Minneapolis. How does Google know that? Because of two sources. First, there are cars that are browsing cities. With the Street View cars. They also have a Wi-Fi antenna and GPS, and they're scanning all the cities and they're matching SSIDs from Wi-Fi.

[00:06:04]
That's the identifier from access points and GPS locations. And the second source of data is us we are collecting information for Google or Apple based if you have iOS or Android, that if there is a new access point here and one floor up there if many people is reporting that new access point, they will add that access point to the database.

[00:06:33]
And that's my computer but it's not just the computer this also works for the phone as well. Your phone is trying Wi-Fi first, why? Because it's faster and cheaper than GPS, cheaper in money we pay for use that GPS. Actually, we pay for using the GPS because it's managed by the US government, but we pay, I think it's around 20 cents when you buy a phone.

[00:06:59]
It's just like a donation to the service. But I'm not talking about that cost, I'm talking about battery cost, because we need to turn on a radio that needs to get data. It's a timestamp with metadata from the satellite and that's costing battery, so that's why your phone prefers Wi-Fi.

[00:07:19]
That doesn't mean if you're walking on the street and you open Google Maps, it's using Wi-Fi, even if you're not connected through Wi-Fi, so using your 4G or 5G connection, it's sending the list of Wi-Fis around you to locate you faster. That doesn't work if you are driving, you're driving in the highway and you're going too fast to actually read your Wi-Fis around you and know where you are because when you get that information, you're probably a mile away.

[00:07:48]
The API that we are going to use is provider agnostic, which means we won't know if we get the location, if it's GPS, if it's clone us if it's or if it's Wi-Fi. We don't know. We don't care. We can't ask for something different. We just ask the browser I want the location.

[00:08:11]
Do wherever you can to give me a location. You will get some information where you may infer what's going on. For example, the data that you receive will include accuracy. In that case, you can say, well, it looks like satellite-based or looks like we have a problem. It needs user permission.

[00:08:34]
We already seen that. It relies on the browser or in the operating system service. So what happens if you have a phone with no SIM card? In that case, the only way is to use GPS. A phone with no SIM card, no data plan, takes a while to get GPS location.

[00:08:55]
I remember I once was in India, so I'm a frequent traveler, I've been to 73 countries and I remember the worst experience with GPS was India. I didn't have a SIM card at the time when I was there. It was like ten years ago. It wasn't easy to get a SIM card and sometimes GPS was taking 3 or 4 minutes on an iPhone to get a location on a crowded place.

[00:09:22]
So it works only in the foreground. So as a web developer, you cannot read user's location in the background. Native apps can do that, not websites. So that means API is not suitable for geofencing or beacon base location. Beacon base location is the proposal that we have from the chat of using Bluetooth beacons to actually detect where we are.

[00:09:46]
We can use that for indoor location if you're on the mall, for example in an airport. Using those beacons, you can improve the indoor location or which floor are you? On which gate are you? And geofencing is a technique on apps that will let you know when the user gets in or out a geographical area.

[00:10:09]
So I'm in the city, out of the city. Well, with web apps, we cannot do geofencing. They say there were a couple of proposals, but none of those proposals actually got any mature, okay?
>> This is specifically for GPS all this-
>> This is specific for the Geolocation API and the Geolocation API is agnostic so that means that only in the real world today is GPS or Wi-Fi Those are the two options that typically you would have on a web app to get users' location.

[00:10:46]
But you cannot ask for one in particular. There is one option that is kind of that, but it's not really saying, I want Wi-Fi, no.

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