service worker in mobile and desktop

[themojilla]

I registered my service worker in mobile version of our site Its a diffrent project with the same URL (which I use rewriting to keep the domain unchanged).

To prevent mix ups in caches , I unregister SW in the desktop version with this code:

if (navigator.userAgent.indexOf("Mobile") > -1) {
        navigator.serviceWorker.register('/sw.js')
    } else if (navigator.userAgent.indexOf("Mobile") === -1) {
        navigator.serviceWorker.getRegistration().then(function (registration) {
            if (registration) {
                registration.unregister();
            }
        });
    }

and this is a portion of my sw.js :

    global.toolbox.router.get("/(.*)", global.toolbox.cacheFirst, {
        origin: templateServerUrl,
        cache: {
            name: buildCacheName("assets")
        }
    });
    global.toolbox.router.get("/", global.toolbox.networkFirst, {
        cache: {
            name: buildCacheName("html")
        }
    });
    global.toolbox.router.get("/Product/*", global.toolbox.networkFirst, {
        cache: {
            name: buildCacheName("html")
        }
    });
    global.toolbox.router.get("/api2/Data/*", global.toolbox.networkFirst, {
        origin: searchServiceUrl,
        cache: {
            name: buildCacheName("html")
        }
    });

My problem is to handle the service worker cache in both versions without them mixing together.

[themojilla]

url : digikala

[jeffposnick]

I'm not particularly sure how to answer this, and I can't connect to https://www.digikala.com/ to see your site.

In general, if you're concerned about keeping caches separate, you should use different cache names. I see that you're already doing something with buildCacheName(), but I don't know how that's implemented.

If you need different versions of your service worker for different versions of your site, you could either use different scopes, or use different service worker paths, or possibly use the same scope and service worker path, but append a URL query parameter (like /path/to/sw.js?site=Mobile) and then check that URL query parameter from inside your service worker via self.location.

I'm just throwing out some ideas, and I hope one of those works. I'm closing for now, but if you have any follow-up information to share, feel free to reopen.

[marmikdesai]

Hi @jeffposnick

This is weird question. But I am wondering, can I use below code in sw.js?

if(navigator.userAgent.indexOf("Mobile") > -1) { console.log("run service worker code") global.toolbox.router.get("/(.*)", global.toolbox.cacheFirst, { origin: templateServerUrl, cache: { name: buildCacheName("assets") } }); } else { console.log("do nothing") }