我是服务人员的新手。我只想知道服务人员如何处理数据更改。
例如，我已将我的数据组配置为并设置strategy为，"performance"以便 Service Worker 始终在缓存中首先查找。这意味着任何时候命中服务工作者中的注册 URL 都会首先在缓存中查找。假设响应有一些变化（数据库中的数据发生了变化），响应会更新还是仍然会从缓存中获取。
我在网上搜索了很多我没有得到满意的答案。如果有人可以请帮助我
配置
"dataGroups":[
{
"name":"task-user-api",
"urls":["/tasks","/users"],
"cacheConfig":
{
"strategy" : "performance",
"maxSize":20,
"maxAge":"1h",
"timeout":"5s"
}
}
]
经过几个小时的搜索，我找到了答案，有不同类型的缓存可用
一个。 网络或缓存- 提供来自网络的内容，但如果来自网络的答案未按时到达，则包含超时以回退到缓存数据。
湾。 仅缓存 ——在安装服务工作者期间添加静态内容，并使用缓存来检索它，无论网络是否可用。
C。 缓存和更新——从缓存中提供内容，并执行网络请求以获取新数据以更新缓存条目，确保用户下次访问页面时，他们将看到最新的内容。
d。 缓存更新和刷新——提供缓存中的内容，但同时执行网络请求以更新缓存条目并通知 UI 新的最新内容。
e. 嵌入式后备 ——嵌入后备内容并在请求资源时出现故障时提供服务。
您可以阅读更多内容并从此处获取每个实施的代码
如果服务器上发生任何更改，则完整的代码可在 UI 上获取缓存和警报
服务工作者.js
var cacheName = 'cache-update-and-refresh';;
var cacheFiles = [
'./',
// list all the assests you want to list
]
self.addEventListener('install', function (e) {
console.log("[serviceWorker] installed")
e.waitUntil(
caches.open('default-cache').then(function (cache) {
return cache.addAll(cacheFiles)
}).then(function () {
return self.skipWaiting();
}));
console.log("[serviceWorker] Cached")
})
self.addEventListener('activate', (event) => {
console.info('Event: Activate');
event.waitUntil(
caches.keys().then((cacheNames) => {
return Promise.all(
cacheNames.map((cache) => {
if (cache !== cacheName) { //cacheName = 'cache-v1'
return caches.delete(cache); //Deleting the cache
}
})
);
})
);
});
self.addEventListener('fetch', function (event) {
event.respondWith(
caches.match(event.request).then(function (response) {
return response || fetch(event.request);
})
);
event.waitUntil(
update(event.request)
.then(function (response) {
caches.open(cacheName).then(function (cache) {
caches.match(event.request).then(function (cacheresponse) {
if (cacheresponse.headers.get("ETag") !== response.headers.get("ETag")) {
console.log('[ServiceWorker]' + response.url + ' - Cache' + cacheresponse.headers.get("ETag") + "- real" + response.headers.get("ETag"));
cache.put(event.request, response.clone()).then(function () {
refresh(event.request, response);
});
}
});
});
})
)
});
function fromCache(request) {
return caches.open(cacheName).then(function (cache) {
return cache.match(request);
});
}
function update(request) {
return caches.open(cacheName).then(function (cache) {
return fetch(request).then(function (response) {
return response;
});
});
}
function refresh(req, response) {
return self.clients.matchAll().then(function (clients) {
clients.forEach(function (client) {
var message = {
type: 'refresh',
url: response,
eTag: response.headers.get('ETag')
};
client.postMessage(JSON.stringify(message));
});
});
}
在 Index.html 中
if ('serviceWorker' in navigator) {
navigator.serviceWorker
.register('./service-worker.js', { scope: './' })
.then(function (registration) {
console.log("Service worker registered", registration)
})
.catch(function (err) {
console.log("Service Worker Failes to Register", err)
})
navigator.serviceWorker.addEventListener('message', function (event) {
document.getElementById("cache-generic-msg").style.display = "block";
console.log("Got reply from service worker: " + event.data);
});
}
序列图
