如何从PWA中的缓存中排除特定页面？

Question

我正在可以正常运行的网站上使用Progressive Web App，现在我希望某些页面不应该被缓存。我不应该缓存的网址保存在JavaScript变量中

var cacheExclude = [
    '/user/register',
    '/item/new',
    '/login'
];

我希望离线访问这些页面时，应改为显示'/ offline.html'。

下面是我的处理缓存的服务工作者

self.addEventListener("fetch", function(event) {

    //Fetch from network and cache
    var fetchFromNetwork = function(response) {
        var cacheCopy = response.clone();
        if (event.request.headers.get('Accept').indexOf('text/html') != -1) {
            caches.open(version + 'pages').then(function(cache) {
                cache.put(event.request, cacheCopy).then(function() {
                    limitCache(cache, 25);
                })
            });
        } else if (event.request.headers.get('Accept').indexOf('image') != -1) {
            caches.open(version + 'images').then(function(cache) {
                cache.put(event.request, cacheCopy).then(function() {
                    limitCache(cache, 10); 
                });
            });
        } else {
            caches.open(version + 'assets').then(function add(cache) {
                cache.put(event.request, cacheCopy);
            });
        }

        return response;
    }

    //Fetch from network failed
    var fallback = function() {
        if (event.request.headers.get('Accept').indexOf('text/html') != -1) {
            return caches.match(event.request).then(function (response) {
                return response || caches.match('/offline.html');
            })
        } 
    }

    //This service worker won't touch the admin area
    if (event.request.url.match(/admin/)) {
        return;
    }

    //This service worker won't touch non-get requests
    if (event.request.method != 'GET') {
        return;
    }

    //For HTML requests, look for file in network, then cache if network fails.
    if (event.request.headers.get('Accept').indexOf('text/html') != -1) {
                    event.respondWith(fetch(event.request).then(fetchFromNetwork, fallback));
        return;
            }

    //For non-HTML requests, look for file in cache, then network if no cache exists.
    event.respondWith(
        caches.match(event.request).then(function(cached) {
            return cached || fetch(event.request).then(fetchFromNetwork, fallback);
        })
    )
});

Answer 1

如果要排除某些路径，则可以使用Glob取反：

var cacheExclude = [
    '!(*/user/register'),
    '!(*/item/new'),
    '!(*/login')
];

如果匹配的glob表达式之前没有任何内容，您最终可以跳过*。

但是，如果任何cacheExclude路径具有匹配项，则也可以直接重定向到脱机页面，因此不需要取反Glob表达式。

self.addEventListener('fetch', function(event) {
    return event.respondWith(
      caches.match(/*Here your logic to do the match*/)
      .then(function(response) {
        let requestToCache = event.request.clone();

        return fetch(requestToCache).then().catch(error => {
          // Check if the user is offline first and is trying to navigate to a web page
          if (event.request.method === 'GET' && event.request.headers.get('accept').includes('text/html')) {
            // Return the offline page
            return caches.match(offlineUrl);
          }
        });
      })
    );
  });