Just over a year ago I’d say, I launched an Android Application for my blog posts, using a third-party service. Whilst that service is great, there just wasn’t support for all mobile devices. If you’re going to target a mobile audience, why target just the one market? Then thinking about it further, why even have an app? Surely there’s no need (although, notifications are cool).
Still, this got me thinking. What if it were possible to do some kind of “web app”. Which is one of the main reasons I added swipe shortcuts to blog posts, seeing as the existing app already had those. That’s one feature down. Another feature it had was a list of the latest blog posts. “I already have that on the homepage”, I thought to myself. Which, to be true, I do. Except, they were full length blog posts. Not just lists of the titles. Not exactly what I wanted. Though a quick search told me that this was possible with
query_posts, where I could even tell it to display posts from different categories and all sorts! But for now,I wanted all categories. With a nice round number of 15 posts!
I finally felt like this was getting somewhere, a posts list page, navigation between posts. It was becoming more and more like the real thing. But then came the hard part, or, what I assumed would be the hard part. You see, if I wanted it to be like and app I could expect users to open their web browser each time and navigate to my blog, sort of defeats the object. Of course, they could bookmark it. But again, sort of defeats the object, they would still have to open up their bookmarks.
Unless, the user added a bookmark to their screen. Though still, it wasn’t the most attractive thing to look at. Whilst this may vary per device, it gave me a red star icon with my logo tiny. It was some branding, but wasn’t great.
Then I’d stumbled across something that would actually do the trick, the
<link rel="apple-touch-icon" href="image-here"/>. Though in this format, it would only work for “iDevices”. Whilst still not great, slightly better. Though further research told me that adding
precomposed to the attribute, would make it work with other devices too – hurrah! So now we have
<link rel="apple-touch-icon-precomposed" href="image-of-right-size-here"/>, and a pretty homescreen icon for mobile devices!
Right, okay, so let’s start to wrap things up here. I’ve got a nice icon, a list of the latest posts (which I think of very easily clickable on mobile devices!) and a way to navigate between posts. The only thing I need now, is notifications. Now whilst I haven’t looked into notifications, I don’t think it is possible on a standalone site, though I may be wrong. However, there’s always email subscriptions to easily (and instantly) notify you!
So, should you want to use this site as an app, simply navigate to “/blog” on the site you want to use (for this example I’ll use the main blog) http://www.itsdaniel0.com/blog, from your web browser click “Add to homescreen” (or bookmark, then add to homescreen – it can vary per browser, per device) and you should instantly see an icon there, which will navigate to that page each time!
Below are just a couple of screenshots, click to enlarge.
Screenshot of email notifications vs previous Android App notifications, with comparison of the previous app logo (right) and the new bookmark logo (left) in the background.
A screenshot of the “/blog” page on the main blog, in the default web browser.