Django + Service Workers：“重定向响应用于重定向模式不遵循的请求”错误

Question

我一直在尝试使用服务人员和django-pwa 构建一个渐进式 Django Web 应用程序。一切似乎都正常，但每当我加载页面、在 Chrome 中打开离线模式并重新加载时，我都会收到此错误：

““https://haverford.getdibs.app/login/?redirect_to=/dashboard/”的 FetchEvent 导致网络错误响应：重定向响应用于重定向模式不是“follow”的请求。

现在我看到其他人遇到了类似的问题here，但我不太明白答案中发生了什么。我想我需要将重定向模式设置为“follow”，以处理我使用 fetch 发出的请求，但我不知道该怎么做。

这是我的服务人员：

   var staticCacheName = "django-pwa-v" + new Date().getTime();
var filesToCache = [
  '/offline',
];

// Cache on install
self.addEventListener("install", event => {
    this.skipWaiting();
    event.waitUntil(
        caches.open(staticCacheName)
            .then(cache => {
                return cache.addAll(filesToCache);
            })
    )
});

// Clear cache on activate
self.addEventListener('activate', event => {
    event.waitUntil(
        caches.keys().then(cacheNames => {
            return Promise.all(
                cacheNames
                    .filter(cacheName => (cacheName.startsWith("django-pwa-")))
                    .filter(cacheName => (cacheName !== staticCacheName))
                    .map(cacheName => caches.delete(cacheName))
            );
        })
    );
});


// Serve from Cache
self.addEventListener("fetch", event => {
    event.respondWith(
        caches.match(event.request)
            .then(response => {
                return response || fetch(event.request);
            })
            .catch(() => {
                return caches.match('offline');
            })
    )
});

我的印象是我必须以某种方式将 event.request 的重定向模式设置为“跟随”，但是当我在该行中放置一个断点并检查 event.request 对象时，它的 redirect 设置为'manual'。我将如何改变它？

任何帮助我理解问题的真正原因将不胜感激。

谢谢。

Answer 1

非常感谢，sideshowbarker。

this link 中的方法 1 帮助解决了我的问题。

我从这里替换了我的安装事件：

self.addEventListener("install", event => {
 this.skipWaiting();
 event.waitUntil(
     caches.open(staticCacheName)
         .then(cache => {
             return cache.addAll(filesToCache);
         })
  )
});

到这里：

self.addEventListener("install", event => {
    this.skipWaiting();
    event.waitUntil(
        caches.open(staticCacheName)
            .then(cache => {
        return fetch('/offline')
        .then(response => cache.put('/offline', new Response(response.body)));
            })
    )
});

当然，现在它只适用于那个 URL 端点 ('/offline')，但我想它对于多个获取请求是相似的。