My first iPhone app was a web app

Cintos Mobile, the iPhone web app I built before the App Store existed, is restored and live again at /cintosmobile/.

I just put Cintos Mobile back online — pulled from the Internet Archive, restored to the same URL it lived at almost twenty years ago, and playable in your browser right now.

With the recent 50th anniversary for Apple, I've been reflecting back a lot, and Cintos Mobile was my first ever iPhone app. I'm glad it's around again.

Before the App Store, the iPhone shipped with no SDK

The first iPhone came out in June 2007. There was no App Store. There was no native SDK for third-party developers. If you wanted to build "an app" for the iPhone, the official answer from Apple was: build a web app.

At WWDC 2007, Steve Jobs framed it pretty directly: developers should build for the iPhone using Web 2.0 and AJAX. The pitch was that those web apps could look and behave like the native ones, integrate with iPhone services like Mail and Maps, and ship without an SDK at all — your existing browser-side skills were everything you needed.

That was the official path. So that was the path I took.

The App Store wouldn't be announced until March 2008 (with iPhone OS 2.0 and a real native SDK), and wouldn't open to the public until July 10, 2008. In that roughly year-long window, "iPhone apps" meant Safari + viewport meta tag + a lot of -webkit- CSS.

Cintos Mobile

Cintos was a "board game" I made first for the Mac, and I used it as a way to practice as I explored other languages or platforms. I had made a Java version and had toyed with a Windows version too. It scaled well to the iPhone screen with the 8×8 board across the 320×480 screen. The whole thing is HTML, JavaScript, and a few PNG files.

If you want to play right now: /cintosmobile/.

I tried out the web app at my nearest Apple Store once it was online, and made a few trips back until it was working right.

A few details from the source that look very much of-their-time:

<meta name="viewport" id="iphone-viewport"
      content="width=320, user-scalable=no" />

width=320 because the iPhone's screen was 320 points wide. user-scalable=no to prevent pinch to zoom from messing up the view.

<style type="text/css" title="AppleStyle">
    @import "cintosmobile.css";
</style>

title="AppleStyle" because I started from some Apple code.

After the App Store

When Apple announced the App Store and the native SDK, I applied as soon as I could and was accepted into the iPhone Developer Program early. My first App Store app was Flashlight, which ended up being downloaded over 100 million times.

A note on the restoration

The HTML, JS, and CSS are pulled directly from the Internet Archive's Wayback Machine — specifically from a January 2009 snapshot, with a few small edits: the "back to website" button now points at this site rather than the old one, and three game piece PNGs (piece0.png, piece1.png, piece2.png) had been lost from the archive entirely, so I drew new ones at the original 32×32 dimensions to make the board playable again.

Other than that — same code, same layout, same year-2007 web-app energy. :-)