服务工作者:如何处理302重定向响应

Question

嘿伙计们,我这个问题一直在苦苦挣扎,所以我决定发帖.

我在我的应用程序上安装了一个服务工作者,它安装得很好,激活得很好,缓存也可以.

但是当我点击一个302的页面完成缓存时,它会告诉我:

" http:// localhost:8000/form / " 的FetchEvent 导致网络错误响应:重定向响应用于重定向模式不是"跟随"的请求.

我已经阅读了很多关于这个主题的内容,我在这里查阅了帖子:服务工作者打破301重定向,然后https://github.com/w3c/ServiceWorker/issues/737 和https:// github. COM/GoogleChromeLabs/SW-预缓存/问题/ 220

据我所知,提取时的默认重定向模式是{redirect:"follow"},但是当我从重定向页面查看重定向模式时,我可以看到它是{redirect:"manual"}所以基本上我必须要做什么这是"手动".

以为我有点困惑,我正在努力如何在我的代码中实现这一点.

如果你们可以帮助我,你可以节省我的一天.

非常感谢你 !

这是我的代码:

const STATIC_CACHE_NAME = 'exell-static-v28';
const DYNAMIC_CACHE_NAME = 'exell-dynamic-v4';

// INSTALLING THE SERVICE WORKER AND PRECACHING APPSHELL
self.addEventListener('install', function(event) {
  console.log('[Service Worker] Service Worker installed');
  event.waitUntil(
    caches.open(STATIC_CACHE_NAME) // Create a static cache
    .then(function(cache) {
      console.log('[Service Worker] Precaching App Shell');
      cache.addAll([   // Add static files to the cache
        '/',
        '/build/app.js',
        '/build/global.css',
        'login',
        'logout',
        'offline',
        'form/',
        'form/new/first_page',
        'form/new/second_page',
        'form/new/third_page',
        'form/new/fourth_page',
        'form/new/fifth_page',
        'form/new/sixth_page',
        'profile/',
        'build/fonts/BrandonGrotesque-Medium.a989c5b7.otf',
        'build/fonts/BrandonText-Regular.cc4e72bd.otf',
      ]);
    })
  );
});

// ACTIVATING THE SERVICE WORKER
self.addEventListener('activate', function(event) {
  console.log('[Service Worker] Service Worker activated');
  event.waitUntil(
    caches.keys()
    .then(function(keyList) {
      return Promise.all(keyList.map(function(key) {
        if (key !== STATIC_CACHE_NAME && key !== DYNAMIC_CACHE_NAME) { // If old cache exists
          console.log('[Service Worker] Deleting old cache', key);
          return caches.delete(key);  // Delete it and replace by new one
        }
      }));
    })
  );
  return self.clients.claim();
});


// FETCHING
self.addEventListener('fetch', function(event) {

  // Do not waste time with files we don't want to cache
  if (event.request.url.match(/ajax.js/)) {
    return;
  }

  event.respondWith(
    caches.match(event.request) // Retrieve data from the cache
     .then(function(response) {
        if (response) {
          return response;  // If there is a response, return it
        } else {
          return fetch(event.request) // Otherwise fetch from network
            .then(function(res) {
              return caches.open(DYNAMIC_CACHE_NAME)
                .then(function(cache) {
                  cache.put(event.request.url, res.clone()); // Store the response in the dynamic cache
                  return res; // And return the response
                });
            })
            .catch(function() {  // If no network
              return caches.open(STATIC_CACHE_NAME) // Open the static cache
               .then(function(cache) {
                 cache.match('offline'); // Look for the offline default template and return it
               });
            });
         }
      })
    );
});

Answer 1

任何 30x 响应都应该有一个解析为“opaqueredirect”的类型属性，您可以检查它并做出适当的反应。也许你想检查这个链接：Response.type

opaqueredirect: 获取请求是用redirect: "manual".
响应的状态为 0，标头为空，正文为空，尾标为空。

因此，要解决您的问题，您应该检查：

response.type === 'opaqueredirect'

代替与response.status，例如类似于任何检查
（支票波纹管将不会工作为response.status将是0）

response.status === 301 || response.status === 302

干杯，快乐编码！