Question

对服务工作者来说是新手。我只是想知道处理数据的服务工作者是如何变化的。

例如，我已将数据组配置为strategy并将"performance"设置为"dataGroups":[ { "name":"task-user-api", "urls":["/tasks","/users"], "cacheConfig": { "strategy" : "performance", "maxSize":20, "maxAge":"1h", "timeout":"5s" } } ]，以便服务工作人员始终首先查看缓存。这意味着命中服务工作者中的注册URL将首先在缓存中查找。假设响应有一些变化（数据库中的数据被更改），响应将更新或仍然会从缓存中获取。

我在网上搜索了很多，但我没有得到令人满意的答案。如果有人可以帮助我

Cofiguration

{{1}}

Answer 1

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

一个。 网络或缓存 - 提供来自网络的内容，但如果来自网络的答案未及时到达，则会包含超时以回退到缓存数据。

湾仅限缓存 - 在安装服务工作者期间添加静态内容，并使用缓存检索网络是否可用。

℃。 缓存和更新 - 即成从缓存中的内容，并执行网络请求来获取新的数据更新缓存项，确保用户下次访问该网页，他们将看到最新的内容< / p>

d。 缓存更新和刷新 - 从缓存中提供内容，但同时执行网络请求以更新缓存条目并通知UI新的最新信息内容。

即嵌入式回退 - 嵌入回退内容，并在请求资源时发生故障时提供服务。

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

获取每个实施的代码

完整代码，以便在服务器上发生任何更改

时获取UI上的缓存和警报

服务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，使用Angular CLI在Angular 5中使用Service worker

1 个答案: