How to declare routes that are cached and other routes that are not stored?

Question

Good morning. I am developing a SPA system whose part is available only when the user is online and another is available even offline. The offline part is configured in the service worker but a problem has begun to arise. Routes of the application that uses micro service to provide the data that is used to mount the page end up being cached. What generates an unexpected situation.

The application has the service worker installed as follows:

var version = '0.8';
self.addEventListener('install', function (event) {
    event.waitUntil(
        caches.open('v1').then(function (cache) {
            return cache.addAll([
                '/',
                '/css/app.css',
                '/js/app.js',
                '/cache.js',
                '/favicon.ico',
                '/js/gauge.min.js',
                '/manifest.json',
                '/avatar.png',
            ]);
        })
    );
});

self.addEventListener('fetch', function (event) {
    event.respondWith(
        caches.open('mysite-dynamic').then(function (cache) {
            return cache.match(event.request).then(function (response) {
                if (response) {
                    return response;
                } else {
                    return fetch(event.request).then(function (response) {
                        cache.put(event.request, response.clone());
                        return response;
                    });
                }
            });
        })
    );
});

With this code the part both offline becomes available to the user. The problem that all of the micro service are also routed by the cache. All micro services routes are of the type https://site/api/* This problem can not find information either in the documentation or in the tutorial sites.

And with this. The big X of the question is that api routes do not allow more than one system registration for example. Soon. Whenever I access the page, post routes are curly. and I can only register an entity in the system, because the browser caches and does not allow me to send post routes to the server.

Would there be a way for the service worker to be configured to work by providing data exclusively when the system is inaccessible? That is, when resources cannot be accessed?

Answer 1

After several searches even though it was not really clear I believed that the service worker was storing the data and this data was always prioritized instead of the return of the server.

In this aspect I was able to configure my cache in such a way that the problem disappeared, It was not clear to me the pq that solved, but I will post the service worker code for future search to solve this type of error.

var version = '0.8'; //Corrigido o erro de cache
self.addEventListener('install', function (event) {
    event.waitUntil(
        caches.open('v1').then(function (cache) {
            return cache.addAll([
                '/',
                '/css/app.css',
                '/js/app.js',
                '/cache.js',
                '/favicon.ico',
                '/js/gauge.min.js',
                '/manifest.json',
                '/avatar.png',
            ]);
        })
    );
});

self.addEventListener('fetch', function (event) {
    event.respondWith(
        caches.match(event.request)
            .then(function (response) {
                // Cache hit - return response
                if (response) {
                    return response;
                }
                return fetch(event.request);
            }
            )
    );
});