How to run a prototype on an iPad, offline and fullscreen

with appcache.manifest


What's this?

This is a guide on how to take your Axure prototype and run it off-line on an iPhone or iPad. This means you can design a full-screen, app-like prototype, with no browser chrome, and run it when out of wi-fi range (useful for demoing at trade shows).

Is it for me?

This is a bit of long process, so you might want to check that it's right for you before you start.

Failing which, I've included some easier ways of getting your prototype offline, linked at the bottom as Alternatives.

  • You've got Axure 6.5
  • You want your prototype to work offline
  • You have some private webspace (share.axure.com won't do)
  • You want your prototype to work "natively", not through a 3rd party app
  • You are ok with editing a little HTML
  • You can change your server's behaviour, or have a friendly sysadmin who'll do it for you. This bit sounds scary but is fairly straightforward.

How it works

Some modern browsers, like Mobile Safari, are able to save a web page or website for offline use without much user intervention. The designer has to tell the browser what all the pieces of the site are that they want saved, using a manifest file. Axure doesn't do this out of the box, so you have to alter some of the generated HTML first, and make a small change to your server.

Most of the detail on manifest files is lifted from this webvisions arecile about offline caching.

Detailed instructions

Hardest step first: 0. Fix your server to serve appcache files properly. Follow the instructions in this article for how to do this. You'll be editing the .htaccess file. If you can't do this, then you're probably stuck. Try one of the alternatives below.

1. Build your prototype.
Since there won't be any browser chrome, you can aim for the maximized screen size: 1004x768 for iPad 1/2 (no idea what on iPad 3, send me one and I'll work it out for you).

ax Axure's prototype settings for mobile

If you want a seamless app experience, with no refresh flicker, then build your app in one page, using dynamic panels to manage all the page states.
This might mean making a large page, but Axure can cope (so long as there are not too many massive image files).

Warning all the following steps are based on the assumption that you built a one-page prototype. The main steps can probably be extended to work for a multi-page prototype too.

2. Enable the mobile prototype settings in Axure.
Tick boxes as shown.

Tip: For a touch of luxury, make an app icon too and include it at this stage - that will make your prototype look extra professional from the get-go.

3. Install manifestr in your browser (painless).
This will give you a button in Chrome that you'll press later on to create your manifest file.

4. Build your prototype and upload it.
Give it a quick test to make sure it's as intended.

Tip do test first! The next few steps are somewhat fiddly, and you won't want to repeat them often.

5. Get the real URL for the prototype.
You want the URL to the one page you are looking at, not the whole prototype.
Navigate to the right part of the prototype, then select "show links" on the left.
Grab the URL for "without sitemap". Go to that URL - it should just be the one page you need.

6. Run manifestr. It will catalog all the files your prototype needs to work, then spit out a text list you can copy.
Paste this into a plaintext file and save it with the file extension .appcache.
I usually save mine as "manifest.appcache".

Tip make sure the file isn't saved as manifest.appcache.txt. On a mac, select the file and select CMD-I to see the real extension and edit if needed.

Note every time you regenerate your prototype, some or all of these paths will change. You'll need to rerun this step.

6b. Cut out any injected unwanted filepaths.
This step is a pain, but you are going to want to scan the manifest file to check that no errors crept in.
One broken link = the entire thing fails.
Either Chrome or Axure always messes up my Manifest file and puts in a few lines of gibberish ("chrome-extension://sdfgseheshserh/style.css"). If you see any of these, cut the line.

7. Test the content of the manifest file.
Input it at manifest-validator.com> - which should point out most common problems.

8. Edit the HTML page of the prototype. You want to change the header:

<html manifest='manifest.appcache'>

Save.

9. Upload the modified HTML file and the manifest file.

10. View the modified page, refreshing as needed.
All being well, the browser has detected the manifest and has saved a local copy of the prototype.

11. Test the offline mode, in Chrome
Put this in the address bar: chrome://appcache-internals/
You should see a list of all the offline sites Chrome has saved. Hopefully, your prototype is among them.
If so, try comparing the size of the saved data with the size of the prototype on the disk - they should be a close match.
If there is a big discrepancy, then perhaps not all needed files have been saved.
Chrome tip via csimms.botony.com.

12. Test the offline mode, on an iPad.

  • Load the prototype in Safari.
  • Save it to Home page from the bookmark menu.
  • Run it from it's shortcut icon, let it run once.
  • Exit the app.
  • Go to Settings and enable Airplane mode, cutting you off from the internet.
  • Attempt to relaunch the app. If it gives you a warning about Airplane mode, ignore it.
  • The prototype should now appear and work as intended.

if instead you get an error about not being online, then likely your manifest has failed.

home
Adding an app to the homescreen

13. Fixing bugs.
The most likely thing to go wrong is that the manifest isn't complete or contains bad info, which will scupper the entire thing.
Use the validator manifest-validator.com to check.

If you prototype works for a while offline then starts failing, you might be out of local storage on the iPad. This often happens to me if I am making lots of changes and re-uploading many copies on the same domain name. If so, clean out the Safari cache Settings > Safari > Advanced > Website data > Edit (or remove all).

Alternatives

Don't want to fiddle around with HTML and server settings? I don't blame you. if you go to iTunes and look for iPad apps that save HTML for offline use, you'll find a bunch - like iSaveWeb, Goodreader, SiteSucker, and some of the alternative browsers.

But I only found one app that gives you a decent full-screen option and is free: Sites2Go Lite iTunes link

Big caveat: to get the app into full-screen mode, you don't press a button. You have to shake your iPad back and forth. I wish I was joking. This is extremely annoying, but you'll soon get the hang of it. Here's my tip: shake it gently but firmly 3 times.

Failing which, go with SiteSucker - it at least doesn't have very much chrome (about 30px at the bottom of the screen).

blog comments powered by Disqus