如何使服务工作者网络先缓存

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;
            });
        })
    );
});

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

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而不是手动编写所有这些代码。 工作箱文档

我们不应该缓存service-worker文件，因为这是浏览器了解是否其他文件已更改的事实来源。 通常，服务人员文件将具有一系列与其哈希一起缓存的文件。 当Service Worker文件更改时，浏览器知道它需要从服务器进行更新。

谢谢