Service Worker issues

问题

I'm having some issues with the service worker demo I've implemented in the page at this link. I've tried to cut the code down as much as possible for this demo, but it's too long to paste into here.

One problem is that, when the page is fully loaded, and I go to the Application tab of Chrome devtools, and I see rather a lot in the Cache:

It's not apparent why there is so much cached... it may be the fonts I'm loading but still... seems large.

More worryingly, when I click on the Clear Site Data button in that section (with all options ticked), the red Cache Storage part of the pie chart does not drop to zero. (EDIT... observation: although this works flawlessly in an Incognito window... red part does drop to zero on clicking the button.)

Furthermore, when I hit F5 to reload the page after clearing site data, the service worker fails to install properly again... seems to be stuck on installing:

To get it going again, I have to click on the unregister link in that section, and then F5. (EDIT... again... works flawlessly in an Incognito window... service worker doesn't get stuck on installing after hitting F5.)

Another issue I'm having with this code is that the values in the Cache Storage (service worker cache) section are not properly populated:

All the Content-Length info is zero, and the Time Cached info is also partially missing.

Thing is, none of these problems is apparent with this service worker example, so it must be something I'm doing wrong.

回答1:

Something I ran into once when I was testing your site was that there was a 525 response for some resource. This is a bad SSL handshake, meaning the service worker either couldn't be grabbed over SSL or some content it is supposed to cache can't be fetched for caching. This seems to be an intermittent server side issue since it only happens occasionally. My guess is that when you're installing sometimes it will give you a 525 response to something which makes the service worker get stuck in installing mode, and when you unregister and update it the server is once again working and you can install it properly.

Other than that your service worker seems to work just fine, it installs and everything loads from cache as it should.

Try to upload your site to some other server and see if the error persists, or better yet run a small localhost server to test your service worker in. If you want a really simple one install node.js and run 'npm install -g http-server', then open a terminal/command prompt inside your site root folder and run 'http-server -o' and it will run and open a testing server in your default browser.

Last note, when registering your service worker, don't check for https, if you run on localhost or 127.0.0.1 your service worker can still be run and tested without the need for https, and if your site is live it can't run without https, no need to check for it. Checking for https isn't a problem per se but it isn't necessary and it makes you unable to test your service worker locally.

Addition

You seem to be confusing the red bar for the yellow service worker bar. Your service worker is only storing index.html, which is 3.4 kb in size. The rest of the cached memory in red isn't handled by your service worker.

Example ServiceWorker.js

This service worker will cache specified resources to the cache, and if resources are fetched that aren't specified in the CACHE object it will attempt to add entries dynamically to the cache (good in case you forget to update your service worker with all your latest content). It uses cache first, if not in cache get from network and store in cache for later visits.

This script is tried and tested, use it as a basis for your own project if you like.

'use strict';

// Our current cache version and its contents.
var CACHE = {
    version: 'site-version-number',
    resources: [
        '/index.html', // caches index.html
        '/css/' // caches all the contents inside the /css folder
    ]
};

// Install service worker, adding all our cache entries
this.addEventListener('install', function (event) {
    event.waitUntil(
            caches.open(CACHE.version).then(function (cache) {
        return cache.addAll(CACHE.resources);
    })
            );
});

// Handle a fetch request. If not fetched from cache, attempt to add to cache.
this.addEventListener('fetch', function (event) {
    event.respondWith(
            caches.match(event.request).then(function (resp) {
        return resp || fetch(event.request).then(function (response) {
            return caches.open(CACHE.version).then(function (cache) {
                cache.put(event.request, response.clone()).catch(function (error) {
                    console.log('Could not add to cache!' + error);
                });
                return response;
            }).catch(function (error) {
                console.log('Could not open cache!' + error);
            });
        }).catch(function (error) {
            console.log('Resource not found!' + error);
        });
    }).catch(function (error) {
        console.log('Resource not found in the cache!' + error);
    })
            );
});

// Activate service worker
this.addEventListener('activate', function (event) {
    // Remove all caches that aren't whitelisted
    var cacheWhitelist = [CACHE.version];
    event.waitUntil(
            caches.keys().then(function (keyList) {
        return Promise.all(keyList.map(function (key) {
            if (cacheWhitelist.indexOf(key) === -1) {
                return caches.delete(key);
            }
        }));
    })
            );
});

回答2:

This is due to you have cached opaque responses in your cache bucket which takes too much size of cacheStorage.

来源：https://stackoverflow.com/questions/47846914/service-worker-issues