Question

我正在研究服务工作者，他应该只缓存一些特定的文件。但是在实现和刷新之后（是的，我启用了“重新加载后的dumb sw”）还有更多的文件“通过sw加载”然后我在“要缓存的文件”列表中添加了。我是服务工作者的新手，不知道出了什么问题。我刚刚关注了一些教程。这里的代码。也许我完全错了。

if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
  navigator.serviceWorker.register('/worker.js').then(function(registration) {
        }, function(err) {
            console.log('ServiceWorker registration failed: ', err);
        });
   });
}

var debugMode = false;

//Variables to cache
var CACHE_NAME = 'companyname-cache-1511794947915';
var urlsToCache = [
'/typo3conf/ext/companyname/Resources/Public/css/animate.css',
'/typo3conf/ext/companyname/Resources/Public/css/bootstrap.css',
'/typo3conf/ext/companyname/Resources/Public/css/bootstrap.min.css',
'/typo3conf/ext/companyname/Resources/Public/css/bootstrap-theme.css',
'/typo3conf/ext/companyname/Resources/Public/css/bootstrap-theme.min.css',
'/typo3conf/ext/companyname/Resources/Public/css/main.css',
'/typo3conf/ext/companyname/Resources/Public/css/et/override.css',
'/typo3conf/ext/companyname/Resources/Public/css/et/screen-full.css',
'/typo3conf/ext/companyname/Resources/Public/css/et/screen-full.min.css',
'/typo3conf/ext/companyname/Resources/Public/Icons/favicon.ico',
'/typo3conf/ext/companyname/Resources/Public/Icons/FaviconTouch/android-chrome-512x512.png',
];

self.addEventListener('install', function(event) {
// Perform install steps
event.waitUntil(
    caches.open(CACHE_NAME)
        .then(function(cache) {
            return cache.addAll(urlsToCache);
        })
    );
});
self.addEventListener("activate", function(event) {
event.waitUntil(

    caches.keys().then(function(cacheNames) {
        return Promise.all(
            cacheNames.map(function(cacheName) {
                if(debugMode) {
                    console.log('actual cache name: %o', CACHE_NAME);
                    console.log('name inside the cache: %o', cacheName);
                }

                if ((cacheName.indexOf('companyname-cache-') !== -1) && (cacheName !== CACHE_NAME)) {
                    if(debugMode) {
                        console.log("old cache deleted");
                    }
                    return caches.delete(cacheName);
                }
            })
        );
    })
);
});
self.addEventListener('fetch', function(event) {
event.respondWith(
    caches.match(event.request)

        .then(function(response) {
            if (response) {
                if(debugMode) {
                    console.log("fetch 1");
                }
                return response;
            }
            var fetchRequest = event.request.clone();

            return fetch(fetchRequest).then(
                function(response) {

                    if(!response || response.status !== 200 || response.type !== 'basic') {
                        if(debugMode) {
                            console.log("fetch 2");
                        }
                        return response;
                    }

                    var responseToCache = response.clone();

                    caches.open(CACHE_NAME)
                        .then(function(cache) {
                            cache.put(event.request, responseToCache);
                        });
                    if(debugMode) {
                        console.log("fetch 3");
                    }

                    return response;
                }
            );
        })
);
});

Answer 1

SW中的代码如下：

安装时，将URL LIST中的所有项目添加到缓存
启动时，检查缓存是否只包含CACHE NAME的项目
在获取事件上：首先检查请求的资源是否在缓存中，如果找到则返回;如果请求的资源不在缓存中，请从网络请求它并且将其放入缓存

＃3的最后一部分导致SW代码出现问题 - 它将所有请求添加到缓存中，以便将来可以从缓存中获取。

如果您查找最后一次出现此问题，您可以在代码中看到问题：

                caches.open(CACHE_NAME)

当从缓存中找不到某些内容并且是从网络请求时，这是您的代码的一部分。然后代码将其放入缓存中 - 这不是您想要的。

服务工作者缓存很多

1 个答案: