Service Worker Slow Response Time

Question

On Windows and Android, Google Chrome (not yet tested for others), the response time from a service employee increases linearly to the number of items stored in this particular cache store when you use Cache.match () with the following option;

ignoreSearch = true

Separating items in multiple caches helps, but not always conveniently. Plus, even a slight increase in the number of stored items makes a big difference in response time. In my measurements, the response time is approximately doubled for every tenfold increase in the number of elements in the cache.

Answer 1

The official answer to my question in the chrome tracker problem shows that the problem is a known performance issue with the implementation of Cache Storage in Chrome, which only happens when you use Cache.match()with the option ignoreSearchset to true.

As you know, it is ignoreSearchused to ignore request parameters in the URL when matching the request with responses in the cache. Quote from MDN :

... ignore the query string in the url. For example, if set to true? value = bar http://foo.com/?value=bar will be ignored during the match.

, , , , -;

// if the request has query parameters, `hasQuery` will be set to `true`
var hasQuery = event.request.url.indexOf('?') != -1;

event.respondWith(
    caches.match(event.request, {
        // ignore query section of the URL based on our variable
        ignoreSearch: hasQuery,
    })
    .then(function(response) {
        // handle the response
    })
);

, , . .

Answer 2

. , :

var cachedUrls = [
    /* CACHE INJECT FROM GULP */
];

//update the cache
//don't worry StackOverflow, I call this only when the site tells the SW to update
function fetchCache() {
    return Promise.all(
        //for all urls
        cachedUrls.map(function(url) {
            //add a cache
            return caches.open('resource:'url).then(function(cache) {
                //add the url
                return cache.add(url);
            });
        });
    );
}

, , , , ( , html) [].
ignoreSearch, , -!

, .

---

, , , ignoreSearch, .
URL , , ignoreSearch.

self.addEventListener('fetch', function(event) {
    //find urls that only have numbers as parameters
    //yours will obviously differ, my queries to ignore were just repo revisions
    var shaved = event.request.url.match(/^([^?]*)[?]\d+$/);
    //extract the url without the query
    shaved = shaved && shaved[1];

    event.respondWith(
        //try to get the url from the cache.
        //if this is a resource, use the shaved url,
        //otherwise use the original request
        //(I assume it [can] contain post-data and stuff)
        caches.match(shaved || event.request).then(function(response) {
            //respond
            return response || fetch(event.request);
        })
    );
});