javascript - 如何先建立服务 worker 网络然后缓存

Question

我正在尝试设置 pwa 应用程序。我的 sw.js 是

var urlsToCache = [
    '/danger/index.html',
'/danger/css/main.css',
'/danger/css/fontawesome-all.min.css',
'/danger/css/font.css'
];

var CACHE_NAME = 'progressive';

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

self.addEventListener('fetch', function (event) {
    event.respondWith(
        caches.open(CACHE_NAME).then(function (cache) {
            return cache.match(event.request).then(function (response) {
                return response || fetch(event.request).then(function (response) {
                    cache.put(event.request, response.clone());
                    return response;
                });
            });
        })
    );
});

self.addEventListener('fetch', function (event) {
    event.respondWith(
        caches.open(CACHE_NAME).then(function (cache) {
            return fetch(event.request).then(function (response) {
                cache.put(event.request, response.clone());
                return response;
            });
        })
    );
});

我想让 sw 检查第一个网络，然后检查缓存。我从网上得到了一个代码。

self.addEventListener('fetch', (event) => {
  event.respondWith(async function() {
    try {
      return await fetch(event.request);
    } catch (err) {
      return caches.match(event.request);
    }
  }());
});

如何在我的 sw.js 中实现它。我问它是因为我的应用程序也没有在网络启用模式下更新网站内容。

Answer 1

浏览器将始终先连接到网络并获取 service-worker.js
我建议您使用 Workbox 而不是手动编写所有这些代码。 Workbox documentation

我们不应该缓存 service-worker 文件，因为这是浏览器了解是否有任何其他文件已更改的真实来源。通常一个 service-worker 文件会有一系列的文件，这些文件连同它们的哈希值一起被缓存。当 service worker 文件更改时，浏览器知道它需要从服务器获取更新。

谢谢