Bug 217530 – A page served with HTTP caching enabled and previously fetched with Ajax, Fetch, or the preload link keyword is not served from disk cache.

• Component: Page Loading
• Status: NEW

[Fabio Pelosin]

Created attachment 410966 [details]
Issue video

A page served with HTTP caching enabled and previously fetched with Ajax, Fetch, or the preload link keyword is not served from disk cache. Interestingly when the Web Inspector is open the page is served from disk cache.


### Reproduction steps

1. Prepare two pages: page1 and page2.
2. Configure the server to serve page2 with caching enabled (see sample HTTP headers below).
3. Configure  page1 to pre-load page2 (using one of the examples in pre-loading strategies below).
4. Load page page1 and verify that it pre-loads page page2 from the server logs.
5. Navigate to page2 within the max age of the cache and observe it is requested from the server.

If you repeat all the steps with the Web Inspector, the page is served from the disk cache (see attached video).

The issue was reproduced with Safari Technology Preview Release 114 (Safari 14.1, WebKit 15611.1.1.3) running on macOS Catalina 10.15.7 (19H2).

Use Case

Pre-load a page, that there is a high probability the user will navigate to in an iOS app, in order to warm a short lived cache in order to reduce the user latency.


### Discussion

Interestingly, when the Web Inspector is attached to the web-view the page will be served from disk-cache. This appears to be a bug related to the Web Inspector as it should not interfere with the page and at most it should only bust caches for testing purposes. It should never trigger disk caches.

Other considerations:

* If the page is pre-loaded with an iframe the page is served from disk-cache.
* Google Chrome and and the Android web-view serve the page from disk-cache.
* We attempted to use the as* *attribute


### Sample HTTP headers:

Cache-Control: public, max-age=10, must-revalidate

### Pre-loading strategies:

```
<link rel="preload" href="./page2.html" as="fetch"/>
```

```
fetch("./page2.html")
```

```
$.ajax({
  type: 'GET',
  url: "./page2.html"
});
```

[Fabio Pelosin]

Created attachment 410968 [details]
Chrome behavior

See the attached video for the behavior on Chrome.

[Fabio Pelosin]

Created attachment 410969 [details]
Demo Server

To reproduce the issue you can use the attached demo server.
It requires Nodes without any package dependency.

```
cd demo-server
node index.js
```

Then open:

```
http://127.0.0.1:3000
```

[Radar WebKit Bug Importer]

<rdar://problem/70161831>