iOS

Automating iOS Simulator Screenshots With Pretty Good Status Bars Using Xcode 11 by Paulo Fierro

Yesterday I discovered a new command line tool (which ships with Xcode 11) that can clean up iOS Simulator status bars. It works great, but I have automated taking app screenshots using Fastlane and Snapshot — if you haven't you should check it out as its a massive time saver.

Unfortunately there is currently a bug where Snapshot apparently overrides or undoes the status bar change — there is however work underway to add support for this new feature.

Until then, I've come up with what I believe is a clumsy but acceptable workaround. 🤓

I don't want to take screenshots manually. After having used Snapshot for so many years now that seems like going back to the stone age and I already have my lovely UI tests in place to take the screenshots of exactly what I want.

Avoid Town isn't localized at the moment, so its only a case of taking screenshots at two locations on:

  • iPhone SE
  • iPhone 8
  • iPhone 8 Plus
  • iPhone Xs
  • iPhone Xs Max
  • iPad
  • iPad Pro (3rd gen)

That's 2 screenshots for each devices, so 2 * 7 = 14 screenshots. And then I want to take the same screenshot but in dark mode so 28 screenshots in total.

If there were more languages supported that would be 28 per language and you can see that this quickly becomes untenable. So I am going to continue to use Snapshot.

My workaround is as follows, in one Terminal I run fastlane snapshot as normal.

However in a second Terminal I run the following:

while sleep 1; 
do xcrun simctl status_bar 'iPhone SE' override --time '9:41' --dataNetwork 'wifi' --batteryState 'charged' --cellularMode 'notSupported' --wifiMode 'active' --wifiBars 3; 
done

Basically I override the status bar on a particular device every second 😱. This ensures that it also happens while Snapshot is running.

Yep, I know its gross 🤢. And it also means I have to take snapshots of one device at a time. Then I have to stop the script, change the name of the device, and run Snapshot again for that device. Like an animal.

You could of course modify all the Simulators you're targetting in your Snapfile by adding multiple do lines to the while block above, but I did them one by one to verify that the process worked.

The upside is that its mostly automated and because I only have to do it 7 times (for this release) I can live with it. My hope is that by the time I have to do this again the Snapshot issues linked to above will be fixed 🤞

Below is an example of the output created by Snapshot.

Screenshots exported via Snapshot

Screenshots exported via Snapshot

Making perfect Pretty Good iOS Simulator status bars with Xcode 11 by Paulo Fierro

This morning I've been updating the screenshots for the latest update of Avoid Town which adds among other things support for Dark Mode on iOS 13.

I've been using Simulator Status Magic for as long as I can remember to clean up the status bar — this involves removing the Carrier name, setting the battery to 100% and full bars. For some reason this wasn't working, so I started looking into it and found the following:

Xcode 11 beta 4 includes support for perfect status bars without SimulatorStatusMagic! 🎉 Run xcrun simctl status_bar with beta 4 or later installed and rejoice! This project will be going away soon, which is great news.

Looks like the time has finally come to wave goodbye to Simulator Status Magic. Its been a great run and you served us well, thank you for your service 👋😄

The xcrun simctl status_bar tool allows us to override the status bar with several options:

time <string> Set the date or time to a fixed value. If the string is a valid ISO date string it will also set the date on relevant devices.

dataNetwork <string> If specified must be one of 'wifi', '3g', '4g', 'lte', 'lte-a', or 'lte+'.

wifiMode <string> If specified must be one of 'searching', 'failed', or 'active'.

wifiBars <int> If specified must be 0-3.

cellularMode <string> If specified must be one of 'notSupported', 'searching', 'failed', or 'active'.

cellularBars <int> If specified must be 0-4.

batteryState <string> If specified must be one of 'charging', 'charged', or 'discharging'.

batteryLevel <int> If specified must be 0-100.

My first attempt was the following:

xcrun simctl status_bar 'iPhone 11' override --time '9:41' --dataNetwork 'lte' --batteryState 'charged' --cellularMode 'active'

