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?
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:
*
I am trying to make an xPages desktop application work offline, the challenge is how to make all the require resource available offline.
i have created the following manifest file and specified the same in pageManifest .
CACHE MANIFEST
#version: 0.0.15.7
jquery-1.10.2.min.js
angular.min.js
/DbPath/Angular.nsf/trashicon.gif
/DbPath/Angular.nsf/editicon.gif
/xsp/.ibmxspres/.mini/css/#Da&#Ib&2Tfxsp.css&2TfxspLTR.css&2TfxspSF.css.css
/xsp/.ibmxspres/dojoroot-1.6.1/dojo/dojo.js
/xsp/.ibmxspres/.mini/dojo/.en-us/#Iq.js
/DbPath/Angular.nsf/xsp/.ibmmodres/.css/bootstrap.min.css&custom.css
/DbPath/Angular.nsf/xsp/.ibmmodres/.js/jquery-1.10.2.min.js&bootstrap.min.js&angular.min.js&angularMisc.js
NETWORK:
/xsp/.ibmxspres/
/domjs/dojo-1.4.1/
/domjava/xsp/
I am not sure it is correct, it cache following image / Lib
/DBPath/Angular.nsf/trashicon.gif
/DBPath/Angular.nsf/editicon.gif
/xsp/.ibmxspres/dojoroot-1.6.1/dojo/dojo.js
/xsp/.ibmxspres/.mini/dojo/.en-us/#Iq.js
and the main page...
but it does not cache the
/DBPath/Angular.nsf/xsp/.ibmmodres/.js/jquery-1.10.2.min.js&bootstrap.min.js&angular.min.js&angularMisc.js
which is important, may b i am doing it wrong. Also how can we cache the oneui theme .
i am using Angular JS/JQuery which works fine when not cached, but it do not work with the manifest
if their is any simple example please share the link.
What part of the app do you want to make available offline?
If you're using full or partial updates, Server Side JavaScript and other server based stuff it cannot work offline.
Although this refers to Mobile apps it does have a sample showing you how to use HTML5 offline mode in XPages.
http://mobilecontrols.openntf.org
Offline.nsf contains basic HTML5 samples for how to do offline with XPages. MobileControlsOffline.nsf shows how to take a Dojo based mobile app offline.
The definition of a manifest makes an interesting read, as well as the URL document with the section about valid URLS.
As far as I know & is not a valid URL character if is isn't part of a parameter string that starts with ?.
So there are a set of actions you can try:
Switch off js/css combination. Since the files get cached locally anyway you don't benefit from it
Try (it might work) to replace & in the manifest with &
Let us know how it goes.
I did some tests (using Domino Designer) with Firefox and Chrome and it seems that everything can be cached in these browsers. My sugestion:
Instead of
/DBPath/Angular.nsf/xsp/.ibmmodres/.js/jquery-1.10.2.min.js&bootstrap.min.js&angular.min.js&angularMisc.js
Try a relative path without /
xsp/.ibmmodres/.js/jquery-1.10.2.min.js&bootstrap.min.js&angular.min.js&angularMisc.js
I used relative paths everytime. This is the cache manifest file used in my tests (all files were cached successfully):
CACHE MANIFEST
# 2013-01-07 v1.0.0
xsp/.ibmmodres/.js/js%2Fvendor%2Fmodernizr-2.6.2-respond-1.1.0.min.js&js%2Fvendor%2Fjquery-1.10.2.min.js&js%2Fvendor%2Fbootstrap.min.js&js%2Fvendor%2Fhandlebars.runtime-v1.1.2.js&js%2Fplugins.js&js%2Fmain.js
xsp/.ibmmodres/.css/css%2Fbootstrap.min.css&css%2Fbootstrap-theme.min.css&css%2Fmain.css
xsp/.ibmmodres/.js/jquery-1.10.2.min.map
/xsp/.ibmxspres/.mini/css/#Da&#Ib&2Tfxsp.css&2TfxspLTR.css&2TfxspSF.css.css
/xsp/.ibmxspres/dojoroot-1.6.1/dojo/dojo.js
/xsp/.ibmxspres/.mini/dojo/.es-es/#Iq.js
/xsp/.ibmxspres/.mini/dojo/.es/#Iq.js
NETWORK:
*
I am testing HTML5's offline capabilities, and the cache seems to be a bit overactive. My cache.appcache file is as follows:
CACHE MANIFEST
CACHE:
#v1.4
js/js.js
NETWORK:
network2.html
FALLBACK:
/ offline.html
Basically I want to only display network2.html when the web is available - otherwise it should fall back to offline.html.
However, if I have accessed network2.html with the web connection live it keeps displaying it when there is no connection - surely it should fall back to offline.html? I thought only pages referenced in the CACHE section should be cached in the first place anyway?
I have tried in multiple browsers, clearing the browser data, refreshing multiple times etc.
Sorted it - it turns out that any file whose html tag references the manifest will be cached itself, whether or not that file is mentioned in the CACHE section. This even overrides if it is referenced in the NETWORK section.
Thanks to robertc on this answer which gave me the tip.
In short, you only need to have one reference to the manifest, usually in your 'default' view, not all files that may be referenced by the manifest itself. Not very clear in the HTML5 docs.
I have been trying to figure out HTML5's new AppCache, but I feel extremely limited here.
Let's assume that I have a website with four pages:
index.html
about.html
portfolio.html
contact.html
I have the above resources outlined in the manifiest, along with all of the website's resources. The manifest looks like the below:
CACHE MANIFEST
# 2013-05-23 2:33 PM
# Master Manifest
index.html
about.html
portfolio.html
contact.html
styles/reset.css
styles/styles.css
NETWORK:
*
I have added the appcache file type to the server configuration and have used the correct HTML tag attribute on each page listed above. Just for the record, the element looks like so:
<html lang="en" manifest="example.appcache">
I have tested this setup out on my mobile device, and everything works perfectly fine... Unless I don't load every page. It seems that I have to go to each page and cache it via my mobile browser, after which I may turn off DATA and go offline for my device to be able to browse the APPCACHE'd website.
But, here's my question - How do I setup AppCache to allow me to go to index.html, cache that page, and cache the rest of the resources in the manifest? Without having to visit and manually cache each resource?
If you cannot, then I would have to ask; doesn't that sort of defeat the idea behind AppCache and Offline Accessibility?
Thank you so much for the help all! :)
You shouldn't need to visit every page. I know you mentioned you've set the MIME type in Apache, but are you 100% certain it's working correctly?
You can check it by opening your manifest in a browser and checking the Response Headers in Chrome Web Inspectors's Network tab:
Content-Type should be text/cache-manifest
It's a bit hard to debug without having access to your site, but here's some instructions for how to interpret what happens in Chrome's Web Inspector with AppCache to help you debug the problem yourself:
The Resources tab will show you the contents and status of the Application Cache. It looks like this whilst it's downloading files:
The console will also log events when it's downloading:
Application Cache Progress event (0 of 48) http://cachedfile.url
Once it's done downloading it'll look like this and show you the list of cached files:
When you go back it'll log three events (assuming there aren't any changes):
Document was loaded from Application Cache with manifest http://manifest.url
Application Cache Checking event
Application Cache NoUpdate event
And then when you're offline it looks like this:
Hopefully between the console and the appcache table you'll be able to figure out what's happening.
The manifest file is correct and you do not need to visit each page to get in cache in your mobile. You could try if this is a problem with your mobile or browser and if you have defined in your server text/cache-manifest MIME type.
The appcache will only store the cache the first time it's downloaded. It's just a list of files that says, when it's downloaded the first time, cache it.
What you could do is after load in the background do an ajax call to load each of the intended resources but it's not particularly pretty.
So looks to me like it's acting how it should be.
CACHE:
This is the default section for entries. Files listed under
this header (or immediately after the CACHE MANIFEST) will be
explicitly cached after they're downloaded for the first time.
http://www.html5rocks.com/en/tutorials/appcache/beginner/
Ahmed
I get the following when visiting your site:
Creating Application Cache with manifest
http://www.iamaaron.com/appcache/example.appcache
Application Cache Checking event
Application Cache Downloading event
Application Cache Progress event (0 of 6)
http://www.iamaaron.com/appcache/styles/reset.css
Application Cache Progress event (1 of 6)
http://www.iamaaron.com/appcache/index.html
Application Cache Progress event (2 of 6)
http://www.iamaaron.com/appcache/contact.html
Application Cache Progress event (3 of 6)
http://www.iamaaron.com/appcache/attendees.html
Application Cache Progress event (4 of 6)
http://www.iamaaron.com/appcache/events.html
Application Cache Progress event (5 of 6)
http://www.iamaaron.com/appcache/styles/styles.css
Application Cache Error event: Resource fetch failed (404)
http://www.iamaaron.com/appcache/styles/styles.css
So, it looks like it's working correctly despite the Content-Type being empty, except for the CSS file which seems to be missing (the URL is wrong, it should be main.css by the looks of things).
BUT my developer tools don't show the app cache being filled and it doesn't work when it's offline.
Try and fix your 404 error with the CSS and make sure your apache it configured correctly to return the correct Content-Type, I reckon that's what's causing issues.
I'm working with cache manifest and im new in this topic, but i made some testing with static pages, but now i wanna try with a page with a form that send data to another page that use a post variable, i add the pages in cache manifest but it doesnt work.
What does not work? The pages don't get cached?
Or doesn't the new page resolves the variables? In that case it's normal because POST variables could only become parsed by a server. And with GET its a hell of getting all URLs into the manifest.
If that is your problem: use local storage instead to transfer the variables from one page to another:
HTML5 Local Storage – Complete Guide