Service Worker weird caching

[gabrielmicko]

Is this a bug report?

Yes

Did you try recovering your dependencies?

Yes

Which terms did you search for in User Guide?

#2398

Environment

Environment Info:

System:
OS: macOS High Sierra 10.13.6
CPU: x64 Intel(R) Core(TM) i5-5257U CPU @ 2.70GHz
Binaries:
Node: 9.10.0 - /usr/local/bin/node
Yarn: 1.10.1 - /usr/local/bin/yarn
npm: 5.6.0 - /usr/local/bin/npm
Browsers:
Chrome: 69.0.3497.100
Firefox: 62.0.3
Safari: 12.0
npmPackages:
react: ^16.5.2 => 16.5.2
react-dom: ^16.5.2 => 16.5.2
react-scripts: 2.0.4 => 2.0.4
npmGlobalPackages:
create-react-app: 2.0.3

Steps to Reproduce

(Write your steps here:)

1. Clone https://github.com/gabrielmicko/react-create-app-pwa. It is almost a clean app of react-create-app.
2. Install dependencies. yarn install. Create a build. yarn run build.
3. Run serve -s build (if you don't have serve yarn global add serve), or node server.js.
4. Open localhost:5000. You should see service worker precaching files.
5. Do some change in the App.js and run yarn run build again.
6. Refresh the page and check your console. You should see the new files. It will log an "Update happened" message.
7. Refresh the page to see the updates.
8. Can't see the changes I made.

Expected Behavior

After refreshing the page at point 7. I should see my changes.

Actual Behavior

I see the old version of my app.

(Write what happened. Please add screenshots!)

Reproducible Demo

https://www.youtube.com/watch?v=Hl5HbZ0TWoY

[Timer]

You need to close all tabs or fully close the browser to see the changes reflected. A page reload will not reflect the changes.

[FezVrasta]

Hey @Timer, from what I see on the video, OP is using the incognito mode with a single open tab.

I cloned the repo and I can reproduce the problem as well. Maybe something is wrong with the V2 service worker?

[Timer]

/cc @jeffposnick

[gabrielmicko]

Is this the expected behaviour? Does it happen only on localhost? When onUpdate gets called I would like to add a popup which prompts the user to reload the page.

[Timer]

Yes -- the expected behavior is that you must close all tabs or browser before the new content appears. This is the behavior everywhere, not just on localhost.

You should be able to override this via ServiceWorkerGlobalScope.skipWaiting() but you need to make sure you coordinate this across all instances of your apps running in their browser.

[FezVrasta]

May we convert this into a "doc improvement" issue so that we keep track of this? I think the current documentation should at least mention it.

[Timer]

Yeah we should probably note this in https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#offline-first-considerations

[gabrielmicko]

In the meantime I found this: https://developers.google.com/web/tools/workbox/modules/workbox-webpack-plugin skipWaiting: true does the job.

[jeffposnick]

Yes, this does warrant improvements to the v2 docs. I can tackle that next week.

FYI, #3613 (comment) is the best explanation of why defaulting skipWaiting to false was the safest thing to do for c-r-a v2.

tl;dr is that if skipWaiting is true and you lazy-load resources, there's a decent chance that you might end up trying to lazy-load a URL that no longer exists in the service worker's cache or on the server. If you don't lazy-load versioned URLs and you want the old behavior, then changing your config to using skipWaiting: true is the alternative.

[mymattcarroll]

@gabrielmicko , @jeffposnick , Can the skipWaiting: true option be applied without ejecting?

[mymattcarroll]

On this line the workbox-webpack-plugin is registered with clientsClaim: true and the documentation for workbox-webpack-plugin's skipWaiting option says

Whether or not the service worker should skip over the waiting lifecycle stage. Normally this is used with clientsClaim: true.

Should the default behaviour be setting clientsClaim: true and skipWaiting: true?