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

时间:2019-03-21 05:14:33

标签: javascript django fetch service-worker progressive-web-apps

我一直在尝试使用服务工作者和django-pwa构建一个渐进式Django Web App。一切似乎都正常,但是每当我加载页面,在Chrome中打开离线模式并重新加载时,都会出现此错误:

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

现在我已经看到其他人遇到了一个看似相似的问题here,但是我不太明白答案中发生了什么。我认为我需要将我的提取请求重定向到“跟随”模式,但是我不确定该怎么做。

这是我的服务人员:

   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的重定向模式设置为“ follow”,但是当我在该行中放置一个断点并检查event.request对象时,其redirect是设置为'manual'。我该如何更改?

我希望能帮助您理解问题的根源。

谢谢。

1 个答案:

答案 0 :(得分:1)

非常感谢sideshowbarker

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

我从此替换了安装事件:

double const**

对此:

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

当然,现在它仅适用于那个URL端点(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))); }) ) }); ),但是对于我想的多个提取请求,它将是相似的。