Service Worker：如何处理 302 重定向响应

Posted 2023-02-16

【中文标题】Service Worker：如何处理 302 重定向响应

【英文标题】：Service Worker : How to handle a 302 redirect response

【发布时间】：2018-09-28 08:55:40

【问题描述】：

我在我的应用程序上安装了一个 service worker，它安装得很好，激活得很好，而且缓存也很好。

但是当我点击一个 302 页面时缓存完成时，它告诉我：

“http://localhost:8000/form/”的 FetchEvent 导致网络错误响应：重定向响应用于重定向模式不是“follow”的请求。

我已经阅读了很多关于这个主题的文章，我在这里查阅了帖子：Service Worker breaking 301 redirects， 还有https://github.com/w3c/ServiceWorker/issues/737 还有https://github.com/GoogleChromeLabs/sw-precache/issues/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
               );
            );
         
      )
    );
);

【问题讨论】：

你解决了吗？

这可能有帮助：***.com/questions/45434470/…

谢谢。我已经看过那个帖子了。不，不幸的是我没有解决它，这让我发疯了好几个星期，然后我改变了项目。

【参考方案1】：

任何 30x 响应都应具有解析为“opaqueredirect”的类型属性，您可以对其进行检查并做出适当的反应。也许您想查看此链接：Response.type

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

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

response.type === 'opaqueredirect'

而不是与 response.status 相关的任何检查，例如类似于（下面的检查将不起作用，因为 response.status 将是 0）

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

干杯，编码愉快！

【讨论】：

上述答案是在问题提出 11 个月后提供的。如果这有助于解决当前或类似问题，请随时投票。

【参考方案2】：

可能的解决方案

对于可能抛出 3xx 的页面......根本不要缓存内容。 https://medium.com/@boopathi/service-workers-gotchas-44bec65eab3f

self.addEventListener('fetch', event => 

    // path throw a 3xx - don’t cache
    if(event.request.url == 'url' ) 
        return;
    

    ...