All posts tagged ‘iOS’

File Under: HTML5, Mobile, Web Standards

New HTML Tricks for Web Developers in Apple’s iOS 6

Image: Screenshot/Webmonkey

Apple’s recent iOS 6 update added some nice new web standards support to Mobile Safari, the default iOS web browser for the iPhone, iPad and iPod touch.

Apple’s documentation remains sparse and occasionally outdated, but luckily Max Firtman, author of O’Reilly’s Programming the Mobile Web, has a very thorough rundown of everything that’s new in iOS for web developers.

By far the biggest news is support for file uploads and camera access using a combination of the File API and the HTML Media Capture API. To let users take a picture from your web app, you’d use a file input tag something like this:

<input type="file" accept="image/*" capture="camera">

Mobile Safari’s Media Capture support is incomplete so it will ignore the capture attribute, as well as any value for accept other than image or video, but at least web apps can now capture and upload images from the iPhone’s camera.

I put together a quick demo page of Mobile Safari’s Media Capture support so you can see the new interface in action. The first two examples on that page work, the third audio example does not. You can see in the demo that Mobile Safari helpfully shows a thumbnail of the image prior to upload. It’s also worth noting that Mobile Safari supports the multiple boolean flag for uploading more than one image at a time, though in that case you lose the ability to access the camera.

For more on what to do with those images once the user has selected them, check out the Mozilla developer network, which has an excellent tutorial on using the File API.

Other highlights for web developers in the new Mobile Safari include support for the Web Audio API (great news for anyone building mobile, web-based games), increased application cache sizes (now 25MB), a faster JavaScript engine and some new CSS tricks as well — CSS Filters, CSS Cross Fades and the not-yet-a-standard CSS Image Set we told you about earlier. Be sure to read through Firtman’s whole post for all the details.

While there’s plenty to like about the new Mobile Safari there are some things missing, like support for WebRTC and getUserMedia, WebGL and sadly our least favorite bug — the Viewport Scaling Bug, which causes Mobile Safari to incorrectly reflow content when rotating from portrait to landscape — seems to still be hanging around. As always there’s a JavaScript workaround available.

File Under: APIs

Rails App Details Apple’s New ‘Passbook’ Web Service

Apple’s new Passbook app. Image: Apple.

Apple’s recent iPhone announcement contained one tidbit of interest for web developers — Passbook.

Passbook is a new app coming in iOS 6 that collects your boarding passes, movie tickets, retail coupons, loyalty cards, and more and stores them all in one place. Checking in for a flight? Just pull up Passbook and you’re done. Ditto for redeeming coupons, getting movie tickets and so on.

What makes Passbook interesting for web developers is that on the back end there’s a REST-style API for sending updates. The API allows developers to register web services which can then automatically update content on the “pass,” as Passbook entries are known. For example, you could update a coupon or add more credit to a pass based on a transaction on your website.

Passbook communication happens through Apple’s new PassKit web service. The PassKit API offers endpoints to get the latest version of a pass, control push notifications for a pass and query for passes registered for a device.

As with all things Apple, you’ll need a developer account to build anything, but if you’d like to get some idea of how the web service end of Passbook works, check out Mattt Thompson’s passbook_rails_example. Thompson has put together a basic Rails app that shows how to work with Passbook, including how to register devices, get the latest version of a pass, get serial numbers for passes on a device and unregister a device.

For more details, head on over to GitHub.

File Under: Location

Apple Credits OpenStreetMap for iPhoto Map Data

Google Maps vs Apple's custom maps. Note the increased road/path detail from OpenStreetMap visible in the Apple version of this map of Vienna, Austria.

Apple has finally acknowledged that its iPhoto application for the iPhone and iPad uses OpenStreetMap data.

Open up a map in iPhoto for iOS and one of the first things you’ll notice is that the familiar beige and yellow Google Maps are nowhere to be found. Instead you’ll see Apple’s homegrown maps, the look of which is distinctly Apple’s, but the data behind the maps comes from the open source mapping project OpenStreetMap.

Until now Apple did not provide any credit to OpenStreetMap. Earlier this week Apple updated iPhoto for iOS and among the changes is a new notice that says the data comes from OpenStreetMap. It’s buried in the app credits where most people will never see it, but it does fulfill the licensing requirements that govern OpenStreetMap data.

For those unfamiliar with it, OpenStreetMap is an open source project that maintains an editable map of the entire globe. Anyone can make edits and add data to the map, which is why it’s often called the “Wikipedia of maps.” Although OpenStreetMap has been around for some time, it’s recently become considerably more visible as part of iPhoto and before that as part of Microsoft’s Bing Maps. Additionally some high-profile websites are starting to move away from Google Maps — like Foursquare, which ditched Google Maps in favor of OpenStreetMap.

It’s been clear for some time that Apple is looking for a way to wean itself off Google Maps. Apple has even purchased several mapping companies, including Placebase, an online-mapping company, and C3 Technologies, which creates 3-D maps.

File Under: Browsers, Mobile, Web Apps

Mozilla’s WebAPI Wants to Replace Native Apps With HTML5

Mozilla has launched an ambitious new project aimed at breaking down the proprietary app systems on today’s mobile devices. The project, dubbed WebAPI, is Mozilla’s effort to provide a consistent, cross-platform, web-based API for mobile app developers.

Using WebAPI, developers would write HTML5 applications rather than native apps for iOS, Android and other mobile platforms.

Mozilla isn’t just talking about WebAPI, it’s already hard at work. It plans to develop the APIs necessary to provide “a basic HTML5 phone experience” within six months. After that the APIs will be submitted to the W3C for standardization.

Among the APIs Mozilla wants to develop are a telephone and messaging API for calls and SMS, a contacts API, a camera API and half a dozen more.

If those APIs sound vaguely familiar it might be because the W3C’s Device APIs Working Group is covering similar ground.

So, why the new effort from Mozilla? Well, Mozilla’s WebAPI is a part of its larger Boot to Gecko Project, which aims to eventually develop an operating system that emphasizes standards-based web technologies. With that end goal in mind, WebAPI may end up somewhat different than what the W3C is trying to build.

It’s also possible that Mozilla simply doesn’t want to wait for the Device APIs Working Group. Mozilla wants WebAPI up and running in a mere six months, the W3C’s Device APIs Work Group is unlikely to move that fast. But “the idea is to collaborate with W3C and all players and together form a good solution, and not just dump it on them,” says Mozilla Technical Evangelist Robert Nyman in a comment on his post announcing WebAPI.

The dream of write-once, run-anywhere software is nothing new and, if history is any guide, Mozilla’s WebAPI efforts may well be doomed. The open source giant does have one thing going for it that most other efforts have not — the open web. Most write-once, run-anywhere attempts have come from companies like Adobe and were built around proprietary frameworks. WebAPI doesn’t suffer from vender lock-in the way some projects have. WebAPI’s main roadblock is convincing other mobile web browsers to support the APIs.

For WebAPI to appeal to developers, Mozilla will need Apple, Google and other mobile browser makers to implement the APIs so that WebAPI can compete with native applications. Before you dismiss that as an impossibility, bear in mind that Apple’s original vision for iOS app development was based around HTML applications, and you’d be hard-pressed to find a company more eager to embrace web apps than Google. Whether either company will devote any resources to implementing WebAPI remains to be seen. But if Mozilla can get WebAPI standardized by the W3C other browser makers would likely support it.

Mozilla’s plans for WebAPI are certainly ambitious, but the company is putting its money where its mouth is — Mozilla is currently hiring several full time engineers to work on WebAPI.

See Also: