By providing FALLBACK, I expect the wifi.svg to be replaced with nowifi.svg when it is loaded from cache. it is not working as expected.
Here is my cache manifest file.
CACHE MANIFEST
# Version 0.1.3
index.html
CACHE:
images/nowifi.svg
NETWORK:
images/wifi.svg
FALLBACK:
images/wifi.svg images/nowifi.svg
When I'm offline, I only see missing image in place of cached nowifi.svg
I thought, since I never request nowifi.svg could be the problem, just added a hidden <img src="images/nowifi.svg" /> still no luck.
I could not able to figure out what is the issue.
For complete project: https://github.com/palaniraja/kmusic/blob/master/src
You should remove wifi.svg from the NETWORK section of your manifest, for the fallback to work:
CACHE MANIFEST
#Version 0.1.3
index.html
CACHE:
images/nowifi.svg
FALLBACK:
images/wifi.svg images/nowifi.svg
This might feel a bit counter-intuitive at first, but an explicit NETWORK entries take precedence over the fallback entries, which is why your fallback is never applied and the image is missing.
The browser is also smart enough to recognize that the left side of the FALLBACK entry is to be re-checked with the server, and will properly replace it with a fallback image (instead of just using a cached copy),
when it is offline.
It will also normally automatically cache the right hand side of the FALLBACK entry (i.e. nowifi.svg), so you may omit it from the CACHE section as well (through it won't affect anything).
Also note that in my experience the "Work Offline" functions of Google Chrome "Developer Tools" and Firefox, sometimes tend to produce all kind of weird results when it comes to cache and the offline apps, so you better just switch your web server or connection on and off instead, when testing this.
I'm implementing an appcache in my application and I have a lot of problems with setings it correctly.
For this specific moment I have problems to determine, if files loaded are for sure from the appcache and not from the regular cache?
Can someone provide me with links/tips how can I check that? E.g. in Chrome in the dev tools in Network tab there is placed a (from cache) text for cached resources, but how can I know this is the correct cache?
In Firefox sometimes on files which should be cached in appcache I have nitification in Firebug, that they are loaded from BFCache not AppCache and something like tjat houldn't happen.
So once again, can you provie me with e.g. some plugins for popular browsers (IE, Firefox, Chrome) to check that?
You explicitly declare a page to be cached by the AppCache by referencing a manifest file so you can be sure its using AppCache. A manifest file is
simple text file that lists the resources the browser should cache for
offline access.
and,
The manifest attribute should be included on every page of your web
application that you want cached.
<html manifest="example.appcache">
....
</html>
http://www.html5rocks.com/en/tutorials/appcache/beginner/
BFCache on the other hand is specific to Firefox (other browsers have similar implementation) and serves its purpose differently from AppCache.
AppCache helps your web apps be accessible offline while BFCache speeds up your backward and forward page navigation between visited pages.
You will no longer require any plugins aside from Firebug and the browser's built-in Developer tools if AppCache is implemented correctly
I created a webapp which should always use the most current files and don't cache anything. BUT when the client goes offline, it should present the "offline.html" which continuously tries to load the "index.php" every 30sec.
Here is the thing: my index.php gets also cached because it has the manifest tag. But this messes up the functionality of my webapp.
So I wanted to ask, what are the best solutions to use the cache manifest only for providing a fallback, not for caching anything else?
index.php
<html manifest="/cache.manifest">
cache.manifest
CACHE MANIFEST
FALLBACK:
/ /offline.html
NETWORK:
*
I've found this solution here https://stackoverflow.com/a/19974768/1311566 where the guy uses an iframe to load an html with the manifest tag in it so that the index.php doesn't get cached. But I wanted to know if there are any other, or maybe even better, solutions out there.
Many thanks in advance,
Stefan
The solution described at https://stackoverflow.com/a/19974768/1311566 is correct. It's the only way to prevent the HTML files from being cached and only fallback to /offline.html if requests fail.
I build offline-compatible apps based on applicationCache since 3+ years now, and trust me this is the only way. If you like to have a nice JS API for the iframe Hack (and much more), you can use a library I've build: https://github.com/gr2m/appcache-nanny
By the way this iframe hack has been invented by the Financial Times Labs team, they put together a great tutorial with lots of background information on it: http://labs.ft.com/category/tutorial/
I'm a asp.net developer and I'm using the HTML5 offline features but the FALLBACK isn't working as I expected: when the server is down, instead the page listed of opening the page in FALLBACK is presented the browser standard page of no connection.
In the manifest file I tried:
FALLBACK:
* /Default.htm
and I tried:
FALLBACK:
/ /Default.htm
and the "default.html" page is never opened when the server is down.
I tried in Google Chrome and in Firefox and result is the same.
What I'm doing wrong? Someone can help me?
Regards,
Carlos Pinheiro
I had a similar issue. Followed every resource online and the only detail that made my manifest work was removing the prefixed '/' before the fallback url.
In your example, change /Default.htm to Default.htm.
FALLBACK:
/ Default.htm
I'm working on a site that requires a login and includes embedded Youtube videos. Because of the login, I need to get SSL working, which it largely is. I'm hitting an unexpected problem with the Youtube embeds, though. It's easy enough to point at https://www.youtube.com, but Firefox still complains that there's unencrypted content on an encrypted page. According to Firebug, the only unencrypted load was from http://[stuff].youtube.com/videoplayback?[more stuff].
Now, it's perfectly understandable that Youtube doesn't want the overhead of encrypting their video streams, and I don't think that this poses an actual security vulnerability. I just need to keep the browser happy. (I know that that warning can be disabled, of course, but I can't do that on my users' machines.) There must be a way to do this, because https://www.youtube.com itself doesn't make this error pop up, even though it uses http: for the video streams, too.
I have not seen similar errors in other browsers, but I haven't looked very hard just yet.
If it matters, my development machine doesn't have a valid SSL certificate; I just added an exception.
If you are using <iframe> use <embed> or check other embedding code options that YouTube API provides.
I have a ssl secured website and this works for me in Firefox
<iframe id="player" src="https://www.youtube.com/embed/XfI....Ctpo?enablejsapi=1&origin=https://yourdomain.com&showinfo=0&iv_load_policy=3&modestbranding=1&theme=light&color=white&rel=0" frameborder="0"></iframe>
I don't have a solution, but a suggestion instead: Are you sure not having a valid SSL certificate couldn't have something to do with this? You wouldn't think so, but you never know. If you get one, and it still doesn't work, it's not something you wouldn't have had to do anyway. I went through the process of obtaining/installing and configuring SSL key(s) and certificates for my home server, and every little thing seems to have an impact on how SSL acts/reacts.
Also, have you tried accessing the site outside of the local network it's on? It sounds like you're on the same network as the server which is hosting the site (the one that has SSL installed), which can create problems itself because of NAT traversal (I believe, but correct me if I'm wrong - we're all here to learn). Sometimes with HTTPS, you can have a problem connecting to resources within the local network, that people on the internet would have no problem at all connecting to. Just my two cents.. and sorry for any incorrect info, if I provided any. Take this all with a grain of salt, but hopefully you'll find the answer to your problem. Things like this can be a pain in the rump.
There may not be anything you can do about this, also.. because Youtube seems to not provide content over HTTPS... which is out of your control. I know you don't contest the error you're being given, and just want a workaround, however.
BTW, I think their homepage is HTTPS enabled, just not their video content...so that's why embedding the homepage wouldn't produce the error.
EDIT: Also, I see someone else wrote to use embed instead of iframes, which I would also recommend. The browser treats iframes like another page, but the error your getting indicates the unsecure content is actually combined with the secure content, so everything should be fine with that... but you never know.
Try the page with the Firefox "inspector / network ananlysis" (shift-ctrl-I) to analyze what elements are requested. I guess it's some javascript INSIDE the that you don't have under your control. In any case you should be able to pinpoint the specific trigger with this tool.
Check wheter it makes a difference when switching your browser to HTML5 instead of Flash for the video or vice versa. YouTube recently changed the default protocol to HTML5.
Is it possible by your website design that you could try fetching the youtube videos by an http call instead of an https? I don't know the layout of your site, but if you're just wanting it to stop complaining, that should do it.
That said, youtube DOES have valid https certificates, but that's due to the google integration. Since you aren't google, you wouldn't read as the valid certificate holder when accessing youtube's content (that's the exact kind of thing SSL's are meant to guard against).
So, basically, if you can, just embed via http instead of https. YOUR site can still be https, just not the call to youtube.
Please remove http then u check..
for example
<iframe id="player" src="www.youtube.com/embed/XfI....Ctpo?enablejsapi=1&origin=https://yourdomain.com&showinfo=0&iv_load_policy=3&modestbranding=1&theme=light&color=white&rel=0" frameborder="0"></iframe>
just remove ( http or https ) with colon, it will work perfectly
example
<iframe id="player" src="//www.youtube.com/embed/XfI....Ctpo?enablejsapi=1&origin=https://yourdomain.com&showinfo=0&iv_load_policy=3&modestbranding=1&theme=light&color=white&rel=0" frameborder="0"></iframe>
A much simpler way to do this is to download the video itself and then link to it locally on your server e.g save it in the same directory as your page and then just link to it there.