Testing in Apple Simulator

[00:00:00]
>> Maximiliano Firtman: Well, for iOS, I already mentioned that you need to install Xcode, so the iOS simulator that I've been using, is actually part of Xcode. You download Xcode from the Mac App Store, it's free, you need a Mac, okay? It's not available for Windows or Linux and now you understand why, because it's not a real built on machine.

[00:00:22]
It's actually using the Mac OS, as its base and of course windows and Linux are not compatible with that layer, so that's why it's not working. So you just download the Xcode and that includes the simulator and when you have the simulator from here you can open new ones, okay?

[00:00:39]
And you can open another one on an iPad, for example. So we can try this on an iPad, you can try this on the vision OS on iPod, Vision Pro. We have a Vision Pro simulator, where you can try your web apps as well, and it will work also with local host.

[00:00:57]
Here on iPad, I wanna show you something else, so that's why I'm opening an iPad. So I will also go to localhost 3000, I will install it from the share menu, add to home Screen, same experience, I don't have the icon yet, that's okay. So I have here my, PWA as a really large iPad but I wanna show you that I can go with for example, a split view.

[00:01:21]
And it can work side by side with other apps like any other native app. And when I look here, my Code pad app appears like another app, so now it's a native app. So, even if I go in landscape, I wouldn't landscape, how? Well, you have an icon here, you go landscape and also its command, right and left, something similar happens on Android.

[00:01:49]
So, it can be half and half, one third and two thirds, okay? And of course in that case, responsive design, it's the one that you wanna apply to change the design of the layout of your app, as if it's a desktop window, okay? But it's pretty cool that you can have that and look at this, if you open, if you install your PWA twice, you need to do that twice unfortunately for this trick.

[00:02:17]
Remember that you can install the same PWA more than once on iOS and ipados. Now, I can change my app so I can close this one, and say that I wanna split the view with the other PWA. So now I have, two completely different instances, they are not sharing the storage.

[00:02:39]
So if you're looking local storage, they're not sharing the storage. You can use the drag and drop APIs to drag and drop elements between both instances. They have their own index DV, database their own file system, their own push notifications, completely independent, okay? Things like that and as I mentioned before, when you have the simulator or even your real device connected to your Mac, you can use Safari for desktop.

[00:03:07]
And in the Develop menu, you can see now your iPad Air and your iPhone, in this case simulators and we can inspect them from here, so I can remotely inspect. I have the console, okay? But for example, I don't have an application tab like in Chrome, so I don't know if my manifest is working or not.

[00:03:28]
I don't have any debugging tool for that, but for CSS, for HTML and all of that, it will work.
>> Learner: I'm sorry I missed the how to access the,
>> Maximiliano Firtman: The list?
>> Learner: For, yeah simulator or the iPhone Simulator.
>> Maximiliano Firtman: To use the simulators or to connect your Safari to your Debugger to the Simulator?

[00:03:52]
>> Learner: The Debugger.
>> Maximiliano Firtman: The Debugger, so you need to be in Safari, for Mac. So, you should see Safari there and there you go to develop Menu and then this list. And maybe, you have a face of, I don't have a develop menu, which maybe it's an option.

[00:04:07]
By default, if you have never debugged with Safari, you don't have a develop menu. So you first need to go to Safari settings and developer and then you need to allow the developer, now actually, no I'm sorry it's not developer, it's in advance. In advance, is show feature for developers, that will enable the developer menu there and also develop menu on top.

[00:04:33]
And here you should be able to see your connector Apple devices in this case, I have an iPad simulator and iPhone simulator. But if you connect your iPhone or iPad through USB or even wireless, you can even do the same with your real iPhone and debug your real iPhones remotely.

[00:04:53]
This is known as the remote debugging.