我正在为我的WordPress安装创建一个服务工作者。我正在定义要在我的sw.js文件中缓存的文件列表,但在刷新页面时,WordPress似乎正在加载许多其他文件。
这通常不会成为问题,但这意味着某些管理文件正在缓存,这会阻止用户编辑内容。
这是代码。 sw.js文件位于Wordpress的根目录中。名为“test.css”的文件也位于root用于测试目的。
任何帮助 - 非常感谢!
史蒂夫
(function() {
'use strict';
var filesToCache = [
'test.css'
];
var staticCacheName = 'pages-cache-v1.0.1';
self.addEventListener('install', function(event) {
console.log('Attempting to install service worker and cache static assets');
event.waitUntil(
caches.open(staticCacheName)
.then(function(cache) {
console.log(filesToCache);
return cache.addAll(filesToCache);
})
);
});
self.addEventListener('fetch', function(event) {
//console.log('Fetch event for ', event.request.url);
event.respondWith(
caches.match(event.request).then(function(response) {
if (response) {
//console.log('Found ', event.request.url, ' in cache');
return response;
}
//console.log('Network request for ', event.request.url);
return fetch(event.request).then(function(response) {
return caches.open(staticCacheName).then(function(cache) {
if (event.request.url.indexOf('test') < 0) {
cache.put(event.request.url, response.clone());
}
return response;
});
});
}).catch(function(error) {
console.log('Error, ', error);
})
);
});
self.addEventListener('activate', function(event) {
//console.log('Activating new service worker...');
var cacheWhitelist = [staticCacheName];
event.waitUntil(
caches.keys().then(function(cacheNames) {
return Promise.all(
cacheNames.map(function(cacheName) {
console.log(cacheNames);
if (cacheWhitelist.indexOf(cacheName) === -1) {
return caches.delete(cacheName);
}
})
);
})
);
});
})();
所以要确保,你的问题是缓存太多了,对吧?
如果是这种情况,请查看您的代码。如果它在缓存中找不到某些东西,它会从网络中获取它并将其放入缓存中。这是代码中唯一的put操作。
你有同样的问题解释here。
对于任何以Service Workers开始的人而言,代码流程都是新的,但实际上很容易想到它。你可以阅读它,它会告诉你它在做什么。查看代码中放置的行。看看那条线的周围环境。发生了什么?
希望这可以帮助 :)