Nothing Insightful

What iOS 6 Mobile Safari Offers Front End Devs

Update: Now that iOS 6 is out and the NDA is no more, Max Firtman has posted an excellent summary of new iPhone 5 and iOS 6 mobile Safari enhancements and regressions. It goes into further detail and mentions features that couldn’t be publicly announced while still under NDA (not that I was, I’m not a registered dev).

Corrections: Although I recommend checking out the above link, I received two corrections via email from Apple. One regarding smart banner documentation and one clarifying css filter support.

Here’s what we know about Mobile Safari in iOS 6 so far, and what it brings to the table for front end developers. I expect there’s more to come in future betas and as people experiment with the current beta more.

Web Inspector via Remote Debugging

The pre-existing developer tools for iOS are limited to say the least. A console.log is flattened to a single level, without actually presenting the contents. iOS 6 introduces the Safari Web Inspector to both the iPhone and the iPad via the Safari ‘Remote Debugging’ interface.

It implements a similar interface to how the Chrome for Android remote debugging works. Safari remote debugging acts in a similar fashion, such that when you select an item in the Safari desktop inspector, it is highlighted on the iOS device.

Prior to this, the only alternative was embedding Firebug Lite, which while powerful, is not designed for touch screen devices.

As far as I can tell, the old, flawed Developer Console has been removed.

Many thanks to Andrew Harrison for fact checking and screenshots.

<input type=”file”>

Finally, it’s here. You can now upload photos and videos from the Photo Library using a regular input element. This was previously only possible via the use of Phonegap etc.

This is a real game changer for mobile apps.

~~No word yet on if it allows you to capture a new photo.~~ It does.

Real time camera streaming has been confirmed as not supported.

Smart App Banners

The new Smart App Banners are a way of showing Safari users a message indicating that a native app for the website is available in the App Store. While not really a great thing for those of us hoping to move apps back towards the web, it’s still a good experience for the end user. It’s also possible to preserve the page/state/view and send this to the native app. Documentation is available on the Safari Developer Library.

Picture via Wired.

Web Audio API

How useful this is remains to be seen. Web audio tends to be fairly handicapped, regardless of browser, operating system or device. Microsoft’s HTML5 Cut The Rope game still used Flash to play the sound effects. I truly hope the iOS implementation changes that, but I’m also a realist.

CSS Filters

According to the Can I Use report, these are only supported in Chrome 18+ with a -webkit- prefix. CSS Filters are also supported in Safari 6, on Mac OS X Lion and Mountain Lion (10.7 and 10.8, respectively).

Full Screen View in Landscape Mode

Interesting by itself, but with desktop browsers beginning to land support for a full screen API - can this be triggered progammatically?

requestAnimationFrame

This has landed, albeit with a webkit prefix.

You should be using the Paul Irish polyfill anyway.

App Cache Upped from 5MB to 25MB

I believe it used to show you a dialog asking for more if you exceeded the 5MB limit.

JPEG Downsampling Ceiling Lifted

JPEG downsampling no longer occurs at 2MP, and instead kicks in around the 5MP on supported devices. The iPhone 3GS and 4th gen iPod touch remain at 2MP. That’s if your carrier isn’t downsampling for you (AT&T, Optus in Australia).

Faster JavaScript Performance

This happens every year, so it’s not really news. Nitro was previously brought to home screen apps giving them a massive performance boost. Nitro hasn’t yet been brought across to UIWebViews, one of the many reasons that the Facebook app is a steaming pile of shit. Maybe future iOS 6 betas will bring Nitro to UIWebViews? Maybe it’s already in iOS 6?