how to identify errors in manifest file - html

I am making the manifest file work for my web page but it is not working when turn of internate and open web page on ipad it says connect to internet.how to solve this issue i have given all the resources used in web page in the manifest file but still it is not working
Below is My Manifest File
CACHE MANIFEST
CACHE:
index.html
brd_icon.png
newstyle_tester.css
draxxin.pdf
exede.pdf
js/jquery-1.7.2.min.js
js/script.js
js/jquery.queryloader2.js
image/startbutton.png
image/mockup_splash_1.png
image/testing_file_3.png
image/overview.gif
image/strategy.gif
image/draxxin.gif
image/excede.gif
image/reference.gif
image/results.gif
image/seperator.png
image/overview_active.png
image/strategy_active.png
image/draxxin_active.png
image/excede_active.png
image/result_active.png
image/references_active.png
image/pageone_image.png
image/whiteslide.png
image/option.png
image/option_1.png
image/pagetwo_graph_one.png
image/pagetwo_graph_two_4.png
image/optiononeone.png
image/optiononetwo.png
image/optiontwofirst.png
image/optiontwosecond.png
image/backward.png
image/forward.png
image/button_7days.png
image/button_14days.png
image/close.png
image/popup_page_1.png
image/popup_1_page_2.png
image/popup_2_page_2.png
image/popup_page_3.png
image/popup_page_4.png
image/popup_1_page_5.png
image/popup_2_page_5.png
image/popup_3_page_5.png
image/popup_4_page_5.png
image/smallicon_1.png
image/smallicon_2.png
image/bg_img_lightbox.png
image/tag.png
image/result_graphic_1.png
image/result_graphic_2.png
image/result_graphic_3.png
image/graph1.png
image/graph2.png
image/graph3a.png
image/graph4.png
image/graph5.png
image/graph_one.png
image/graph_three.png
image/bottle_1.png
image/bottle_2.png
image/arrow_1.png

Your problem is that you've not configured the content type header correctly on your server. Here's the response to the HTTP request for cache.manifest:
HTTP/1.1 200 OK
Date: Tue, 08 May 2012 09:33:41 GMT
Server: Apache
Last-Modified: Tue, 08 May 2012 05:07:32 GMT
Etag: "733106-652-4bf7f5d3692a8"
Accept-Ranges: bytes
Content-Length: 1618
Keep-Alive: timeout=15, max=100
Connection: Keep-Alive
Content-Type: text/plain
See that last line? It should be text/cache-manifest. Change the content type in your server configuration. For Apache you can add this line to the server config or in an .htaccess file:
AddType text/cache-manifest appcache manifest

Related

How to prevent Chrome from using disk cache when the assets change?

