Only cache images with app cache - javascript

Is it possibly to only cache images in the html5 app cache?
My manifest which almost works!
CACHE MANIFEST
#Version: 4
CACHE:
Public/Images/about.png
Public/Images/android.png
Public/Images/back-hover.png
Public/Images/back.png
Public/Images/contact.png
Public/Images/HTML5.png
Public/Images/info.png
Public/Images/linkedin.png
Public/Images/mail.png
Public/Images/message.png
Public/Images/portfolio.png
Public/Images/profession.png
Public/Images/ram.png
Public/Images/stack.png
Public/Images/tile.png
Public/Images/vs.png
Public/Images/About/me.jpg
NETWORK:
*
FALLBACK:
The issue is that the landing page of my website is also getting cached, this means when I update the content the user isn't receiving the content.
I could force a manual update of all cached files by incrementing the version number in the cache, but it's not ideal as my main pages content is dynamic.

Use an iframe to load a static HTML file which references the manifest.

Related

Trigger prefetching after page is fully loaded

My scenario is:
user visits domain.com (home page)
domain.com/products page contains large image library and quite large CSS and JS libraries
when user visits domain.com and the home page has fully loaded, we start to prefetch resources & if possible at least some % of images from the archive.
Currently on some pages JS "eats" quite a lot of resources therefor triggering prefetch in some cases during page load is not the best answer - as it will cause a small lag when user interacts with JS created events and elements.
My questions are:
Is it even possible (will it work) to trigger <link rel="prefetch" href="image.png"> or CSS file to be added to <head> so it can prefetch data from another page after current page is fully loaded?
Should I do it similar like rendering additional stylesheet using JS where I add new tag within <head> as a stylesheet file so it can then render.. or is there another way?
You might use Cache Storage to prefetch (precache) assets. I work on an open-source project which uses this approach. Although, to serve precached assets you need a service worker. The logic of finding assets in my project looks like this.
The demo of this project is here. Also, I wrote an article which explains technical details of the project.
Assets get prefetched once the lib is loaded, so I don't wait for the entire page load. Maybe I should use requestIdleCallback to wait until the browser is idle.
Hopefully, it gives you some inspiration.
Just to note that you could add aditional stylesheet after the page load completly or whenever you want with somethig like this:
document.addEventListener("DOMContentLoaded", function(event) {
var script = document.createElement("link");
script.rel = "stylesheet";
script.href= "stylesOfAnotherPage2.css";
document.getElementsByTagName("body")[0].appendChild(script);//or head
});
When you load page1, stylesOfAnotherPage2.css is cached, so when page2 is called, stylesOfAnotherPage2.css is already cached if page2 call the same file.
You might use HTTP Caching and Link prefetching to use your browser idle time to download or prefetch documents that the user might visit in the near future.
Prefetching hints
The browser observes all of these hints and queues up each unique
request to be prefetched when the browser is idle. There can be
multiple hints per page, as it might make sense to prefetch multiple
documents. For example, the next document might contain several large
images.
<link rel="prefetch alternate stylesheet" title="Designed for Mozilla" href="mozspecific.css">
<link rel="next" href="2.html">
Also, you can read this thread:
Preload, Prefetch And Priorities in Chrome
There you can read the different states and priorities about the execution, load and preload times, some tips to improve them.
preload of CSS and JS using https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content might be a good fit and has good support in most modern browsers: https://caniuse.com/#search=preload
There are probably better solutions, such as the one suggested by #soulshined, but another crude way to do this is the other page contains etags or cache control headers would be to use AJAX to send requests to the resources you expect to load. This would cause the browser to request those resources and prefill the user agent cache so that when the user requests that resource on the other page there is a higher change the cache would contain the resources and it'd load faster than if it had to fetch everything for the first time.
To prefetch assets there are some prefetching methods such as DNS-prefetch, pre-connect, pre-render & prefetch. As per the requirement, you may use them appropriately. Each method has its own purpose this would be useful to know each one specifically.

Cache does not work properly

im using HTML5 feature cache manifest and it seems to be not working properly when i am offline and trying to access the webpage. Problem is that it tries to get jquery library from google website, although it should be cached. As result webpage does not work properly due to absence of jquery libraries
Here is my webpage:
http://www.tud.ttu.ee/web/Evald.Tali/movies/
Supposed to load offline.html when offline
Here is my cache file:
CACHE MANIFEST
#updated on 22/2/2015 7:10PM
#updated cache, added links to jquery
CACHE:
index.html
CSSfile.css
script.js
jquery-1.11.2.min.js
jquery.mobile-1.4.5.js
jquery.mobile-1.4.5.css
offline.html
https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.css
https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js
https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.js
OFFLINE:
/ /offline.html
NETWORK:
*
Thats because the cache works for same origin resources only. You can't specify external files in your cache manifest. See the answer here for more information:
App cache manifest on CDN?

Offline cache - html5

Ok I have a problem with my cache, and just can't figure it out D:
Every time I try to reload the page (To get cache), I get this error: Application Cache Error event: Failed to commit new cache to storage?
Someone who know why this doesn't work?
Links (In case you want to see yourself):
Index.php
Cache file
.htaccess: AddType text/cache-manifest cache
Some files in you cache-manifest don't exist (404).
According to the spec. if not all files can be retrieved the new cache will not be used/committed.
It seems you are using Chrome. Your application cache might be broken. Try clearing it but entering the following to address bar:
chrome://appcache-internals/

