[whatwg/fetch] Browser caching does not work for the first range request on Chrome and Safari (#1003)

Dear community,

When one activates range requests and http server configured to cache contents with `public, max-age=31536000, immutable,` browser caching does work on Chrome and on Safari.

But the first range request returns a code 200 and the browser does not cache it, until all the ranges has been downloaded.

The server configuration is:

```
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, HEAD, PUT, POST
Access-Control-Expose-Headers: Accept-Ranges, Content-Range, Content-Length, x-amz-request-id, x-amz-id-2, ETag
Access-Control-Max-Age: 31536000
Vary: Origin, Access-Control-Request-Headers, Access-Control-Request-Method
Cache-Control: public, max-age=31536000, immutable
```

**Configuration:**

    Web browser and its version: Chrome Version 80.0.3987.116. Firefox does not yet cache range requests, so it is out of scope.
    Operating system and its version: mac os x 10.15.3 
    Is a browser extension: no

**Steps to reproduce the problem:** 

1. Clear the browser cache
2. Go to https://https://app.fays.io/bf205bf6-43d2-4140-8140-ab4b6f48c2a5 and open the developper tool. This viewer should work like the integrated viewer of PDF.JS
3. Refresh the tab
(4. Navigate through all the pages)

**What is the expected behavior?**
The expected behavior is that the browser caches all the HTTP requests, including the first one with response code 200.

**What went wrong?** 
After step 3., one can see in the developer tool that the range requests have been cached but not the first request.
<img width="945" alt="Capture d’écran 2020-02-24 à 13 21 15" src="https://user-images.githubusercontent.com/56165819/75152250-e44fa080-5708-11ea-9f71-e0c8375997d7.png">

The first request has specific headers for CORS:
```
:authority: public.fays.io
:method: GET
:path: /public/2ce2766d-b491-43a0-a0a9-96c56c2bd667.pdf
:scheme: https
accept: */*
accept-encoding: gzip, deflate, br
accept-language: fr-FR,fr;q=0.9,en-US;q=0.8,en;q=0.7,de;q=0.6
if-modified-since: Sun, 23 Feb 2020 23:43:01 GMT
if-none-match: "dd09a498518c55f91fe48b29bec2ffde"
origin: https://app.fays.io

range: bytes=0-196607
referer: https://app.fays.io/bf205bf6-43d2-4140-8140-ab4b6f48c2a5

sec-fetch-dest: empty
sec-fetch-mode: cors
sec-fetch-site: same-site
user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.116 Safari/537.36
```

PDF.JS library uses window.fetch() and dispatch a regular (200) request to check if _range requests_ are actually supported and correctly implemented by the server, see
https://github.com/mozilla/pdf.js/blob/dd893d59d99314fc9a377905432139db7b6f1873/src/display/fetch_stream.js#L137-L147


, or

https://github.com/mozilla/pdf.js/blob/dd893d59d99314fc9a377905432139db7b6f1873/src/display/network.js#L320-L332

, and also

https://github.com/mozilla/pdf.js/blob/dd893d59d99314fc9a377905432139db7b6f1873/src/display/network_utils.js#L23-L62


Still, when the browser has downloaded all the ranges (step 4.), then the request is finally cached On Chrome (but not on Safari):
<img width="944" alt="Capture d’écran 2020-02-24 à 13 37 56" src="https://user-images.githubusercontent.com/56165819/75153188-1104b780-570b-11ea-8389-12fd435240ca.png">

Best, A.

This issue is also referenced here: https://github.com/mozilla/pdf.js/issues/11624


-- 
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub:
https://github.com/whatwg/fetch/issues/1003