如何在Angular 5中使用Service worker并使用Angular CLI有效缓存API

我是新来的服务人员。我只想知道服务人员如何处理数据更改

例如，我在中配置了我的数据组，并将

策略设置为
“性能”
，以便服务人员始终首先查看缓存。这意味着任何时候hit service worker中注册的URL都将首先在缓存中查找。假设响应有一些更改（数据库中的数据已更改），响应将更新还是仍然从缓存中获取

我在网上搜索了不少，没有得到满意的答案。如果有人能帮助我

共形

"dataGroups":[
 {
   "name":"task-user-api",
   "urls":["/tasks","/users"],
   "cacheConfig":
    {
      "strategy" : "performance",
      "maxSize":20,
      "maxAge":"1h",
      "timeout":"5s"
    }
  }
]

经过几个小时的搜索，我找到了答案，有不同类型的缓存可用

a网络或缓存-从网络上提供内容，但如果网络上的答案没有按时到达，则会包含一个返回缓存数据的超时

b仅缓存——在安装service worker期间添加静态内容，并使用缓存检索静态内容，无论网络是否可用

c缓存和更新——为缓存中的内容提供服务，并执行网络请求以获取新数据，以更新缓存条目，确保用户下次访问页面时能够看到最新内容

d缓存更新和刷新——为缓存中的内容提供服务，但同时执行网络请求以更新缓存条目，并向UI通知新的最新内容

e嵌入式回退——嵌入回退内容，并在请求资源时出现故障时提供服务

您可以阅读更多内容，并从

完成代码以获取缓存，并在服务器上发生任何更改时在UI上发出警报

Service-worker.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);
    });

} 

序列图

我建议提供具体的示例，显示您的配置和收到的错误。不，我正在尝试获取这个概念，假设我缓存了一个API URL，而服务人员将缓存响应。如果下次我对同一URL的响应发生更改，服务人员将如何处理它。或者，它总是需要缓存。您有什么想法，如何通知AngularJs组件更新的响应？我真的很坚持这一点。你是否在组件的ng onint中尝试了addEventListener，如果navigator抛出错误，只需在顶部声明此变量，因为在运行时，一旦ts转换为JS，它将以proeprly方式运行。嗯，我将尝试一下。很好的方法。很高兴你得到了一些线索，如果你成功了，请分享。