Posts Tagged ‘web app caching’

iOS Web App Funkiness

Friday, September 28th, 2012

I ran into some interesting challenges while working on a site this week. Like any good developer, I ran to the web to search for a solution. However, I couldn’t find any solutions that addressed my specific problems. Both problems concerned differences in behavior between Safari and the bookmarked web app. One problem had to do with caching on both the iPad and iPhone, and the other had to do with a background display on the iPad.

The first problem turned out to be a caching issue, but it presented itself as a block of code that would not die. This particular site has a large background image that is removed if loaded on either on iPod or iPhone. The background of the site was being written into the DOM with jQuery originally, but I decided to reorganize the code for purposes of progressive enhancement. I modified the CSS, JavaScript, and HTML documents. I uploaded the documents to the server, refreshed the site in Safari, and everything worked as it should. I then clicked on the web app icon for the site, and only some of the changes showed. The content changed, but the background image from the desktop site was still showing. I quit the web app, force quit it from the iOS multitasking bar, deleted the web app, cleared Safari’s cache in Settings, reloaded the site in Safari, and re-added the web app to the home screen. I tried this several different ways in several different configurations. No changes. I even force restarted the iPhone before reloading the site. Nothing.

After some systematic problem-solving with the code, I was able to determine that the trouble maker was some cached JavaScript. It just would not go away. It turns out that adding some meaningless code to the end of your JavaScript include is all it takes to prevent the code from being cached. I changed my code to the below and, voila, magic.

<script type=”text/javascript” src=”js/code.js?1234″></script>

Then I brought out my iPad to check out the site there. Pulled up the site in Safari, and everything was beautiful. Launched the web app, and the background had disappeared. On the heels of the iPhone caching issue, I figured that I had another new caching problem (even though the other fix should have fixed it). After much problem-solving and searching I found an obscure Apple Knowledge Base article about the size of images allowed on iOS devices. My image was smaller than the limitations presented in the article, but it caused me to think about the size of the image. The image is around 1300px wide, and the div was sized to display it all. So, I started playing with the size of the div that had the background image. I reduced the size to 1024px, and it showed right up.

Here are the meta tags I have in the head that apply to the web app:

<meta name=”apple-mobile-web-app-capable” content=”yes” />
<meta name=”apple-mobile-web-app-status-bar-style” content=”black” />

 

Anyway, these behaviors were unusual, and they had me stumped. So, I thought I’d share. I hope it helps.