iphone web app development, from the trenches.

-

Dear reader,

I joined the iOS web developers for adventure and a chance to see the world but instead I am working in a mud hole, freezing my arse off, with a constant fear of death. I am writing this note in hope that it makes it out of the trenches. In case I do not.

It's bloody here in the iOS trenches and I feel my days are numbered. With these thoughts on my mind, I hope to share this with you.

Some of this stuff is not documented in the standard issue manual, or disseminated via the standard propaganda channels. I feel it ought be of use to you.

Unfortunately it has been very hectic here, so the words will likely be rushed and detail will be lacking. I apologise for this, but I still think it will be useful (no brain rockets, just some Damn Useful Information).

In case I don't make it,
Your friend from the trenches,
René Dudfield.


ps. if you find this note, please consider commenting on the back with any other useful information your fellow iOS trench mates might find useful.


-------------- -------------- --------------


Going full screen requires a cache manifest on the iphone. Otherwise the files do not save. The cache manifest is a horrible beast, that has quite a few gotchas. It will only go fullscreen when run as a web app, not when run through safari.

You can detect with javascript if your app is running through safari, or as a web app. This is most useful for asking the user if they want to put your app on their home screen.

Changing css opacity quickly is really slow on the iphone. This makes some jquery things slow - like show/hide.

Use the css animations, and transitions if you can. Just like animating opacity is slow with javascript on iphone, so is animating other css attributes.

There is a 5MB limit on the overall app cache size. Big files will not cache (like music and videos).

If you are using cache busting urls, it stuffs up the cache manifest. eg, mystyles.css?v=234 in your html, will make the cache not work correctly. I guess since the cache has just mystyles.css not mystyles.css?v=234.

For cache manifest to work on iphone you need a html 5 doctype, and a html 5 tag without a xmlns attribute.

Google chrome can be a good debugging tool for the cache manifest file. Since it shows you problems in the console.

Restarting the iphone can help clear the safari cache.

Safari 4, and iOS 4 have the audio tag - not earlier. Calling play on an Audio object after calling load does not really work. However if you set the autoplay attribute to true then it plays as soon as it can.

The audio can stutter a little bit if you are doing many other things at the time, or if the network slows, and it's not all loaded yet.

iphone can not play video inline on a webpage. It can only play fullscreen. iPad can play the video inline.

SVG on iphone is pretty quick. Canvas is not so quick... but you can still do basic things ok.

CSS media queries let you supply a different CSS if you are on an iphone/ipad/android etc.

Mouse events are a bit slow to react. You can use mouse events, but learning how to use the touch events will allow you to develop a much better experience. The touch start event, and the touch end event both come before a mouse event arrives. This means that it will always respond faster by using the touch events.

Make touchable things(buttons) big, and make them a similar size. If you have a really small button next to a really big button it might be impossible for the person to press on the really small button. They can zoom in and out, and if the buttons are all a similar size, then they will be zoomed in at the right level to be able to press on the buttons.

Comments

Shawn W. said…
While I don't have anything substantial to add, I wanted to congratulate you on making a mundane topic humorous :)
11:07 PM
Anonymous said…
iOS version 3.0 supports the Audio tag, just not inline (like with the video tag).
2:16 AM
René Dudfield said…
@swheatley, glad it gave you a chuckle :)

@118103114501574608776, What do you mean not inline?

Via using embed? Or as a class Audio() ?
8:38 AM
Post a Comment

Popular posts from this blog

Draft 3 of, ^Let's write a unit test!^

-
Image
So, I started writing this for people who want to 'contribute' to Community projects, and also Free Libre or Open source projects. Maybe you'd like to get involved, but are unsure of where to begin? Follow along with this tutorial, and peek at the end in the "what is a git for?" section for explanations of what some of the words mean. Draft 1, 2018/07/18 - initial draft. Draft 2, 2019/11/04 - two full unit test examples, assertions, making a pull request, use python 3 unittest substring search, "good first issue" is a thing now. Started "What is a git for? Jargon" section. Draft 3, 2020/12/12 - default branch name is main. What's first? A test is first. A unit test is a piece of code which tests one thing works well in isolation from other parts of software. In this guide, I'm going to explain how to write one using the standard python unittest module, for the pygame game library. You can apply this advice to most python pr...
Read more

Is PostgreSQL good enough?

-
Image
tldr; you can do jobs, queues, real time change feeds, time series, object store, document store, full text search with PostgreSQL. How to, pros/cons, rough performance and complexity levels are all discussed. Many sources and relevant documentation is linked to. Your database is first. But can PostgreSQL be second? Web/app projects these days often have many distributed parts. It's not uncommon for groups to use the right tool for the job. The right tools are often something like the choice below. Redis for queuing, and caching. Elastic Search for searching, and log stash. Influxdb or RRD for timeseries. S3 for an object store. PostgreSQL for relational data with constraints, and validation via schemas. Celery for job queues. Kafka for a buffer of queues or stream processing. Exception logging with PostgreSQL (perhaps using Sentry) KDB for low latency analytics on your column oriented data. Mongo/ZODB for storing documents JSON (or mangodb for /dev/null replacemen...
Read more

post modern C tooling - draft 6

-
Image
Contemporary C tooling for making higher quality C, faster or more safely. DRAFT 0 - 10/11/18,  DRAFT 1 - 9/16/19, 7:19 PM, I'm still working on this, but it's already useful and I'd like some feedback - so I decided to share it early. DRAFT 2 - 10/1/19, mostly additions to static analysis tools. DRAFT 3 - 10/4/19, updates on build systems, package management, and complexity analysis.  DRAFT 4 - 10/6/19, run time dynamic verification and instrumentation, sanitizers (asan/ubsan/etc), performance tools, static analyzers. DRAFT 5 - C interpreter(s).  DRAFT 6 - 11/6/19 , mention TermDebug vim,  more windows debugging tools, C drawing for intro. In 2001 or so people started using the phrase "Modern C++". So now that it's 2019, I guess we're in the post modern era? Anyway, this isn't a post about C++ code, but some of this information applies there too. No logo, but it's used everywhere. Welcome to the post modern era. S...
Read more