• Posted on: Jun 26, 2011
  • Tag:
  • Reactions: 47

> iOS5, the first true web app ready platform

Was Apple boycotting web apps or simply weren’t we technologically ready? iPad2 and iOS5 will finally bring all the power we need to build full featured web apps with no visible distinction to the native counterparts.

Let’s start from a bit of history.

When Apple released the very first iPhone they also announced that the only way to build applications was with web technologies. I was one of the few excited about it, Apple’s decision was visionary but everyone wanted a deeper access to the phone APIs.

At that time Safari Mobile was still unripe. Hardware acceleration was not existent and neither overflow:scroll or position:fixed were supported. There was no way to get a decent product out of it.

The truth is that iPhone SDK was not ready and Apple didn’t want to release a half-finished product to the public. Soon after the SDK came out, everyone wowed at it but developers started to look back at web apps.

The webkit was quietly becoming the most powerful and features rich mobile browser in the market and the line between native apps and web apps was blurring.

Browser finally got hardware acceleration and iScroll and other JS scrollers were a viable substitute to native scroll view.

But my discontent and frustration is growing high at each iOS release lacking native support for overflow:scroll, position:fixed and hardware accelerated canvas (needed for JS games).

Nitro came out. Everyone wowed again, but that phantasmagoric engine was not enabled for web apps. We have enough evidences to say that Apple is boycotting web applications in favor of native apps. Wrong! Keep reading.

Native apps are sold exclusively on the iTunes Store where Apple is earning 30% a pop. Web apps are instead out of Apple’s control, you can sell them wherever you want out of Apple’s iOS strict guidelines.

It may seem that Apple is not willing to unleash the true web apps potential. But let me say something: Apple doesn’t give a damn about what technology you are using to build your app (as long as you are building apps for their products)! Not to mention that even with the lack of native overflow:scroll or hardware accelerated canvas, iOS browser is still the best mobile browser in da house.

We have to face the fact that we are (were?) not technologically ready for 100% web apps. Palm tried and failed, maybe webOS will be more lucky under the HP wing. Apple –as it already happened in the past– is not willing to release a technology until it is not completely satisfied with it.

Now iPad2 is out and it has enough juice to host any web app even without HW acceleration. But the real revolution might be iOS5. In the first beta they revealed overflow:scroll and position:fixed, while the second beta seems to unleash the devastatingly cool -webkit-overflow-scrolling:touch CSS property.

With -webkit-overflow-scrolling:touch you can finally have native scrollview inside your web app and together with webGL there’s no reason on Earth to go Object-C (I’m over-exaggerating, don’t flame).

As it is already happening for Mac Apps you may decide to publish your future iOS apps on the Apple Store, or release them on your website, or take advantage of the two worlds and follow both paths.

I envision a future where 90% of the native apps are just webview wrappers (as it is already happening thanks to Phonegap).

Now there’s one more thing. Web apps are much more than position:fixed or webGL. You can update them on the fly, build your own business model on them, ask for a subscription fee, have your users pay for additional features, or make them completely free.

This is a level of freedom that Apple will hardly give you. You’ll be always bound to the Apple’s guidelines. I’m not saying this is wrong. I praise Apple for the efforts they are lavishing into web technologies, but “the web” is not just a set of technologies. In that I feel that Google has a better, more liberal approach, but unfortunately, on mobile browser they are one year behind of Apple.

Please note that this article is based on rumors about iOS5 beta features. Apple is not new at stripping out functionalities from golden master.

/Share the joy

