Will Safari Guidelines work for iOS Webkit Hybrid applications?

Question

I am basically a native iOS app developer and recently jumped into HTML applications domain.

I am about to develop multi-platform web application, which should run over, Desktop, iOS mobiles, Android mobiles, Windows mobiles. So I am in search of generic HTML Web support documentation.

For that, I found some Apple guidelines for Safari Web development. Below are few reference links

• https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/Introduction/Introduction.html
• https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/Introduction.html#//apple_ref/doc/uid/TP40002049
• https://developer.apple.com/library/archive/documentation/iPhone/Conceptual/SafariJSDatabaseGuide/Introduction/Introduction.html#//apple_ref/doc/uid/TP40007256

So my question is, all these guidelines are supporting all Apple provided browsers or any specific?

• Only Mac OS safari browser
• iOS Safari browser
• iOS Web-Kit development browser (UIWebView)

I have tried to check into the documentations, but there is no specific mention about the same.

Answer 1

The guidelines provided by apple will be targeted at Safari (Webkit) for obvious reasons, but should work across most browsers. When building your web app, you should treat it just the same as a website, making sure to adopt progressive enhancement. When styling your web app, just remember that a lot of features introduced with CSS3 still require vendor prefixes, which target specific browsers. CSS3 Please is a handy resource for ensuring you never leave any out.

Here are some handy wee tools from Filament (jQuery devs) which may help you along the way, although not strictly needed:

https://github.com/filamentgroup/Southstreet

More specific to your question, the Apple docs mention aspects of developing for Safari such as the viewport meta tag. This is not specific to Safari or Webkit, and is indeed essential to get your web app to look & work as it should across all devices.

---

Other Resources

Browser support:
http://caniuse.com/
http://html5please.com/

HTML5 Boilerplate:
http://html5boilerplate.com/

The HTML5 Boilerplate should be enough to get you going initially, and includes the Modernizr plugin, which allows you to create polyfills depending on what each browser supports.

I'm a front-end developer and have built web apps and hybrid apps, and i've always just tried to apply the same standards to web apps as I do with every website : ) As ever, there may be tiny fixes required to make it look & work exactly as expected across all devices - test, test, test.

Frameworks

Ember : A JS framework for building web apps, including support for using Handlebars for rapid templating.

Cappuccino : Adopts the Obj-J language and allows the use of Interface Builder in X-Code, so may be more suited to someone like yourself who is a native iOS developer.

Sproutcore : Similar to Ember, just a little more powerful.

HTML5 Data Handling

Data Binding : You may want to have a look at using data binding with IndexedDB. This is kind of like having a client-side database, but it's capabilities are very limited in comparison to MySQL or, in your typical case, Core Data.

Offline Storage : A nice comparison of different options available to you for offline client-side storage.

Templating & UI

Bootstrap : As a programmer, you may want some help getting the UI elements off the ground. Twitter's Bootstrap is the most popular choice, and is basically Twitter's own UI elements bundled together and open sourced.

Foundation : Alternative to Bootstrap.

FlatUI : A less complete alternative.

Handlebars : Previously mentioned, this allows you to build client-side side templates, kind of similar to Smarty templating used in PHP.

---

I'm sure i've missed loads here, but hopefully this'll be enough to get you looking in the right places for the right things.