How to set up offline manifest for a web app to run in Safari in iOS?

Posted by ahmd1 on Pro Webmasters See other posts from Pro Webmasters or by ahmd1
Published on 2012-06-12T22:55:20Z Indexed on 2012/06/13 4:48 UTC
Read the original article Hit count: 265

Filed under:

web-applications

|

safari

|

ios

I'm currently trying to set up an offline.manifest file for my web app to be used offline on an iOS device. For testing purposes I have a very simple HTML page that I'm trying to add to a home screen. I'm testing it on a live iPhone 4, but after the page is added to the home screen and I put the iPhone in the airplane mode and try to start my web app I get this error:

"Turn Off Airplane Mode or Use Wi-Fi to Access Data"

and then if I click OK I get:

"Cannot Open Web App Name" "Web App Name could not be opened because it is not connected to the Internet"

The following is added to the HTML file:

<!DOCTYPE html>
<html lang="en" manifest="scrts/offline.manifest">

and the offline.manifest is composed as such:

CACHE MANIFEST

../pics/bkgnd_iphn_settings.png
../pics/mbl_btn_fb.png
../pics/mbl_btn_twt.png
../pics/icon_57_57_bg.png
../pics/icon_72_72_bg.png
../pics/icon_114_114_bg.png
../pics/icon_144_144_bg.png
../pics/splash_320_460_bg.png
../pics/splash_768_1004_bg.png
../pics/splash_1004_768_bg.png

I got all instructions on composing it from here

I also adjusted the .htaccess file to add this line:

AddType text/cache-manifest .manifest

Any idea what am I not doing right?

© Pro Webmasters or respective owner

Related posts about web-applications

Modularizing web applications

as seen on Stack Overflow - Search for 'Stack Overflow'
Hey all, I was wondering how big companies tend to modularize components on their page. Facebook is a good example: There's a team working on Search that has its own CSS, javascript, html, etc.. There's a team working on the news feed that has its own CSS, javascript, html, etc… >>> More
Adding AJAX Support to Windows Mobile Web Applications

as seen on Internet.com - Search for 'Internet.com'
In this article, you will learn how you can utilize AJAX scripts even in Web applications targeted for Windows Mobile applications. >>> More
Globalize your Web Applications: The Universal Character Set

as seen on Internet.com - Search for 'Internet.com'
This fourth article the Globalize your Web Applications series deals with something that's at the forefront of your web apps: the character sets. More specifically, we'll be taking a look at the Universal Character Set (UCS) and its role in creating multilingual web pages. >>> More
Globalize your Web Applications: PHP's Locale Formatting Classes

as seen on Internet.com - Search for 'Internet.com'
In part 3 of the Globalize your Web Applications series, we'll be exploring PHP's I18N_Number and I18N_Currency classes, both of which are part of the I18N Libraries. >>> More
Singleton pattern in web applications

as seen on Stack Overflow - Search for 'Stack Overflow'
I'm using a singleton pattern for the datacontext in my web application so that I dont have to instantiate it every time, however I'm not sure how web applications work, does IIS open a thread for every user connected? if so, what would happend if my singleton is not thread safe? Also, is it OK to… >>> More

Related posts about safari

MP4 plays on Safari 4 (desktop) but not on Safari Mobile (iphone)

as seen on Stack Overflow - Search for 'Stack Overflow'
I'm encoding the video with ffmpeg and displaying it using the HTML 5 video tag. It works fine on Firefox (i'm also providing a ogg version) and Safari 4. However, when I try to open it on the iphone I get a "Cannot Play Movie" error. Here is the ffmpeg command I'm using: ffmpeg -y -i movie.mov… >>> More
Positioning 1px off in Safari/Mac but works on Safari/Windows

as seen on Stack Overflow - Search for 'Stack Overflow'
I'm beating my head against a wall on this one; the logo image ("It's All About Revenue") shifts up by one pixel in Safari on Mac, but renders correctly in all other browser/OS combinations I've been able to test. Does anyone have any ideas on why this might be? Here's the site: http://blog.eloqua… >>> More
Safari extensions: style of selectbox like safari's bookmark folders

as seen on Stack Overflow - Search for 'Stack Overflow'
Hey guys, I'm developing an extension for Safari 5 at the moment. In my extension, I use an additional toolbar, with selectboxes in it. Now, it would be great to style these like the folders in the bookmarks toolbar look. I know that it would be possible to replace my select with a completely styleable… >>> More
How to Use and Manage Extensions to Safari 5

as seen on How to geek - Search for 'How to geek'
While there have been hacks to include extensions in Safari for some time now, Safari 5 now offers proper support for them. Today we take a look at managing extensions in the latest version of Safari. Installation and Setup Download and install Safari 5 (link below). Make sure to download the installer… >>> More
Bug with audio reCaptcha in safari

as seen on Stack Overflow - Search for 'Stack Overflow'
Hi all, Can other Safari users please test http://recaptcha.net/learnmore.html for me, to see if the audio reCaptcha plays properly? On my machine, I can only hear the audio if I click the Download sound as MP3 link. I also don't get the spoken introduction at all. It works OK in Firefox and Chrome… >>> More