I have been working on a web app that should run offline and be accessible by clicking an icon on the home screen (iPad iOS 6.1.3). The problem is that I am not able to cache all the necessary files. Here's my cache.manifest file (paths are correct, no type'os):
CACHE MANIFEST
CACHE:
index.php
first.html
second.html
images/forward.png
images/backward.png
images/info.png
style/light.otf
style/main.css
scripts/main.js
NETWORK:
*
The HTML's included are the next pages. So, am I right: I have to include all the required .php, .html, .css, .png, etc. in the index.php which is my entry point. I read some articles about this and also created .htaccess file:
AddType text/cache-manifest .manifest
Implementation in HTML:
<html manifest="cache.manifest">
Error:
"...because it is not connected to the internet"
I have been stuck in this for a few days. Any help would be great!
Thanks in advance
Related
I am developing a HTML5 web app for use offline on an iPad2 using mobile Safari and the "Add to home screen" feature. I am able to achieve offline caching using a cache.manifest file in desktop Chrome but cannot make it work in iOS mobile Safari.
The app runs smooth on the iPad while online, but once I go offline I get these error messages: "MyApp could not be opened because it is not connected to the internet" (in "added to home screen" view on an iPad) and "Safari cannot open the page because it is not connected to the internet" (in safari-view on that same iPad).
I have read hundreds of troubleshooting / question pages and manifest tutorials on the Net trying to resolve this issue and none of the suggestions work. After reading so much about this capability it should be very easy to implement and yet here I am.
Here is a summary of what I have done / tried / used so far without success. I have tried all of the below using both cache.manifest and manifest.appcache variations without success but for simplicity I will only document the cache.manifest case:
I am developing and testing using latest Xampp Apache for Windows server locally installed on Win10 x64
The target device is an iPad2 running iOS version 8.4 and mobile safari version 8. My full user agent string is:
Mozilla/5.0 (iPad; CPU OS 8_4 like Mac OS X) AppleWebKit/600.1.4 (KHTML, like Gecko) Version/8.0 Mobile/12H143 Safari/600.1.4
In Xampp I have updated the httpd.conf file to include the correct MIME types for .manifest
AddType text/cache-manifest .manifest
In Xampp I have updated the mime.types file under xampp\apache\conf\ to include the correct MIME types for .manifest
text/cache-manifest manifest
In Xampp, as my web app uses ttf, woff, ico, png, jpg, js, mp3 and css files, I have verified the mime.types file under xampp\apache\conf\ to ensure it includes the MIME types for:
application/x-font-ttf ttf ttc
application/x-font-woff woff
image/x-icon ico
image/png png
image/jpeg jpeg jpg jpe
application/javascript js
audio/mpeg mpga mp2 mp2a mp3 m2a m3a
I have placed a .htaccess file in the web apps root public HTML directory for the correct MIME types for .manifest
AddType text/cache-manifest .manifest*
I have included the manifest attribute in the HTML element of the index page:
<!DOCTYPE html>
<html lang="en" manifest="cache.manifest">
<head>
I've tried removing this line from the declaring index.html but it did not work:
<meta name="apple-mobile-web-app-capable" content="yes">
I've allowed plenty of time for the app to cache in Safari before switching to Airplane mode and refreshing. I am using a Windows machine so cannot use Web Inspector to debug. I used Jonathan Stark's Debugging Script and JSConsole to try and debug but it doesn't really give much useful information except that it is uncached which I know because it isn't working.
I have created a cache.manifest file and placed it in the web apps root public HTML directory. I have included the advice of other solutions, many of which where derived from other stackoverflow questions, including:
Primarily I've stuck with the cache.manifest name as multiple sources have advised Safari mobile will igrnore everything else
Not including the index.html file which references the .manifest
Listing all resources under the CACHE section
Including the * after NETWORK:
Including all section headers even if not used
Used only relative URI's
The manifest file contents are relative to the manifest file (it is in the web apps root directory with index.html)
The manifest file is being served from the same origin as the host
Ensured all files are available to avoid errors and dropping the .manifest. As I mentioned offline caching is working in desktop Chrome which validates the manifest's contents
The manifest file does not list the manifest file
The content of the manifest is:
CACHE MANIFEST
# ver 0.0.8
CACHE:
data/apple-touch-icon.png
data/favicon.ico
data/fnt0.ttf
data/fnt0.woff
data/fnt1.ttf
data/fnt1.woff
data/fnt2.ttf
data/fnt2.woff
data/fnt3.ttf
data/fnt3.woff
data/html5.png
data/html5-unsupported.html
data/img0.jpg
data/img1.png
data/img10.jpg
data/img11.jpg
data/img12.png
data/img13.png
data/img14.png
data/img15.png
data/img16.jpg
data/img17.png
data/img18.png
data/img19.png
data/img2.png
data/img20.png
data/img21.png
data/img22.png
data/img23.png
data/img24.png
data/img25.png
data/img26.png
data/img27.png
data/img28.png
data/img29.png
data/img3.png
data/img30.png
data/img31.png
data/img4.png
data/img5.png
data/img6.png
data/img7.png
data/img8.png
data/img9.png
data/player.js
data/slide1.css
data/slide1.js
data/slide10.css
data/slide10.js
data/slide11.css
data/slide11.js
data/slide12.css
data/slide12.js
data/slide13.css
data/slide13.js
data/slide14.css
data/slide14.js
data/slide15.css
data/slide15.js
data/slide16.css
data/slide16.js
data/slide17.css
data/slide17.js
data/slide18.css
data/slide18.js
data/slide2.css
data/slide2.js
data/slide3.css
data/slide3.js
data/slide4.css
data/slide4.js
data/slide5.css
data/slide5.js
data/slide6.css
data/slide6.js
data/slide7.css
data/slide7.js
data/slide8.css
data/slide8.js
data/slide9.css
data/slide9.js
data/sound1.mp3
NETWORK:
*
FALLBACK:
I would really appreciate some fresh eyes on this issue, I just can't see where the problem could be.
Can you try to decrease the size of cached files? In my case it helps, but not solved all the problems) Cached files size was at least 30 Mb, after weight loss they become <1 Mb and AppCache finally start working.
I have published a Captivate 6 file in swf format. In one the slides is a button, that when clicked executed a small piece of javascript code to open a url , using the window.open command. This link opens fine, when i publish the project as a html5 output, ie mp4 file. however , when I publish it as swf, nothing happens on clicking the button. I read somewhere that flash security settings need to be updated and you need to add the folder where swf file is , as a trusted folder. I did that but still it does not work. Then I read that this problem comes only while developing since the flash player blocks access to local files and folder, so I published this swf on a web server on , but again same problem. Would be very grateful if anyone can provide some way to solve this. Thanks.
I'm using Captivate 7 and have had countless problems with javascript, but anyways... I'll avoid ranting about that.
When you publish it as an swf are you loading it from the .htm file? I've noticed that JavaScript only "worked"(haha, if you could...ok, no ranting..) by loading it in the .htm file. When I loaded the swf directly locally or from a web server it wouldn't work.
There are three or four files in Captivate 7: swf, htm, css, and js file.
When I put all of those on the web server, and load the .htm file JavaScript... uh, "worked'.. yeah
I have to hide my iOS app on my Apache server (exactly the folder with app and .plist) and I tried with permission (750) but the link for download the app doesn't work:
Download App
How can I hide the folder and in the same permit the download of app?
If you have the index module of Apache enabled (which is per default) Apache shows you an index when browsing a directory without an index.html (or similar) file.
To disable this behaviour add the following line to your .htaccess file:
Options -Indexes
If you do not have an .htaccess file yet, just create a blank file in the directory you want to hide and the add the line.
If you just want to hide all files with the ending plist and app from the index add the following line to your .htaccess instead:
IndexIgnore *.plist *.app
I have a typical phone gap application with an index.html and assorted other .js and .css files in the /www folder.
Now, how should I go about updating these javascript/css files? (Other than pushing a new app). I thought I might use a cache manifest, but that requires them to be on the same domain so I don't think that will work...
The only thing I can come up with is source online copies of the scripts after the local ones, overriding all the function definitions in the local file, but that seems really lame.
<script src="script.js"></script>
<script src="http://online.com/script.js></script>
put your code won googlecode.com , update your javascripts there , link your app add the external host in your phonegap.plist to match *.googlecode.com and alter your code in there, it will automatically update the app with the new one
Does iPad Safari cache JavaScript files? It seems to be no. If my Safari doesn't cache scripts, how can I make it to do that?
Creating a Manifest File (See here for declaring a manifest file)
The manifest file specifies the resources—such as HTML, JavaScript, CSS, and image files —to downloaded and store in the application cache. After the first time a webpage is loaded, the resources specified in the manifest file are obtained from the application cache, not the web server.
The manifest file has the following attributes:
It must be served with type text/cache-manifest.
The first line must contain the text CACHE MANIFEST.
Subsequent lines may contain URLs for each resource to cache or
comments.
Comments must be on a single line and preceded by the # character.
The URLs are file paths to resources you want to download and cache
locally. The file paths should be relative to the location of the
manifest file—similar to file paths used in CSS—or absolute.
The HTML file that declares the manifest file, described in Declaring
a Manifest File, is automatically included in the application cache.
You do not need to add it to the manifest file.
Excerpt from:
https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/Client-SideStorage/Client-SideStorage.html
More info about the HTML5 Offline Application Cache