This sets the time to 9:41, using LTE with a full battery. This looks great on iPhone X and later.

Cleaned up status bar on iPhone X

Cleaned up status bar on iPhone X

However, on older devices this still shows the Carrier name.

Carrier name visible on iPhone 8

Carrier name visible on iPhone 8

I really dislike showing the Carrier name and it doesn't look like there is a way of removing it using simctl override, so instead I opted for the following:

xcrun simctl status_bar 'iPhone 11' override --time '9:41' --dataNetwork 'wifi' --batteryState 'charged' --cellularMode 'notSupported' --wifiMode 'active' --wifiBars 3

This sets the time to 9:41, using Wifi with a full battery.

Carrier name now longer visible on iPhone 8

Carrier name now longer visible on iPhone 8

Cleaned up status bar on iPhone X, now using WiFi

Cleaned up status bar on iPhone X, now using WiFi

Personally I prefer showing LTE and bars, but this doesn't appear to be possible without also showing the Carrier name which seemingly we can't remove so this is a fine compromise.

Another option is to vary what we do depending on if the device has a notch or not. I'm currently trying to figure out how to automate this with Fastlane.

Update (Sep 18, 2019): I wrote about how I automated this with Fastlane / Snapshot here.

Moving to SF Symbols by Paulo Fierro

I'm slowly working on replacing existing assets with SF Symbols wherever possible in this app I'm working on. In order to maintain a consistent look on iOS 12 and below I'm replacing the existing 1/2x/3x PNGs with a single PDF, by exporting the SVG from the SF Symbols app into Sketch.

By naming the bundled assets the same as the system names, I can use this handy extension to avoid the "if available" dance every time:

At first I wasn't sure if I wanted to update the older assets, but I think I prefer a consistent look regardless of iOS version even if it does mean a bit of extra work. Moving to PDF assets also means less files to update and hopefully a smaller app size.

I ❤️ cocoapods-binary by Paulo Fierro

I've been using Cocoapods for dependencies for as long as I can remember. Personally I never really got along with Carthage, but some people prefer it.

Over the weekend I came across a post titled "Using CocoaPods with pre-built frameworks instead of source files" which has radically decreased the build time on some of my projects. It describes how you can set up the cocoapods-binary plugin to precompile your dependencies which dramatically reduces the amount of time Xcode needs to build your app.

In two small-to-medium sized apps with 5-10 dependencies I saw upto 10x improvements. A clean build (with nuked derived data) going from about 90 seconds down to 9. 🤯🤯🤯

If you're using Cocoapods you really should try it out.

Listening for video playback within a WKWebView by Paulo Fierro

I’m currently working on an app for a client where certain features are disabled when a video starts to play. Specifically, a video that’s embedded in a WKWebView.

One way of doing this would be to inject Javascript into the page like I’ve written about before and let that attach listeners to every <video> tag on the page. When a video changes its play state our listener could post a message to the app via webkit.messageHandlers[_HANDLER_].postMessage(_OBJECT_); and we would need a handler in the app to do whatever it is we want it to do.

That's a little messy.

When a video starts to play in a WKWebView the <video> is replaced by the native video player. However, within the app we can’t get a reference to this video component in order to query its playing state, so I wondered if maybe this might just fire an NSNotification we could listen for.

I couldn’t find any documentation for this so I decided to listen for all notifications and see if I could find one that would do the trick.

To do that I added a notification center observer with no specific name, which translates to give me ALL of the notifications:

Clearing the console before tapping play on the video led me to find that there actually is a notification that gets fired from the web view — its called SomeClientPlayingDidChange.

Inside the notification’s userInfo dictionary lies an IsPlaying key, with exactly what we want.

This meant that now we could add an observer for this notification and a handler to do whatever it is we need to do:

Caveats: this notification doesn’t appear to be documented and could change at any time. It probably will. At the time of writing this works on iOS 8.x/9.x - however since we’re simply listening to the notification, the app might lose this functionality but shouldn’t lead to any crashes.