How can the refresh UX be improved?

[robert-claypool]

From #3009:

we don't need
browser history is better

I mostly agree that hash: true is not needed, but the current refresh implementation is complicated in a bad way...

Background

In my case, the app continued to use old code even after I ran npm run build && firebase deploy.

First I tried to troubleshoot by going directly to https://my-project-name.firebaseapp.com/umi.js, yet the browser did not show newly deployed code. This made me think Firebase was serving a cached version of umi.js, so I added hash: true for cache bursting. As you can expect, hash: true did not fix the problem since umi.js was cached in Application 'Cache Storage' (look for antd-pro-precache-v1). I also noticed that Chrome DevTools says "(from service worker)" in the Network tab for files cached. Thus Firebase cache control had nothing to do with my issue.

This service worker caching is obvious in hindsight. The UI even opens a pop up saying, "New content is available. Please press the "Refresh" button to reload current page.", but I have no past experience with progressive web apps, and I had no idea why a "Refresh" popup was showing when clearly I had just refreshed the entire page!

Complaint

So, why do I say hash: true is mostly not needed? Why not entirely not needed?

Because 99% of the websites we visit don't force us to click a "Refresh" button on a popup dialog to get the latest version. Imagine if amazon.com, yahoo.com and every other site you visit had these popups. I understand there are advantages to progressive web apps (e.g. offline use), but the "Refresh" popup is a terrible user experience, whereas standard cache bursting provides a good (auto-update) user experience.

1. Users won't always click the service worker's popup. I didn't, and for an average user, it's probably confusing why one would need to manually refresh a web app in this way.

2. As a developer, I want to fix a bug and force users to run that latest code. I don't want some unknown percentage of users to run a bugged version just because they didn't click on a potentially annoying "Refresh" popup. And by the way, I've seen this "Refresh" notification on https://umijs.org/guide/ at least 20 times, yet it was not until today that I realized why umijs.org -- and literally no other site I visit -- was asking me to refresh the content only 2 seconds after I visited the site. I thought to myself, "Seriously? The content changed in the last 2 seconds since I reloaded this page!?"

3. The popup does not display immediately on a slow connection. It waits in the background as the service worker checks for new files. This delay is a problem when the user has already started filling out a form to submit, and then seconds later, they are told that the app is out of date. Now they must decide if they want to submit data to a server from a site that is telling them it's out of date. On the one hand, they already starting filling out the form and they don't want to start over. On the other hand, they don't know if the form submission will be correct since they are using an outdated site.

4. The refresh popup is only visible for a few seconds. I suppose this is configurable, but the default time is too short since users probably need to get the latest version in many cases (e.g. if a critical bug was fixed). If users don't click fast enough, then they won't get the latest version. I have no idea how this works for disabled users (e.g. visually impaired), but I would guess the experience is terrible.

TL;DR: hash: true is not needed, but the UX would be better if we don't force people to click a "Refresh" button to get latest content and bug fixes. Can this behavior be improved?

[chenshuai2144]

you are right.

But we are just a showcase project to demonstrate the power of pwa. The documentation for umi is for offline use. We should add a configuration that can be turned off quickly.
In most scenarios, a great pwa cache configuration is required to make it work well.

[cwtuan]

So, how to disable service worker cache?

[zhilianbi520]

那么，如何禁用服务工作者缓存？

同问，需要禁用。。

[robert-claypool]

Now the default is pwa: false. 🎉