[Webkit-unassigned] [Bug 219323] New: Stale content on reload with webpack dev server

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=219323

            Bug ID: 219323
           Summary: Stale content on reload with webpack dev server
           Product: WebKit
           Version: Safari 14
          Hardware: Macintosh
                OS: macOS 10.14
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: Page Loading
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: chad at vonnau.com
                CC: beidson at apple.com

Hello,

I'm a Vue.js developer. I use vue-cli to do local dev on my machine. Vue-cli uses webpack-dev-server to serve content.

When I have a page open, and I change some code, then I reload the page, I'm shown stale javascript. I have caching disabled in dev tools.

Some workarounds:

- Close all tabs the page is open in, then open a new tab
- CMD+OPT+E and reload
- Modify the dev server to change the asset filename every time its content changes

None of this is necessary in Chrome, even with caching enabled.


Environment:
----------------------------------------

- Safari 14.0.1
- macOS 10.14.6
- node.js 15.3.0
- vue-cli 4.5.9
- webpack-dev-server 3.11.0


To reproduce:
----------------------------------------

```
brew install node
yarn global add @vue/cli
vue create hello
# choose default settings
cd hello
yarn serve
```

Open http://localhost:8080/ in Safari. Show Web Inspector. Disable caching. Then, in another terminal tab:

```
sed -i='' 's/Welcome/Bienvenidos/' src/App.vue
```

Observe that Welcome has changed to Bienvenidos, through the magic of webpack's hot module reloading.

Now, reload the page.


Expected result:
----------------------------------------

The text still says "Bienvenidos"


Actual result:
----------------------------------------

The text has reverted to "Welcome".


Links:
----------------------------------------

I'm not the only one affected by this. In this GitHub issue, a comment containing a workaround has several dozen likes.
- https://github.com/vuejs/vue-cli/issues/1132

A user reports it affects Mobile Safari (Chinese source, I used google translate).
- https://github.com/vuejs/vue-cli/issues/2391

One of the vue-cli developers suspects the cause is that Safari "does not respect the response headers for cache control (there's a ETag header added by webpack-dev-server)".
- https://github.com/vuejs/vue-cli/commit/0909bc8#commitcomment-30490198

One user asserts "webpack-dev-server (via vue-cli 3) uses ETag headers, so Safari should send a If-None-Match requests, but doesn't.
- https://stackoverflow.com/questions/53062448/how-to-disable-all-caching-in-safari-13


----------------------------------------

Thanks for taking the time to review this,
Chad

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20201128/5c17f52b/attachment-0001.htm>