Need to clear browser cache after creating admin

[gramakri]

I am creating a navidrome package for Cloudron (at https://git.cloudron.io/cloudron/navidrome-app). I have noticed a peculiar behavior:

• Install navidrome. Create admin user.
• Logout
• I see login screen.
• Reload navidrome in browser.
• The UI keeps asking me to create admin user.
  
• Trying to create admin user will say "Error: Forbidden"

If I clear the cache, it shows login screen.

[gramakri]

The bug is reproducible with chrome and firefox. Also, I can see that the admin user exists in the sqlite database.

sqlite> select * from user; 
a9762f97-8750-4c86-8067-8cd93190243b|admin|Admin||****|1|2020-11-05 00:19:26||2020-11-05 00:19:26|2020-11-05T00:19:26.177282093Z

[deluan]

Hey, thanks for creating the package!

I can't seem to reproduce the issue here (using Chrome on macOS), but it is happening with Firefox. This used to happen in very early versions, but it's supposed to be fixed since April. I'll investigate a little more and let you know. Thanks!

[gramakri]

@deluan After a bit of debugging, I found it's something to do with service worker. If you go to Firefox/Chrome, Dev tools-> Application -> Service Worker -> Unregister and then reload the page, it starts working again.

Also, I can confirm with curl that firstTime is set to false correctly in app config. So it's a frontend issue.

[deluan]

Thanks for the information. The service worker was introduced recently, when we added PWA capabilities to Navidrome. Will have to figure out how to handle this situation. Seems that it caches the index.html by default.

[certuna]

We're not the only ones: facebook/create-react-app#7700

Apparently you can exclude index.html from the serviceworker cache, but that means no offline-mode for the PWA. Which for ND is not a problem I guess, it has no offline functionality (yet).

[deluan]

Thanks for the digging, @certuna

It seems that most solutions on the links above will require to "eject" the CRA app, meaning all build and config code will be added to Navidrome's codebase, and will make it impossible to upgrade CRA in the future....

But there is hope: facebook/create-react-app#3171 (comment)
Will try this later this weekend.

[certuna]

That would probably also fix the issue I've just encountered: even though I've updated my server twice (0.36 and 0.37) since I installed the PWA on my iPhone, it still says 0.35 in Menu-About, i.e. it has cached the assets on install and isn't refreshing them, even when I tap the 'refresh' icon.

[deluan]

@certuna The "refresh" button is used to refresh the data in the current view (ex: list of albums), not the app itself. It is not equivalent to the browser's refresh button.

Regarding the main issue here, the library used by the link I posted above (sw-precache) is deprecated.... and the new version of CRA removed the provided service worker due to too many problems with them without proper configuration

We will need more time to properly configure a service worker for Navidrome and not rely on the default provided by CRA. This will require a bit more work (I never used service workers before), so I thin kthe sensible thing to do for now is to introduce a config option to enable the service worker, and it would be disabled by default.

Thoughts?

[deluan]

Found another, possibly simpler and more elegant solution: https://felixgerschau.com/create-a-pwa-update-notification-with-create-react-app/

Will try it this week.

[certuna]

That's a great find, looks like the best thing to use. Maybe also use the "refresh" button on the top right to not just reload dynamic content, but also force a reload of the static files at the same time?

[obbardc]

I had the same issue when upgrading to a new version using docker on develop branch: the web ui asked me to create a new admin user even though I already have an admin user. Eventually it let me login though.

[deluan]

For those having this issue, another workaround for now is to Force Reload the UI (Shift+Control+R)

[certuna]

Shift-Control-R not so effective on phone or smart TV unfortunately...

Can we add a quick "clear the serviceworker cache" snippet to the code triggered by the Refresh button top right, like this (seems to do the trick when I run it in the chrome console):

caches.keys().then(function(names) {
    for (let name of names)
        caches.delete(name);
});

(or alternatively, run this snippet when clicking "Logout"). Would least mitigate the problem of the PWA not refreshing its assets after a server upgrade.

[deluan]

Nice finding, will take a look at adding this. I tried the solution from the post I linked, but it is not as straightforward as it seems. Still have to figure out some loose ends

[TheLonelinessOfHS]

Hi, same issue here. Hope you can fix this. Thanks.

[deluan]

Another possible solution to reload assets when a new version is deployed: https://deanhume.com/displaying-a-new-version-available-progressive-web-app/ (thanks @certuna)

[certuna]

I think my PR fixes it, please test. This doesn't do any fancy things like check for new versions or reload assets, it just solves the initially reported bug: it clears all service worker caches on logout.

Also, name of this issue should probably be changed to: Need to clear service worker cache after creating admin

[deluan]

I'll keep the issue open until I test it thoroughly. Thanks @certuna !

[deluan]

I can confirm this is fixed!! Thanks again @certuna ! Now we have to come-up with the fancy "There's a new version available, please refresh" logic :)

[certuna]

I'll make a new issue for that: #875

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.