Check out a free preview of the full Progressive Web Applications and Offline course:
The "iOS Simulator" Lesson is part of the full, Progressive Web Applications and Offline course featured in this preview video. Here's what you'd learn in this lesson:

Since Mobile Safari is different from Desktop Safari, Mike reviews how to test web applications for iOS devices.

Get Unlimited Access Now

Transcript from the "iOS Simulator" Lesson

[00:00:00]
>> Mike North: Here's one step better. It's iOS-specific, but you can install things, I believe that you can install Xamarin. If you have Windows, they have tools that will allow you to spin something similar up, where you get an iOS simulator. And this is a brilliant emulated iPhone, right down to emulating the architecture of the CPU.

[00:00:23] This is closer to a virtual machine than anything else. This is great because it lets you test something that we don't really have a means for testing in desktop world, right? And if we think about Chrome that runs an Android, most Android browsers are Chrome-based, even Samsung's browser, it has a Chrome core.

[00:00:46] Those are pretty similar to desktop Chrome, more or less. In many ways, mobile Safari is very dissimilar from desktop Safari. So this is sort of something that's easy to install, it comes with Xcode. And one of the convenient things you get is local host, as you can see up here.

[00:01:06] That's gonna to point to your laptop, not to the simulator itself. So it's not looping back into the device, it's looping back to your machine. So you could fire this up and put it in localhost, and you can see our app running here. But, so it lets us test a blind spot, if you will, the ability to see what mobile Safari does.

[00:01:29] In some versions of iOS, there are actually two JavaScript runtimes. There is the one that works in Safari like this, and then in some versions of iOS when we add to home screen, that is a completely separate JavaScript runtime that behaves a little bit differently. So there are these two kind a blind spots that this gives us the ability to poke around in.

[00:01:52] Additionally, it is really easy to connect Safari to this thing. So if you enable the develop menu, which is in the Safari, desktop Safari preferences, you will see that if a simulator is fired up like this, you can connect to it under the simulator option here. And furthermore, if you have an iOS device connected to your laptop with a cable, with your charging cable, you'll see those devices pop up in this develop menu as well.

[00:02:21] And then you can proceed to kind of do the same things that you would do in dev tools. Here I'm hovering around in the elements tree, and you can see that that is highlighted on the left side, just as you'd expect in Chrome. This is really, really powerful.

[00:02:34] You could set a debugger in there for user breakpoint and figure out what's going wrong, what is this iOS Safari thing? That doesn't seem to be happening on Chrome.
>> Mike North: And so there's really no excuse for not using this, you should have this installed, you should be using it.

[00:02:57] It lets you do things like add to home screen, making sure that that flow works completely, making sure that subtle differences, like the height of your app, when there's an address bar here, versus no address bar, versus the battery bar being there. It's really, there's no substitute for doing it this way, short of an actual device.