My goal is to store resources and html pages using appcache or manifest file for offline usage for a grails app. For that we are using manifest attribute inside tag and are trying to link it to our cache manifest file. We followed these steps to use appcache inside html page:
1)- Added MIME type inside our config.groovy file
grails.mime.types = [
appcache: 'text/cache-manifest'
]
2)- Added manifest attribute inside html tag on that page which we need to cached.
My html page says (name.gsp) and name.appcache both are in same directory location.
3)- Inside name.appcache file we included resources (Javascript files,video links) which are being used by that page:
our cache manifest file which is linked by this page is shown below:
CACHE MANIFEST
# 28-05-02015
CACHE:
/assets/googleAnalytics.js
/assets/cptTest/smoother.js
/assets/cptTest/compatibility.js
/assets/cptTest/objectdetect.js"
/assets/cptTest/js_object_detect_test.js
/assets/cptTest/objectdetect_frontalface.js
http://code.jquery.com/jquery-1.9.1.min.js
http://fast.wistia.net/embed/iframe/es7g1ii56j
Problem:
The problem which we are now facing is that our manifest file is not being picked successfully to that page where it is being used. When we use window.applicationCache object on page load function of name.gsp to check status of application cache it always gives us status NOT CACHED or simple "UNCACHED".
So can anyone please tell me how can we reference cache manifest file to my html/gsp page inside grails application? As we have adopted the above mentioned procedure which is suggested by most of developer but we are still getting UNCACHED status ?
Related
I am trying to work with CACHE MANIFEST since there is still no full support for Service Workers across browsers.
I was using (SWPrecacheWebpackPlugin) and it worked well but on IOS service workers are not working. So I went back to use App Cache and used offline-plugin webpack plugin. Problem with this is that with SWPrecacheWebpackPlugin and can add external regex for dynamic images and other requests but I don't think this is possible with AppCache Manifest. Please suggest a way. I want to add a additional external pattern for image and html page, for example, a page with pattern /details-101, /detail-102 and all images that these pages have pattern like img.cdn.com/something/some.jpeg.
Sample App Manifest file
CACHE MANIFEST
#ver:3/1/2017, 0:00:00 PM
#plugin:4.6.1
CACHE:
/img/icons.ad7bcdc.png
/img/logo.a04e995.png
/img/logo.12c22c8.png
/vendor.bundle.js
/style.css
/details-*
https://fonts.googleapis.com/css?family=Montserrat:500,700
http://fonts.googleapis.com/icon?family=Material+Icons
NETWORK:
*
Here is my manifest :
CACHE MANIFEST
CACHE:
//code.jquery.com/jquery-2.0.3.min.js
NETWORK:
*
My index.html which defines that manifest (<html manifest="app.manifest>) is always stored as "Master" even with the NETWORK wildcard part of my manifest.
The problem is that my MASTER index.html is stored in the cache... and won't be refreshed if it changes on the server side if the manifest file is not updated.
I've seen multiple not really beautiful solutions to that problem (like the iframe solution), so my question is : is there a clean HTML 5 way to do this ?
The clean way to do it is to only have static content in your index.html file then load the data dynamically (eg. via AJAX) to create the page the user sees. An alternative would be to have a big link which says 'Enable Offline Support' which links to a page with the manifest link in it.
Other than that, the iframe solution is the cleanest way - you're hacking around the intended use of AppCache, why do you expect that to be 'clean'? What application scenario do you have that jquery-2.0.3.min.js needs to be available offline but not the index page of the app which accesses it?
I am trying to build a web app for iphone, and I don't understand
how to cache all the files under the "images" directory ?
and I modify one file on the server like "brandDB.txt", how to make the cache manifest update this file, and this file only to avoid downloading everything again ?
Thanks
CACHE MANIFEST
# 20131104-1430
index.html
brandDB.txt
icon.png
splashiphone.png
touch-icon-iphone.png
css/style.css
images/shareicon.png
images/bourez.png
images/john.png
...
NETWORK:
*
FALLBACK:
I did a program to easily generate the cache manifest file with the complete list directly from the Windows explorer, if you need it : http://matthieu.com/cmfg/
how to cache all the files under the "images" directory ?
List them all in the manifest file (easiest to use a script to generate the list if it's a lot of files).
how to make the cache manifest update this file, and this file only to avoid downloading everything again
Ensure your HTTP headers are set correctly for the frequency of updates you expect
Update the manifest file
The browser will populate the app cache from its own cache if you've set the headers on each file to allow caching. If you want to version control the files without using HTTP headers, add a query string to the end of the file, eg. brandDB.txt?v=1 - be sure to update the reference in the application if you do that, however.
Well, What I'm going to say, unfortunately is as Jake Archibald Said:
"Application cache is a douchebag !" (Good Article on how it works (not actually a douchebag))
http://alistapart.com/article/application-cache-is-a-douchebag
Basically, you could create a script to list all your files in your image directory
and paste it inside a generated AppCache File.
Application cache will only update when its file's content is changed , you'll also need ensure that the file itself is not cached.
I think you'll be needing your clients to reload the page twice for them to actually see the updates. (You could however using javascript tell the user that the page has updated and they'll need to refresh)
I am using a manifest file to cache my files. Between these files some are the index.html and some javascript libs.
After I tested my webpage , the files are successfully cached (i validated this with the web inspector), however when I open the page again the non-cached linked resources are not receiving response.
The link URL is ok because I can use the "copy link URL" option and paste the url in another browser tab and receive the response. But in my web page i am not receiving anything.
I tried using NETWORK: * with the same result.
Is this because the index.html shouldn't be cached if it has non-cached resources linked?
thanks in advance
The Fallback Header has to be on it's own line, like so:
NETWORK:
*
(new line after the colon).
Did you use the same template for the index.html and the uncached resources or including the entry somehow in those?
In that case you got the master entry for every page you don't want to be cached: every page that includes the manifest entry will became cached.
I'm testing offline web application in chrome 14. and listed some resource files in manifest such as:
CACHE MANIFEST
#version 1
./img/BG.jpg
./img/BtnDisable.gif
./img/BtnDown.gif
./img/BtnUp.gif
and after cache is loaded I replaced the "./img/BG.jpg" file to a new image, then changed the version of manifest file to 2, and finally refreshed page.
from the console, I can see "onprogress" event is triggered for each resource and finally "updateready" event is triggered. I called swapCache method in the listener of "updateready".
But after that , when I try to access "BG.jpg" in an Image tag or directly input it's URL in the address bar. the Image is still old "BG.jpg".
And I also found this issue in Safari 5.1. My web container is apache tomcat 7.
Do I misunderstand the offline mechanism and made some mistakes?
So How can I update the cached files of the client browser?
Try this:
CACHE MANIFEST
#version 2
./img/BG.jpg?v=2
./img/BtnDisable.gif?v=2
./img/BtnDown.gif?v=2
./img/BtnUp.gif?v=2