在我的 PWA 的 Service Worker 中编写 fetch 事件侦听器的正确方法是什么？

Question

我正在编写一个渐进式 Web 应用程序，无法弄清楚如何正确实现获取事件侦听器，该侦听器应该为已存储的缓存文件提供服务，或者如果文件不在缓存中则从网络中获取文件。我相信这是缓存优先的方法。

`

self.addEventListener('fetch', (e) => {
    console.log(e.request.url);
    e.respondWith(
        caches.match(e.request).then((response) => response || fetch(e.request)),
    );
});

`

Answer 1

const assets = ["/", "styles.css", "app.js", "sw-register.js"];

self.addEventListener("install", event => {
    event.waitUntil(
        caches.open("assets").then( cache => {
            cache.addAll(assets);
        })
    );
});

// Stale while revalidate strategy
self.addEventListener('fetch', event => {
    event.respondWith(
        caches.match(event.request)
            .then( cachedResponse => {
                const fetchPromise = fetch(event.request).then(
                     networkResponse => {
                        caches.open("assets").then( cache => {
                            cache.put(event.request, networkResponse.clone());
                            return networkResponse;
                        });
                    });
                return cachedResponse || fetchPromise; // cached or a network fetch
            })
        );
    }); 


// cache first strategy

// self.addEventListener("fetch", event => {
//     event.respondWith(
//         caches.match(event.request)  
//             .then( response => {
//                 if (response) {
//                     // The request is in the cache 
//                     return response; 
//                 } else {  
//                     return fetch(event.request);
//                 }
//             })
//     );
// });

Answer 2

您需要返回一些内容，因为 e.respondWith 事件，这样做意味着您将覆盖提取事件，因此必须返回缓存或提取结果。

self.addEventListener('fetch', e => {
     console.log('fetch event: ', e.request.url);
     e.respondWith(
          caches.match(e.request.url).then(cachesResponse => {
               return cachesResponse || fetch(e.request)
          })
     );
});