/Reactions

    • Author: Rob Wright
    • Posted on: 2011/06/26
    • At: 11:58

    Nice article – I agree in part, and it’s all about using the right tools for the job. I recently build a quiz platform using JS and CSS 3, wrapped in PhoneGap for an unattended iPad setup at events. Time and time again it’s the little things that trip you up – reported to Apple of course – but more than that, right now web apps simply lack the necessary APIs to interact with the hardware without many layers of abstraction. As a general solution, perhaps web apps will lower the barrier that objective-C sets high… but there’ll always be cases where writing the relevant native>JS object abstraction is a needless level of complexity.

    On a higher level, WebKit is a stonkingly good rendering engine, but its implementation varies considerably across its implementations. Within iOS we’re making great progress, but I think we’ve really reached the sweet spot of web apps when there is some kind of level of true cross-platform appeal. Right now, we’re still working around implementation quirks, performance issues and visual artefacts (particularly surrounding Android’s CSS transforms and animations) that just cause headaches. Get everyone on a level playing field and stuff gets exciting :)

    • Cross platform compatibility has always been a huge problem and source of frustration. It was frustrating on the desktop, it is even more frustrating on mobile.

      We needed years to reach an IE version that blandly supports HTML5. We will probably need years to reach a point where mobile browser discrepancies won’t be an issue.

      That said, if you develop on iOS only, you are pretty close to native look and feel. Of course you still miss access to the camera and maybe other HW features, but the first step was the scrollView.

        • Author: Mayank
        • Posted on: 2011/08/04
        • At: 09:09

        On cross- compatibility note for mobile, its also more complex because its not just browser quirks here and there, there is a design perspective involved as well. Users of diff. Mobile devices/platforms have diff user interface expectations, which was not a big concern on desktop!

    • Author: Rob Wright
    • Posted on: 2011/06/26
    • At: 12:04

    On a lighter note… I want to cry at how lovely having -webkit-overflow-scrolling:touch is ;)

      • Author: alex
      • Posted on: 2011/06/26
      • At: 20:10

      I want to cry because it’s not available yet :(

  • Nice article!

    Although, unfortunately, I don’t think that WebGL is available in iOS5 :S

    https://www.khronos.org/webgl/public-mailing-list/archives/1106/msg00036.html

    I hope they add WebGl support for everyone and not just iAd, pretty soon.

    • All the WebGL classes seem to be present in the global namespace now. Just not quite turned on. I think I read a rumor it would be available for iAds. Hopefully not only ;-)

    • Author: vega9
    • Posted on: 2011/06/26
    • At: 13:04

    These are good news but what about, file uploading in the browser and contentEdidable WYSIWYG ?

    • Author: fablec
    • Posted on: 2011/06/26
    • At: 18:34

    Good article, but this is not the only feature exposed by IOS5 beta.
    Now we have the support of contentEditable on any DOM elements, and the support for many input type like datetime,range, validating form…
    With all these features available, we can’t definitely say that Apple is boycotting web applications in favor of native apps. I hope that all these will be publish in the final release.

  • Yes, I think it’s important to stress that the languages you use to write an app are more or less orthogonal to the way you build a business around it.

    If Apple are able, they should get ahead of the hybrid curve and make JavaScript a first class language for iOS. In the meantime, the idea of using the web stack for building apps (rather than documents) has come of age.

    So, like you, I’m excited – gradually our wishlist seems to be coming true :-) http://www.sencha.com/blog/a-web-developers-wishlist-for-ios-5

    • Author: Patrick Aljord
    • Posted on: 2011/06/26
    • At: 22:34

    IOS5 still does not support the file input. This means any web app that allows uploading files is broken on IOS. How is that even remotely even web app ready? It also lacks the camera and mic capture api to compete with native apps. So really, it is far from being ready.

    • I’m not saying that is perfect. I’m saying that iOS5 is the first step in the right direction.

      • Author: Patrick Aljord
      • Posted on: 2011/06/27
      • At: 02:05

      I never said it was perfect, I said it wasn’t ready unlike your title claims. It is not the first step either, just one of many steps needed to get there.

      • I think that native scrollview is the very first step to have native webapps available to the masses. There are many other factors, of course, but being able to place fixed objects on screen without hacks is the bare minimum (and this is still not possible, I hope it will with io5).

        PS: I did not say that you said that it is perfect. I said that I did not say that it is perfect… :)

      • Author: Ian Brown
      • Posted on: 2012/08/14
      • At: 18:00

      File input supported in IOS 6

      IOS 6 – AJAX Asynchronous File Upload, WebApp, Safari iPhone 3GS
      http://www.youtube.com/watch?v=6l9WP5hUtIA

    • Author: pixelrevision
    • Posted on: 2011/06/27
    • At: 03:50

    Cool article, glad to see we’re finally getting position:fixed. That one has been a long time coming. I am glad that apple is pushing both paths forward and are not dropping HTML5 richness just to focus 100% on native.
    We need both options. HTML5 is great for when you want to do something data driven, but it just will never be at a parallel with c++ when it comes to building a game.

    • Never say never. Javascript engines (including iOS Nitro) are getting ludicrously fast these days. Perhaps not quite up to native code speeds, but not far off. They’re certainly good enough for the kind of game which doesn’t tax the hardware too much.

  • For basic functionality – one or many scrollable areas on one web page w scroll bars – do I need iScroll anymore?

    • for basic functionality you won’t need iScroll anymore (finally!).

    • Author: MarcusJoe
    • Posted on: 2011/06/29
    • At: 01:27

    Still, for pull to refresh and similar advanced tasks we’ll need (a version of) iScroll right? We’ll also won’t be able to assume a large percentage of users will be using iOS5 for a long time as I think Apple may charge for it (Not sure though, has anything been announced about this?) .

    • yes, of course for advanced features you’ll need custom code.

      Also please note that JS scrollTo of a native scroller is less smooth than translate 3d.

    • Author: televator
    • Posted on: 2011/06/29
    • At: 16:45

    Is it possible to get a youtube video showing off the new scrolling functionality in iOS 5, or would that violate an NDA?

    Very curious to see how well it performs.

    • Author: Alex
    • Posted on: 2011/06/30
    • At: 10:35

    Please advise, will it be able to upload documents or any other files for example to http://www.mediafire.com in mobile Safari under iOS 5??? Very important, like you able in Android stock browser!

  • Once thing I haven’t tried yet is the bug regarding videos. In previous versions when you try to play a video that is outside the scroll area(through iScroll or custom solution), there isn’t a way to interact with the element at all.

    • Author: Ben Martinek
    • Posted on: 2011/07/06
    • At: 20:20

    Exciting, but feverishly waiting for: input type=”file”

    • Author: Damian
    • Posted on: 2011/07/06
    • At: 23:36

    I agree with you in many things; the overflow-scroll: touch is amazing and I’m also more excited about the possibility of having position: fixed + native zoom working too (I watched a video of this working but it was quite buggy in the beta2 of iOS5, I hope they’ll fix it before the final release).

    However, it is still missing A LOT of features that are killer reasons to avoid trying to compete against a native app. This is my personal list (or at least, the ones that I can think of now..) :

    - The stupid limit for images. You cannot load more than ~7mb of images in a web page. If you hit that limit, the browser will either crash or just stop displaying them!
    http://www.fngtps.com/2010/10/mobile-safari-image-resource-limit-workaround
    http://roblaplaca.com/blog/2010/05/05/ipad-safari-image-limit-workaround/

    - No debugging tools (remote debugger may be?)

    - Why cannot 2D transformations work as well as the 3D ones? Is just silly having to use an extra coordinate just to get “faster”. The browser should perform as fast always! Plus, native support for animations (not the CSS ones) should exist.

    - A better gestures API. The “gesture” events are just ridiculous. If you put one finger on an element and a second finger on another (while both are listening to gesture events), they both trigger the event handler! Moreover, someone at Apple had the wonderful idea of not providing ANY touch reference in this event, so the only way to know if the user is actually using a gesture you have to listen to the touchstart event and do your proper validations. SenchaTouch managed to sort this out, guess how? Getting ride of gestures events, they just don’t use them at all.

    - Inline SVG support is buggy: you cannot just add SVG to your markup, you need to create it from JavaScript and, when is working, complex SVGs lost their color sometimes.

    - No input type “file”. This is a major missing feature. This should have been present in the iOS since the very beggining. You cannot make any interesting media app without letting the user upload content from his own device. Native apps can get limited access to other apps’ file systems, plus the default photos/videos gallery. WebApps cannot.

    - Native drag & drop.

    - Support for different input types (with native interface).

    - Everything SenchaTouch wishes.

    There’s a lot of work to be done before web apps can really be competitive against the native ones.

    • Hi Guys and Damian,

      one question: I have problem inserting inline svg into a iphone app developed using phonegap , because the phone doesn’t render the images.
      I have tried with the object and embed tags without any good result!

      Thanks for yours attentions
      Goodbye

    • Author: Ross
    • Posted on: 2011/07/08
    • At: 12:42

    Nice article I agree with most of it except Apples motives:

    “Apple doesn’t give a damn about what technology you are using to build your app (as long as you are building apps for their products)!”

    It would be insane to think that the HTML5 side of things such as web apps wouldn’t be highly supported and promoted if they had a preferance for us all to develop natively.

    They have to keep up to date (and stay ahead) of the competition which is why you’ll see a big uptake and efforts made towards web apps (and supporting them), but the statement above is simply not true – of course they would rather take a percentage of a sale!

    Ross

    • As long as you are building apps for their products… and selling through the app store.

      We are mostly talking about web-technologies not “the web”.

    • Author: Raoul
    • Posted on: 2011/09/04
    • At: 14:28

    Webapp seems not to be the priotity of Apple, that is right. They abandon their Webapp site, that is no longer updated with new ones App.
    Their development tool, Dashcode, is great, but so buggy, and restrictive in the way to use it. But it is quiet a powerful tool.
    I think Apple is lacking behind everyone for the Webapp, as they are on XCode and their store App, first.
    If you look at MS, yahoo with some very nice scrolling effect in their presentation of Webapps, or Google with some scrolling area in their map search Webapp, you see Apple is behind them. They don t even have Webapp for their site and seem not ready to update Dashcode for now.
    That is a big mistake, as Webapp is the future. Documents on the web with the cloud, but not the Apps…!!

    • Raul, you seem to forget that the best mobile browser to date is mobile safari…

        • Author: Raoul
        • Posted on: 2011/09/07
        • At: 13:51

        Yes, true, but that doesn’t mean they put the same power to improove dev tools for WebApp as they put for natives Apps. And the other ones who don’t fully care about natives App for their platform, if they have, have for now a strong advance for WebApp. No?

      • They surely don’t put the same power on both worlds, but surely they put more power on the browser than the other players.

    • Author: Umair Ashraf
    • Posted on: 2011/09/13
    • At: 17:51

    If Apple doesn’t give you hardware accelerated canvas, would you like if there is a webkit wrapper that supports it for you on the iphone?

  • Except PhoneGap + iOS overflow scroll touch = touch becomes unresponsive. I hope iOS fixes this soon!!!

    • Author: Al
    • Posted on: 2012/02/21
    • At: 22:09

    Its a work in progress currently but it shows how one could use the new css properties available in iOS5 to build a native looking and acting app using html/css.

    Go to it on your iPhone for best results as I haven’t yet styled everything for an ipad.
    http://heroicpixel.com/index.php?/blog/mobile2/