Problem While Doing html5 webapp cache

I have a webapp which has the domain http://draft.mo2do.com
when i am accessing the url it will resolve like the below url and redirect to the corresponding site home page
http://draft.mo2do.com/s/_91665/Home
Here i implemented offline cache. My cache.manifest file is the below
CACHE MANIFEST
# Offline cache v4.0
# All other resources (e.g. sites) require the user to be online.
NETWORK:
*
# Additional resources to cache CACHE:
# Add the pages in to the cache
/s/_91665/Home /s/_91665/CachedDraftBoard
http://draft.mo2do.com
# Add the images in to the cache
/s/store/-1/webapp/styles/webapp.css
/s/store/-1/webapp/styles/nba_draft.css
/s/store/-1/webapp/styles/add2drafthome.css?v2
# Add the js files in to the cache
/s/store/-1/webapp/scripts/jquery-1.5.min.js
/s/store/-1/webapp/scripts/iscroll.js
/s/store/-1/webapp/scripts/webapp.js
/s/store/-1/webapp/scripts/nba_draft.js
/s/store/-1/webapp/scripts/cacheUpdate.js
/s/store/-1/webapp/scripts/add2drafthome.js?v0.9.4
/webapp/icon.png /webapp/startup.png
/s/store/-1/webapp/nba/addtodrafthome/arrow.png
/s/store/-1/webapp/nba/addtodrafthome/close-bubble.png
/s/store/-1/webapp/nba/addtodrafthome/icon.png
/s/store/-1/webapp/nba/addtodrafthome/plus.png
/s/store/-1/webapp/nba/addtodrafthome/share.png
FALLBACK:
http://draft.mo2do.com
If i am directly accessing the site url the caching is working and that time i didnt mention the "http://draft.mo2do.com" in the cache section.During this time offline cache is working fine.
If i directly access only the domain url "http://draft.mo2do.com" in the browser it is not opening 404 in the offline mode.
Then i added the "http://draft.mo2do.com" in the cache section that time i am getting exception
Application Cache Progress event (2 of 3) http://draft.mo2do.com/ Application Cache Error event: Resource fetch failed (-1) http://draft.mo2do.com/
If i access the domain also it should load the app in the offline mode. If i access direct url app is loading fine.
How can I solve this issue?
The cache has to directly reference specific resources, be they Javascript, CSS, HTML pages, images, whatever. From what I can tell from the content above, you've done that. Simply placing a domain in there however won't work (you also need to reference all of the pages you want off-line, e.g. /s/_91665/Home needs to be in there).
So, there's an error somewhere along the line, but it's hard to figure out what you mean by this:
If i directly access only the domain url "http://draft.mo2do.com" in the browser it is not opening 404 in the offline mode.
Can you be more clear? Do you mean that going to that URL results in a 404, or is there something in the page itself that's in error?
Are you sure that your cache file is functioning as intended? If there are any errors at all in your cache file, your off-line application simply won't work. This page offers some debugging code which may help:
Debugging HTML 5 Offline Application Cache

html5 manifest fetch failed (-1)

I am developing a web app in which I am trying to use the HTML5 application cache.
I am running the application on apache tomcat 7. When the server is running it's OK; file downloads in Google Chrome and I get cached or update ready event. But once I shut down the server and refresh the page, I get an error manifest fetch fail (-1).
How to get over this error and why does it occur?
my manifest file is as follows(sample.manifest):
CACHE MANIFEST
# version 4
CACHE:
css/styles.css
js/script.js
js/jquery-latest.js
js/jquery.validate.js
img/blue-line.png
img/main-img.png
img/logo.png
img/green-li.png
img/gline2.png
img/gline3.png
img/gline4.png
img/gline5.png
img/diversity-img.jpg
img/facebook32.png
img/mail40x32.png
img/main-img-298.png
img/ppl-img.jpg
img/twitter32.png
leavevbc.html
diversity.html
NETWORK:
*
I added the correct MIME type but I'm still getting the problem.
The manifest load fail error is exactly what you have to expect if the server can't be reached. The manifest can't be loaded. It's a little bit confusing that this is reported as an error - but that's what the standard says. All you have to do is ignore the error and you should have an offline cached webapp.
In Chrome, inspect all your app cached items. You may be surprised to see that what is inside of your cached files are not what you put into them. I've run into this exact situation. I had a javascript file that contained my FALLBACK: offline.html page. The Webkit cache loader has issues when the type of content its loading is not what it expects. To me this is just wrong, but on the upside, it did reveal the problem. In my case, it looked in my js file and crimped when it saw the at the top of the file.
If there are resources that must be pulled when online only then list them in NETWORK: section.
To fix current situation do following:
clear out your browser cache
change comment at top of your manifest file so that new copy will be downloaded
fire up chrome with developer tools
pull down web page while online
inspect your chrome application cache files again
go offline and browser refresh
http://www.html5rocks.com/en/tutorials/appcache/beginner/

Categories