I've made a simple Web Application for the iPhone, it's just 6 pages each with an image on it and I use the Cube transition to switch between them, all static content.
I need this to work on an iPod Touch offline, i.e. visit it once, disconnect from WiFi, and then be able to browse the static site.
I'm trying to do this using the HTML5 manifest feature, but I'm clearly doing it wrong?
My Manifest file:
CACHE MANIFEST
index.html
main.css
main.js
Images/Appointments_Page.png
Images/backgroundStripes.png
Images/button.png
Images/button1.png
Images/button1_clicked.png
Images/button2.png
Images/button2_clicked.png
Images/button3.png
Images/button3_clicked.png
Images/button_clicked.png
Images/CloseIcon.png
Images/CloseIcon_pressed.png
Images/Efficacy_Page.png
Images/EfficacyGraph_Page.png
Images/Graph_Icon.png
Images/GraphIcon.png
Images/GraphIcon_pressed.png
Images/Home_Page.png
Images/Tolerability_Page.png
Images/TolerabilityTable_Page.png
Images/WebClipIcon.png
Parts/ButtonHandler.js
Parts/PushButton.js
Parts/setup.js
Parts/StackLayout.js
Parts/Transitions.css
Parts/Transitions.js
Parts/utilities.js
top of my HTML file
<!DOCTYPE HTML>
<html manifest="cache-manifest">
Hey I figured it out, leaving answer here in case it helps anyone else.
The problem I was having was that our server (IIS6) was refusing to serve my manifest file.
I had to add the MIME type ".manifest" using "text/cache-manifest".
Since then it's been caching fine, all 40+ files ranging from 1kb to 200kb.
Hope this helps.
I also wrote some tips on using the Manifest at: http://wecreategames.com/blog/?p=210
Other things to note: You need to reload the app TWICE to get the manifest's new contents, and you need to change the actual content of the manifest to force reloading the containing pages (I do this by changing a comment #v.03 to #v.04, or something similar).
As a note: Apple suggests:
"The HTML file that declares the manifest file ..... is automatically included in the application cache. You do not need to add it to the manifest file."
(https://developer.apple.com/library/content/documentation/iPhone/Conceptual/SafariJSDatabaseGuide/OfflineApplicationCache/OfflineApplicationCache.html#//apple_ref/doc/uid/TP40007256-CH7-SW2)
So it would work with leaving "index.html" out of the manifest list.
Related
I've got a repository on github with a .css file in it. Is there any way to have github serve this file in a way that I can consume it in a web page?
In other words, I'd like to be able to reference this source file at github directly, from an HTML file on my local computer or a live domain. Something like:
<link rel="stylesheet"
type="text/css"
href="http://github.com/foouser/barproject/master/xenu-is-my-lover.css"
/>
I've tried including a<link> to the "raw" source file (http://raw.github.com...), but github serves its Content-Type as text/plain, and consequently, Chrome and FF are not adding its content as CSS styles to the page—the file's data is being discarded and a warning is shown in the debugger consoles of the browsers.
Important: rawgit.com is shutting down. Read more about other alternatives here - https://rawgit.com/
Found something really cool. You get the raw link as: http://raw.github.com/...
Simply fetch the files from rawgit.com (or cdn.rawgit.com) instead of raw.github.com and DONE!
UPDATE:
You can also use raw.githack.com if you want to serves raw files directly from Bitbucket or GitLab
GitHub repos aren't web hosting, you should push that stuff up to a service specifically designed to serve files, like pages.github.com.
Check out https://gitcdn.link/ . Seems to work well.
Rawgit.com has shut down.
First Visit RawGit as suggested earlier
Next copy your file path from github into the RawGit box
RawGit will automatically produce two refrences to your web page
The Development and Production refrence
refrence the development link in your webpage if you are still developing
save/upload then reload your webpage
if there was no change it means your browser has saved your former refrence
clear your browser data then reload
Hope that helps?
You have to use RawGit which, is a part of MaxCDN, serve files directly from the GitHub repository with the correct content type header.
Full tutorial, click here
I have an iPhone web-app, and I want to know how to force a cache refresh.
My cache manifest is this:
CACHE MANIFEST
index.html
file1.css
file1.js
index.html is the meat of the application, so I put that in the cache. At this point, I seem to be boned, as I can't figure out how to get iPhone to invalidate the cache. Even going to Settings > Safari > Clear Cache doesn't work, although I'd like to be able to control this programatically. Removing index.html from the manifest and re-adding it seems to work, but I would have to know that all my clients had a clean hit of the updated manifest.
How do I cache index.html and still have it updated when it changes?
Off the top of my head, any change to the manifest will do the trick - and manifests can contain comments starting with #. Just add a random comment and it'll work.
It's a useful property, when I worked on an HTML5 application in a git repository I used to have the manifest automatically regenerated with a comment containing the HEAD hash after each commit so that the changes always propagate to the users.
There seems to be a bug in WebKit Browsers preventing them to reload the website on manifest changes, see this link
Have no clue for a workaround except when I call the index.html directly.
No chance for a iPad/iPhone-WebApp pinned to do the job...
Yes, you can use JavaScript to force Safari to reload cached resource files.
According to Apple, modifying the cache manifest file will cause Safari to reload any changed resource files. But those reloaded files won't be used by the browser until the user visits the site a second time. That delay can a pain, especially during development.
To force Safari to reload the cache contents immediately, Apple says you can use this JavaScript to manipulate the applicationCache object:
function updateSite(event) {
window.applicationCache.swapCache();
}
window.applicationCache.addEventListener('updateready', updateSite, false);
I can't get offline mode in iphone mobile Safari to work.
I have included my cache manifest file in the root of my directory.
<html lang="se" manifest="cache.manifest">
My cache.manifest looks like
CACHE MANIFEST
CACHE:
/images/background-iphonelines.png
/images/acne.jpg
/images/lisa.jpg
/images/bruno.jpg
/images/urban.jpg
/shops/acne.html
/shops/lisa.html
/shops/bruno.html
/shops/urban.html
/shops/shops.css
/style.css
script.js
guide.html
NETWORK:
*
I also included a .htaccess file in my root directory with the content
AddType text/cache-manifest .manifest
When I'm trying to open my app on my Iphone it still says "Can't open page" (or similar, have my page in swedish).
Does someone have any suggestions what I'm doing wrong?
Your mark-up and cache file look fine, but if the site won't go off-line there's a problem with the cache. It only has to fail on one element, and the whole thing won't work. Have you tried debugging your cache file? This post will help:
Jonathan Stark, Debugging HTML 5 Offline Application Cache
Note this won't tell you which asset causes the failure (if any), but it will tell you if your cache is working or not.
I actually had a similar issue yesterday. Try removing the CACHE: and just listing the items for the cache. I found this by accident and it seems to now work on IOS for me. Also, I added a comment field at the top to make sure I can invalidate the cache. I would give that a try.
I also had the same problem. I included the lines below in the cache.manifest file & it fixed for me.
NETWORK:
*
I was struggling for 2 hours with this and finally I've managed it! HORAY! I've added "/" to cache, this was the problem...
I'm working on a mobile site for the iphone. I've added a cache manifest and loaded it with a list of resources needed for offline capability. The manifest file has the correct content type. You can view the manifest file in the header of this page:
http://www.rvddps.com/apps/sixshot/booking.html
I had a bunch of links to pages but due to my user level i'm only allowed to post one link. You can see the manifest file there and the source code of the page i'm trying to cache.
I've set the correct MIME type on the server, but the cache only seems to work occasionally.. not all the time. I've tried following apples' official caching guidelines as well.
Can anyone point out where i'm going wrong?
Thanks
Daniel
I looked at the manifest file and found 'Â' characters in some of the blank lines. What text editor are you using? Make sure you use the proper encoding and line ending types.
I'm working on a mobile site for the iphone. I've added a cache manifest and loaded it with a list of resources needed for offline capability. The manifest file has the correct content type. If you view the response header for the file, the content type is text/cache-manifest. The manifest file is here:
http://hoodisgood.clientsit.es/cache.manifest
The site is viewable here (you'll need to take a look on your iphone (or simulator) or on Safari with user agent set to the iphone.
http://hoodisgood.clientsit.es/
After viewing the site and bookmarking it to the home screen, I set my iphone to airplane mode and when I try to view the site, I can't. I get an alert that it can't open because it's not connected to the internet. I've specified all the files I need for offline operation in the cache manifest file.
Also, correct me if I'm wrong, but with a cache manifest, shouldn't the browser read from the cached source even when the device is online? When I view the site, photos I haven't seen are loaded from the server, as it should be. When I close and reopen, previously viewed images are still loading from the server.
Am I doing something wrong? I checked and re-checked, everything seems to be correct, just not sure why it's not working.
Thanks.
I did notice that your tag did not reference the manifest.
<html manifest="cache.manifest">
Additionally, you need to ensure that the manifest file uses the "text/cache-manifest" mime type.
Also make sure that the manifest has UTF-8 encoding, and not some encoding that the browser has a hard time understanding.
Also I can recommend that you load the site in Chrome. If you check the developer log in Chrome, Chrome will write very helpfull error messages that will guide you to where the problem lies.
I did notice that your tag did not reference the manifest.
<html manifest="cache.manifest">
Additionally, you need to ensure that the manifest file uses the "text/cache-manifest" mime type.
I had a similar problem:
Try referencing absolute paths in your manifest file. This did the trick for me and I as well was using a sub domain.
Also enable your developer console in Safari and add the following JS
function logEvent(event) {
console.log(event.type);
}
window.applicationCache.addEventListener('checking', logEvent, false);
window.applicationCache.addEventListener('noupdate', logEvent, false);
window.applicationCache.addEventListener('downloading', logEvent, false);
window.applicationCache.addEventListener('cached', logEvent, false);
window.applicationCache.addEventListener('updateready', logEvent, false);
window.applicationCache.addEventListener('obsolete', logEvent, false);
window.applicationCache.addEventListener('error', logEvent, false);
Like this you can check what happens in regards to your cache manifest in the browser and learn if an error occurs.