[thekingshorses]

Hacker news webapp for mobile - http://hn.premii.com

I wrote this client. It is as fast as most other native HN mobile apps, but mine works on iOS, Android browser, and windows phone 8. It also works on regular browsers.

I have wrapped this in hybrid app using phonegap, but only submitted to Google play. One day I will submit it to Apple too. https://play.google.com/store/apps/details?id=com.premii.hn

But it is not a simple task to make fast performing HTML5 app that works on all mobile browsers.

[mkhalil]

By far the best web app I have ever used. Period. How did you manage to make it so fast? Also most web apps I pin to my home screen (not many) open in safari. how did you manage to get this to open it is own 'app'. It's not a part of safari, it has it owns icon in the app switcher.

+1000 KUDOS

I WILL be using this app a lot.

edit: More kudos for being a Wolverine like myself. Go Blue!

[thekingshorses]

Thanks,

I am not using any framework, and using vanilla JS as much as possible.

If you add these meta tags, it will open as app.

    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-touch-fullscreen" content="YES"/>

And this for icon <link rel="apple-touch-icon-precomposed" sizes="144x144" href="a/icon/ios/[e-mail]"/>

[bdash]

After adding the site to the home screen there doesn't seem to be any way to get back to your site after following a link to the full version of an article. Known issue?

Other than that issue, I'm very impressed with the site. The design and performance are excellent.

[thekingshorses]

Yes that is a know issue and I don't know the best way to solve that.

[rimantas]

I still prefer http://cheeaun.github.io/hackerweb/

[girvo]

Hah! I recently switched to your app in Google Play. I thought it was native. That's how fast it is!

[joeblau]

Great job! You just got real-estate on my Windows mobile phone. Once quick suggestion. I noticed you have the precomposed Apple touch icons, can you also support Windows?

Here is the format[1]:

    <meta name="msapplication-TileImage" content="/metro-tile.png"/>  
    <meta name="msapplication-TileColor" content="#015565"/>

[1] - http://blogs.msdn.com/b/ie/archive/2012/06/08/high-quality-v...

Edit: N/M It's in there.

[revorad]

It's a cool app but it's hung up my iPhone in a very strange way.

I installed the app by saving to the home screen. Then I opened it and was browsing around, but all of a sudden, all my buttons got disabled and so now I'm stuck inside the app looking at an HN thread. There's no back button once you click through to an external url. So I can't even get back to the app's UI.

So now I just have to wait for my phone battery to die.

http://i.imgur.com/Q1p1FVb.png

[TeMPOraL]

Do a hard reset (on iPads this requires holding power + home for 10 seconds, don't know about iPhones, but there definitely is a way; pretty much any normal computer/phone/tablet can be powercycled by holding power button for ~10 seconds).

[revorad]

Why thank you! I totally forgot hard reset is power+home and was trying each of them individually instead :-p

[kbanman]

Or you could close the app. Double-click the home button and hit the red badge.

[revorad]

I couldn't close the app because my home button was disabled. So was my power button and I couldn't even slide down the notifications panel to try and jump to another app.

But the hard reset suggested by TeMPOraL worked.

[rwbt]

Hands down, the best HN browsing app I've ever used. I really don't see the need to go native either. Its pretty responsive on iOS when I add it to the home screen. Great work!

[Nux]

Works super fast on Firefox OS, too! Good job.

On Opera Mobile or Nokia Xpress it's unusable though, as expected; luckily the HN site works just fine in these browsers.

[annnnd]

Wow, good job!

But as you said, given that you didn't use any frameworks the productivity couldn't have been that great... Not to mention that it probably doesn't blend in with the native apps? (don't have a mobile with me right now, so can't test it)

[thekingshorses]

You should try it on mobile.

Well, I am not a designer so it took me while to get right colors, background, text sizes, layout etc. You can see my profile here. (http://premii.com).

Initial app took one Sunday. It worked on android browser and iOS. If I only had to make it work for iOS, it would ve been easy, but chrome on android took as much time as the whole app. Later found that there was a bug in chrome. They just fixed it like 2-3 weeks before.

It worked on WP8-IE10 without any special code. I didn't had WP, so I asked reddit/r/windowsphone guys and they told me it works great. Couple of redditors reported minor issues which I fixed.

I am not saying this is easy to do, and I will never advise anyone to user HTML5 if they have CPU intensive task and super complex animation/interaction. However HTML5 is the only platform that can help you develop simple app that works on all 4 mobile platforms (iOS, Android, WP8 and mobile browsers).

[simba-hiiipower]

great job! very well-designed and it runs real smoothly on wp8.

i created a tile for it using webapps [1] and it really feels like a native experience (looks good on my start screen too [2]..)

would be great if you ever get round to submitting a wrapped version to the wp store as well. its unfortunately lacking in quality hn apps..

[1] http://www.windowsphone.com/en-us/store/app/webapps/49e97b4c...

[2] http://i.imgur.com/ak32KWb.png

[thekingshorses]

I did started working on it, but found so many issues and gave it.

[simba-hiiipower]

ah, that's a shame. well if you're ever up to give it another go i'd recommend reaching out to r/windowsphone again, there are a lot of devs there that i'm sure would be willing to lend some support.

[ux-app]

Awesome work! Thanks for creating such a great site, I've added it to my iphone home screen. The performance is great even on an older iphone4 which is quite the achievement.

This will definitely be the way I consume HN on the go from now on.

[Ecio78]

I've just installed it on my ol' Nexus S, it seems to work well, but I'm missing (or I haven't found it?) the native possibility to share articles/HN comments on Android.

[thekingshorses]

I am working on share and save it for later. Not sure when it will be ready.

[Ecio78]

IMHO share >> save it for later (because many people use other "read it later" apps i.e. Pocket and you can send links to it via share too)

[kumarm]

Impressive. I am going to use it even on my desktop. I think it you should make it a reader app (Replacement to Google Reader etc).

[aaronbrethorst]

Ok, this is awesome. I can't believe no one else (including you) submitted this yet. Bookmarked. Love it.

[gruturo]

That thing is astonishing. The world needs more code by people like you :)

[maaaats]

Wow, I'm even tempted to use it on my desktop.

[gketuma]

great app. Did you use any framework to build the app (I mean frameworks like sencha, enyos, etc)?

[thekingshorses]

No, I didn't use any framework, but I am using Zepto library. I may remove zepto in the future as all these libraries are very slow on mobile. When I replaced $.html() with dom .innerHTML, rendering time improved by 50% in some cases.

[nreece]

Native fragment technique is even faster than innerHTML in Chrome/Firefox: http://jsperf.com/innertext-vs-fragment/19

[panabee]

this is an awesome insight. any chance you could share more of these lessons?