SharePoint online hub navigation not updating for other users

Its been quite a time that I am working with SharePoint Online and meeting new challenges every day. Its feels great when you find a solution for something which Google do not tell you. I am just writing this post because there might be someone out there facing the same issue and this post might help him.

BTW, before you check the actual post of how to fix the navigation check below, this might also help to change the user language.

Problem Description:

When an Admin of SharePoint Online site, updates the hub navigation (or may be site navigation), it do not get updated for all the users instantly. User has to clear browser cache to get the updated navigation. As per discussion with Microsoft, SharePoint saves a copy of the navigation in browser cache which automatically refreshes after a certain period of time. By default, you cannot clear browser cache using React or JS code. Browsers do not allow you to do so.

So, the user should wait till that time? ABSOLUTELY NOT! (Imran Khan 😋 )

Purposed Solution:

Since it was a customized solution for the customer and we used Application Customizer using SPFX, I created a link in the user menu where user can just click for refresh and the portal clears that cache configs and reload the navigation.

ODSP_DB:

SharePoint Online saves its navigation in browser by creating a temporary browser database called ODSP_DB. We cannot delete it using code, but we can Clear it. I used below piece of code to clear the ODSB_DB.

        ///Clear ODSPDB for Naviation
        try {

            let db;
            var ixDbRequest;

            ixDbRequest = window.indexedDB.open("ODSP_DB");
            ixDbRequest.onsuccess = function (e) {
                db = ixDbRequest.result;
                var transaction = db.transaction(["ODSP_DB_TABLE"], 'readwrite');
                var objectStore = transaction.objectStore("ODSP_DB_TABLE");
                objectStore.clear();
                db.close();
            };
            ixDbRequest.onerror = function () {
                console.log("Couldn't delete database");
            };
            ixDbRequest.onblocked = function () {
                console.log("Couldn't delete database due to the operation being blocked");
            };
        }
        catch {
            console.log("Clearing ODSP_DB Failed.");
        }

Also, you need to unregister the browser worker process so that it should re-register on page reload and fetch the fresh navigation.

        //Unregister Service Worker to load fresh content after refresh
        navigator.serviceWorker.getRegistrations().then(function (registrations) {

            for (let registration of registrations) {
                registration.unregister()
            }
        }).catch(function (err) {

            console.log('Service Worker registration failed: ', err);

        });

Put both of these pieces of code in a function and call that on a button click. This should clear the navigation and reload your page to get the updated navigation.

Cheers, Happy SharePointing...!