This course has been updated! We now recommend you take the Build Progressive Web Apps (PWAs) from Scratch course.
Transcript from the "Android Simulator" Lesson
[00:00:00]
>> Mike North: The Android equivalent is a little bit more challenging but also valuable. The first thing you will realize is that local host doesn't work the same way as it does in the Safari simulator. So there is a special IP address, 10.0.2.2 that represents the machine running the simulator.
[00:00:17] And you can connect to it with Chrome dev tools in a way that's very similar to the way I described connecting to Safari. So this is part of Android Studio, which is an Android specific, customized version of Eclipse. It's a popular Java development environment with a bunch of Android tools baked into it.
[00:00:38] And we'll kind of walk through the process here. Now, this is significantly more involved than getting set up for iOS. But at least someone on your team should have this set up ready to go. Because there's certain things we're going to deal with, today and tomorrow, that are core fundamentals of progressive web app technology that really only start to appear on Android devices.
[00:01:05] Because Google sort of leaving the chart with the specification and with implementing it. Android is the first place we see some of these things. So once you have this development environment installed, the place to look here is the Android Device Manager, the AVD, or Android Virtual Device Manager.
[00:01:26] And when you fire it up, you'll basically have the opportunity to create a virtual device. You'll quickly see that there are many, many different options. I would encourage you to use a preset of a popular device, rather than trying to customize your own, because Android is such a flexible platform.
[00:01:41] You can design a device with 337 pixels wide and get really weird with it. That's not going to be useful for your testing purposes. But just pay attention to the screen size, the screen resolution, meaning like, the device/pixel ratio. How many dots per inch there are, and the Android version itself, because that will generally let you know what is the newest version of Chrome that you can use on that Android version.
[00:02:15] So you'll end up creating a system image. This is sort of the disk for the device. Think of it that way, like if you install apps, they stay on this virtual device, and it's sort of like, this file represents the hard drive, think of it that way. And then you'll see that it shows up in this list of virtual devices here.
[00:02:34] So you could have a couple different ones. I would say, a good starting point is one tablet, one popular phone. That is good enough. And then, you get a very similar experience to that iOS simulator here. So on the left, you can see that is our web application so this is running in Chrome.
[00:02:57] And then on the right, we see we've got our Android device. And it looks pretty similar and by connecting dev tools, you can pause JavaScript, and run lines of code, and check to see if certain things work and certain things don't. So a really valuable set of tools, and very important for progressive web app technologies.
[00:03:17] You will see there as a die-hard focus on mobile usability. So this is now something that needs to be on your radar.