I tried to execute the following set of coding which is already in w3schools
index.html has the following codings
<!DOCTYPE html>
<html manifest="demo_html.appcache">
<body>
<script src="demo_time.js"></script>
<p id="timePara"><button onclick="getDateTime()">Get Date and Time</button></p>
<p><img src="logo.jpeg" width="336" height="69"></p>
<p>Try opening this page, then go offline, and reload the page. The script and the image should still work.</p>
</body>
</html>
demo_time.js contains the following
function getDateTime()
{
var d=new Date();
document.getElementById('timePara').innerHTML=d;
}
demo_html.appcache contains the following
CACHE MANIFEST
CACHE:
/index.html
/demo_time.js
/logo.jpeg
".htaccess" file contains the following
AddType text/cache-manifest .appcache
Please point out the mistake in this code. When i executed the code in my browser, firefox prompted me to This website is asking to store data on your computer for offline use. Allow, never for this site or not now. I choose Allow, but the prompt did not disappear even then.
When i tried the same in w3schools.com, the prompt disappeared after i clicked Allow. Please point out the mistake in the above code
Offline cache only works for remote files. When you run the page locally, it won't actually offline the files.
If you access your page via a server, you should see the offline cache working.
I changed the demo_html.appcache to the simpler
CACHE MANIFEST
index.html
demo_time.js
logo.jpeg
and that works for me in both firefox and chrome
Chromes "Resources" tab is really helpful for debugging the appcache:
Related
I am learning to code .asp and am trying to set up a local environment for me to test simple asp codes.
I have just installed IIS on my PC running windows 10.
My browser successfully loads "localhost"
I have pasted the following code with the filename of test.html into the inetpub/wwwroot ,
<!DOCTYPE html>
<html>
<body>
<%
Response.Write("Hello World!")
%>
</body>
</html>
Navigating to localhost/test.html works fine.
Now, I want to change the file extension from test.html to test.asp. After i had done this, my browser is not able to load localhost/test.asp at all. It shows the following error,
HTTP Error 404.3 - Not Found
The page you are requesting cannot be served because of the extension configuration. If the page is a script, add a handler. If the file should be downloaded, add a MIME map.
I am expecting the webpage to display "Hello World!"
ASP is legacy ASP.NET. I believe what you want is to use ASP.NET therefore name your file:
test.aspx
I don't think you want to try technology from 18 years ago but if that were your case, you will need to activate this feature Windows 10. In order to do this you will have to go to Windows Components and features and enable this old feature here:
I have been using appcache with an unchanged index.html for quite some time. It was not explicitly listed in the manifest, but cached anyway as a master entry.
Now index.html changes and I'm running into this problem:
All resources are fetched and cached properly, however the master entry remains old and the website breaks. I tried listing index.html explicitly in the manifest. Chrome devtools shows the dilemma very well:
The old index.html remains as master. The new one gets cached explicitly but doesn't swap.
This error happens as described in Chrome. FF and Safari work fine. IE 11 displays "Resource doesn’t exist on the server" and "Appcache Fatal Error".
The manifest looks like this:
CACHE MANIFEST
# vX.X.X
NETWORK:
*
CACHE:
index.html
app.js
app.json
favicon.ico
... (+100 more files)
Found it:
To fix a framework bug, I had a server-side redirect to add a query string param. Swapping the appcache from https://example.com to https://example.com?myparam broke the appcache in Chrome and IE.
Faced with the same problem and solved it without server side manipulations.
So all you need is to add script to your <head> tag:
<script type="text/javascript">
window.applicationCache.addEventListener("updateready",
(event) => { window.location.reload(true) });
</script>
Some explanations you can find in my post here, if you interested:
AppCache doesn't swap index.html file
Our daily builds are stored in a shared network directory. My team wants me to put a link to that location on the results page - the most natural place would be among the artifacts. Clicking on that link should open the folder for viewing, copying, etc.
I've tried to implement the following solution: create an html file that redirects to the network directory and save it as an artifact. Here's the html file I generate (let's call it LinkToInstallation.html):
<html>
<head>
<script type='text/javascript'>
window.location='file:////file_server/dir_path'
</script>
</head>
<body>
</body>
</html>
Jenkins puts a link to this file among the artifacts. When I click on it from IE it redirects just fine, but from Chrome no redirection occurs, just an empty page is displayed. If I download the file (via Save Link As) and open it locally with Chrome - it works.
(1) Is there a workaround so that people do not have to change their Chrome settings?
(2) If not, how should Chrome be set up to redirect properly?
Chrome does not permit web pages to link to file:// URLs unless they were themselves loaded from file:// URLs. This is as a security precaution, as web pages running from file:// have permissions to read any file on your system. Similar restrictions apply for most other browsers.
Any reason you can't run an internal web server from your shared network directory? That'd solve the problem neatly.
I've been using HTML5 Offline caching on my website for a while and for some reasons I am considering turning it off. To my surprise it doesn't work.
This is how I've implemented HTML5 Offline caching.
In my index.html I give path to the manifest file
<html manifest="app.manifest">
In the app.manifest file I list all the js/css/png file that I would like to be cached by the browser for offline usage. Every time I deploy updates, I update the app.manifest file, which causes the browser to fetch latest version of all the files listed in the manifest file.
In order to turn off the offline caching, I changed my index.html's opening tag to
<html>
I made a dummy change to app.manifest file, so that browser (which has already cached my website), will detect the change and download latest version of all the files (including index.html).
What I noticed is, the browser indeed gets the latest version of all the files. I see the new <html> tag in the updated version without the manifest declaration, however the behavior of the browser for future changes does not change. i.e. I now expect the browser to immediately fetch the new version of the index.html file, when it's changed on server. However that doesn't happen. The browser doesn't download updated index.html until I make any changes to the manifest file.
Thus it appears to me that the browser has permanently associated app.manifest file with my website URL and it won't get rid of it even when I don't mention it in <html> tag.
I have tested this on both Google Chrome and Firefox, same results. I also tried restarting Chrome, but it won't forget that my site ever had app.manifest defined for it. I haven't found any discussion on this aspect of offline caching on the web.
Update: I managed to get rid of the behavior in Chrome by clearing all the browsing data (by going to settings). But that's not something I can tell the users to do.
Make the manifest URL return a 404 to indicate you don't want offline web applications anymore. According to Step 5 of HTML5 §5.6.4, this marks the cache as obsolete, and will remove it.
You can also manually delete the offline web application in Chrome by going to about:appcache-internals.
I'm trying to get a simple html5 webcache to work.
This is my one and only html page, index.html:
<!DOCTYPE HTML>
<html manifest="./main.manifest">
<body>
<p>Hi.</p>
</body>
</html>
This is my only cache file, main.manifest:
CACHE MANIFEST
# 2011-05-02-03
index.html
I'm running on apache shared hosting, I put a .htaccess file in my web directory where these other two files are, because I thought maybe I have to define the mime type:
AddType text/cache-manifest .manifest
So in the end I just have these three files in that directory:
index.html
main.manifest
.htaccess
When I visit the page on chrome from my mac, safari from my iphone, or chrome from my android 2.3 device, nothing happens, the page just loads as usual. If I turn airplane mode on (killing all connections) the page can't be loaded (so I guess caching failed).
What am I missing here?
Thanks
------------ Update ------------------
I think the mime type was not being recognized correctly. I updated .htaccess to:
AddType text/cache-manifest manifest
Now if I run in google chrome with console on, I see:
Document was loaded from Application Cache with manifest
http://example.com/foo/main.manifest
Application Cache Checking event
Application Cache NoUpdate event
Firefox prompts me when I load the page about the website wanting to let me store it to disk, so that's good. Looks like it's also working on android 2.3.4. The browser still says "This page cannot be loaded because you are not connected to the internet", but then it loads anyway.
Thanks!
First, you were right the first time on your mime type declaration. It should be like this:
AddType text/cache-manifest .manifest
Next, read this paragraph from Dive Into HTML5:
Q: Do I need to list my HTML pages in my cache manifest?
A: Yes and no. If your entire web application is contained in a single
page, just make sure that page points to the cache manifest using the
manifest attribute. When you navigate to an HTML page with a manifest
attribute, the page itself is assumed to be part of the web
application, so you don’t need to list it in the manifest file itself.
However, if your web application spans multiple pages, you should list
all of the HTML pages in the manifest file, otherwise the browser
would not know that there are other HTML pages that need to be
downloaded and cached.
So, in this case, you don't need a cache manifest. The browser will automatically cache your page (as long as it's the only resource, such as a CSS file or Javascript file, for example).
For more information, visit the link above.
I have had some trouble using "explicitly cached" items in my manifests, so I usually set it up like this:
CACHE MANIFEST
# 2011-05-02-03
CACHE:
index.html
But the other answer is correct, the browser will automatically cache any URLs that include an application cache manifest.
I recommend using Chrome's JavaScript Console -- it outputs application cache events as they are happening, including errors.