Setup
I have a static site served by Nginx. I use Webpack to build the assets with a contenthash in the filename:
index.html
main.723f2b08bd448896ca78.js
main.18a850dffbe46cca9feb.css
When I edit my JavaScript code and redeploy the site, the root directory changes to:
index.html
main.08ddcf9a702a6772ce2d.js # <- new hash
main.18a850dffbe46cca9feb.css
Problem
When I open a new tab in Chrome, type my domain name, and press Enter - in the Network tab, I see that Chrome is still loading the old files:
Name Status Type Initiator Size Time
mydomain.com 200 document Other (disk cache) 4 ms
main.723f2b08bd448896ca78.js 200 script (index) (disk cache) 17 ms
main.18a850dffbe46cca9feb.css 200 stylesheet (index) (disk cache) 13 ms
When I click example.com, the HTML in Response includes the old script:
<script src="/main.723f2b08bd448896ca78.js"></script
Also, the Response Headers on index.html are outdated:
Content-Encoding: gzip
Content-Type: text/html
Date: Thu, 26 Jan 2023 09:21:31 GMT
ETag: W/"63d06108-202"
Last-Modified: Tue, 24 Jan 2023 22:51:52 GMT
X-DNS-Prefetch-Control: off
Furthermore, when I click on main.723f2b08bd448896ca78.js, the Response Headers are also out-of-date:
Accept-Ranges: bytes
Content-Length: 605458
Content-Type: application/javascript
Date: Thu, 26 Jan 2023 09:21:31 GMT
ETag: "63d06108-93d12"
Last-Modified: Tue, 24 Jan 2023 22:51:52 GMT
If I reload the page, Chrome loads the new files correctly. But if I then open a new tab again, type the domain, and press Enter - it still loads the old assets! This leaves me with a hard page reload (Ctrl + Shift + R) which finally resets the cache.
Expectation
When I load my site in Incognito I get the correct files as expected:
Name Status Type Initiator Size Time
mydomain.com 200 document Other 557 B 634 ms
main.08ddcf9a702a6772ce2d.js 200 script (index) 606 kB 1.28 s
main.18a850dffbe46cca9feb.css 200 stylesheet (index) 87.2 kB 497 ms
index.html Response:
<script src="/main.08ddcf9a702a6772ce2d.js"></script
index.html Response Headers:
Connection: keep-alive
Content-Encoding: gzip
Content-Type: text/html
Date: Thu, 26 Jan 2023 10:33:44 GMT
ETag: W/"63d249c7-202"
Last-Modified: Thu, 26 Jan 2023 09:37:11 GMT
Transfer-Encoding: chunked
main.08ddcf9a702a6772ce2d.js Response Headers:
Accept-Ranges: bytes
Connection: keep-alive
Content-Length: 605595
Content-Type: application/javascript
Date: Thu, 26 Jan 2023 10:33:44 GMT
ETag: "63d249c7-93d9b"
Last-Modified: Thu, 26 Jan 2023 09:37:11 GMT
Question
I don't understand what I'm doing wrong - Nginx is returning new values for Etag and Last-Modified. The contenthash changes between deployments. Yet the JS file is still cached very aggressively. This problem happens to me and other people using the site. In this case, it caused a white screen of death, and I had to tell everyone to do a hard page reload (which is foreign and bewildering to the end users).
Is there a solution for this? I don't mind disk cache but how do I tell Chrome not to use it when the asset file changes? Is this an Nginx misconfiguration?
Thank you.
It's your job to tell the browser how long it can cache a resource. You do so by setting the Cache-Control response header (MDN). If you don't set it, the browser is free to decide for itself how long is appropriate. That seems to be what's happening in your case.
Simply set Cache-Control: no-cache on your index.html response header and this problem will go away. The page will still be cached by the browser, but the browser won't use it without first checking with the server to see if it's still current (that's what the ETag is for).
For your static resources, though, you should set a long cache time, since the whole purpose of versioning file names like that is to allow any given one to be immutable.

CORS Issue with woff2 fonts behind CDN in Chrome

I have an S3 Bucket fronted with a Cloudfront CDN. In that bucket, I have some woff2 fonts that were automatically tagged with the content type octet-stream. When trying to load that font from a CSS file on a live production website, I get the following error:
Access to Font at 'https://cdn.example.com/fonts/my-font.woff2' from origin
'https://www.live-website.com' has been blocked by CORS policy:
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'https://www.live-website.com' is therefore not allowed access.
The thing is that a curl reveals that the Access-Control-Allow-Origin is present:
HTTP/1.1 200 OK
Content-Type: binary/octet-stream
Content-Length: 98488
Connection: keep-alive
Date: Wed, 08 Aug 2018 19:43:01 GMT
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET
Access-Control-Max-Age: 3000
Last-Modified: Mon, 14 Aug 2017 14:57:06 GMT
ETag: "<redacted>"
Accept-Ranges: bytes
Server: AmazonS3
Age: 84847
X-Cache: Hit from cloudfront
Via: 1.1 <redacted>
X-Amz-Cf-Id: <redacted>
Everything is working fine in Firefox, so I guess that Chrome is doing an extra validation that blocks my font.
Turns out that the problem was actually with the Content-Type. As soon as I changed the content type to application/font-woff2 and invalidated the cache of these woff2 files, everything went through smoothly.
My problem with CORS and multi domain was that Cloudfront was taking in cache the first request so I had to select in Whitelist Headers the Origin option. And it works.
enter image description here

Why would an mp3 file skip when served under https from Azure CDN, but not when served from http in Chrome?

I recently set up a content delivery network for mp3 files (spoken word podcast stuff) with Microsoft Azure. At first everything worked fine, but recently the files started "skipping", i.e. resetting themselves. For example when the player reached the 3:30 mark of the file it would go back to the 0:15 mark of the file. For some reason this is only happening when serving the files under https, not under http
Specifics:
It is only happening on Chrome - I've tested under Edge and Firefox too - they work perfectly
It happens across multiple computers
Only the https version of the file has the problem, the http version is fine
It works using the plain vanilla audio tag - no fancy player involved
When this happens there is no entry in the console in the dev tools, nor a new download in the media window
I uploaded the same file to Amazon S3 - put it in the same plain vanilla player and it plays just fine under https.
How can this be happening?
Headers from the NOT working request from Azure
Request Method: GET
Status Code: 206 Partial Content (from disk cache)
Referrer Policy: no-referrer-when-downgrade
Accept-Ranges: bytes
Access-Control-Allow-Origin: *;
Access-Control-Expose-Headers: x-ms-request-id;
Content-Disposition: attachment; filename=XXXXXXXXXXX.mp3;
Content-Length: 76434500;
Content-Range: bytes 0-76434499/76434500;
Content-Type: audio/mpeg;audio/mpeg3;;
Date: Mon;
ETag: "0x8D5EC5B899726B0";
Last-Modified: Wed;
Server: Windows-Azure-Blob/1.0 Microsoft-HTTPAPI/2.0;
status: 206;
x-ms-blob-type: BlockBlob;
x-ms-lease-state: available;
x-ms-lease-status: unlocked;
X-MS-Ref: 0DGxVWwAAAAA2BOMWL9GzRqSzc9yi5SF4QkwyRURHRTA1MTIAMzc1ZmRlZDMtMjA3My00Y2YxLTljZGMtNzc4NGMxYmI3ZmZi;
x-ms-request-id: 998f9297-301e-00bc-2945-22fa9f000000;
x-ms-version: 2014-02-14;
Headers from the working request from Azure
Request Method: GET;
Status Code: 206 Partial Content (from disk cache);
Remote Address: 52.239.152.234:80;
Referrer Policy: no-referrer-when-downgrade;
Accept-Ranges: bytes;
Access-Control-Allow-Origin: *;
Access-Control-Expose-Headers: x-ms-request-id;
Content-Disposition: attachment; filename=XXXXXXXXXXX.mp3;
Content-Length: 76434500;
Content-Range: bytes 0-76434499/76434500;
Content-Type: audio/mpeg;audio/mpeg3;;
Date: Mon;
ETag: "0x8D5EC5B899726B0";
Last-Modified: Wed;
Server: Windows-Azure-Blob/1.0 Microsoft-HTTPAPI/2.0;
x-ms-blob-type: BlockBlob;
x-ms-lease-state: available;
x-ms-lease-status: unlocked;
x-ms-request-id: 6246c264-401e-017b-1b47-22c00b000000;
x-ms-version: 2014-02-14;
Headers from the working request from S3
Accept-Ranges: bytes;
Content-Length: 76303428;
Content-Range: bytes 131072-76434499/76434500;
Content-Type: audio/mp3;
Date: Mon;
ETag: "09fac410597469e6db237376a0e2505d-5";
Last-Modified: Sun;
Server: AmazonS3;
x-amz-id-2: ictUYlZjFNJwa2g8q09TowZuc3quHiHmZsYmq7b/hjIgEsoIKpZIYrlqBCea1NYScr9QukHPqZY=;
x-amz-request-id: 6FE8390CF92213AF;

Chrome + CORS + cache - requesting same file from two different origins

I'm experiencing an issue with Chrome that I can't seem to fully understand, I'm curious if folks here have dealt with it before. This doesn't reproduce in Firefox. The steps are as follows:
Start incognito Chrome, navigate to https://foo.mysite.com and have the JS on the page make a GET ajax request to S3 for https://s3.amazonaws.com/mystuff/file.json . You get back a 200 response with:
HTTP/1.1 200 OK
x-amz-id-2: somestuffhere
x-amz-request-id: somestuffhere
Date: Tue, 14 Oct 2014 03:06:41 GMT
Access-Control-Allow-Origin: https://foo.mysite.com
Access-Control-Allow-Methods: GET
Access-Control-Max-Age: 3000
Access-Control-Allow-Credentials: true
Vary: Origin, Access-Control-Request-Headers, Access-Control-Request-Method
Cache-Control: max-age=86400
Content-Encoding: gzip
Last-Modified: Sun, 05 Oct 2014 00:29:53 GMT
ETag: "fe76607baa40a793eb3b3cbd373a3fb8"
Accept-Ranges: bytes
Content-Type: application/json
Content-Length: 5609
Server: AmazonS3
Open a second tab, navigate to https://bar.mysite.com and have its JS make a GET ajax request to S3 for the same file https://s3.amazonaws.com/mystuff/file.json . Get back the following 304 response:
HTTP/1.1 304 Not Modified
x-amz-id-2: somestuffhere
x-amz-request-id: somestuffhere
Date: Tue, 14 Oct 2014 03:06:58 GMT
Access-Control-Allow-Origin: https://bar.mysite.com
Access-Control-Allow-Methods: GET
Access-Control-Max-Age: 3000
Access-Control-Allow-Credentials: true
Vary: Origin, Access-Control-Request-Headers, Access-Control-Request-Method
Cache-Control: max-age=86400
Last-Modified: Sun, 05 Oct 2014 00:29:53 GMT
ETag: "fe76607baa40a793eb3b3cbd373a3fb8"
Server: AmazonS3
Open a third tab, navigate to https://foo.mysite.com (the first site) and repeat the same steps as in 1. Chrome kills the response for CORS reasons and reports the following:
XMLHttpRequest cannot load https://s3.amazonaws.com/mystuff/file.json. The 'Access-Control-Allow-Origin' header has a value 'https://bar.mysite.com' that is not equal to the supplied origin. Origin 'https://foo.mysite.com' is therefore not allowed access.
What's the story here? This doesn't reproduce in Firefox. In Firefox I'm happily getting a 304 in both steps 2 and 3, which I would expect to see in Chrome as well.
A temporary workaround for this issue in Chrome is to set Cache-Control: no-cache on the file in S3, but then I'm forcing our clients to be re-downloading that file for no good reason, so it's not a real solution.
Is this intended and documented behavior? Is this a bug with Chrome? Any other thoughts?
Looks like this is caused by Chromium issue 260239
I found this blog that help: Add Vary headers to S3
It helped by adding Vary headers to all XHR request.
I did run into a problem with html request (i.e. ) but I was able to overcome that by using hackround#2 described here:https://serverfault.com/a/856948
TL;DR of hack#2 is to use a "dummy" query string parameter that differs for HTML and XHR or is absent from one or the other. Example:
<img src="https://s3.png?x-request=html">
I just add a timestamp in request URL to force load the asset from S3 again, not from cache, such as xxxx?timestamp=yyyy

Chrome serving resource from cache when it is not present in cache-manifest

I am playing around with HTML 5 cache manifests, and I am seeing a very strange issue in Chrome. Here's the page's header:
<html id="html" xmlns="http://www.w3.org/1999/xhtml" manifest="Portal/CacheManifestHandler.ashx">
Here are the manifest contents captured from fiddler:
HTTP/1.1 200 OK
Cache-Control: no-cache
Pragma: no-cache
Content-Type: text/cache-manifest; charset=utf-8
Expires: -1
Server: Microsoft-IIS/7.5
X-AspNet-Version: 4.0.30319
X-Powered-By: ASP.NET
Date: Fri, 20 Apr 2012 15:56:20 GMT
Content-Length: 56
CACHE MANIFEST
NETWORK:
*
#Timestamp: 634705337615835020
I have one particular script on the page's header inside tag that is generated dynamically on server. Here are the contents returned for that script tag the first time user accesses the page:
HTTP/1.1 200 OK
Cache-Control: no-cache
Pragma: no-cache
Content-Type: text/javascript; charset=utf-8
Expires: -1
Server: Microsoft-IIS/7.5
X-AspNet-Version: 4.0.30319
X-Powered-By: ASP.NET
Date: Fri, 20 Apr 2012 15:36:33 GMT
Content-Length: 74
document.location='/Portal/Login.aspx?ReturnUrl=%2fPortal%2fDefault.aspx';
You can see neither the script is in Cache-manifest, nor its headers allow browser (Chrome) to cache it.
Still when I subsequently open the same page in browser, Chrome loads the page from cache-manifest, which is okay.
However surprisingly it loads the <script> also from cache. I can verify it as my server breakpoints are not hit, nor does Fiddler show a request for this <script>. The network is not down and the server is accessible (this should not have made a difference because Chrome was asked to not cache this <script> anyways).
Is this the expected behavior? Shouldn't Chrome have requested the <script> again from server even when its containing page was loaded from manifest cache.
Chrome's chrome://appcache-internals also shows only 2 urls in the cache which again is fine, why then it loads the <script> from cache and not the server
We had the same issue, our resolution was to stick a * in the network section of our app.manifest so our Network section looked like
NETWORK:
*
I'm now digging to see if that's really "by design" for Google or just plain wrong.