[英]Service Worker : How to handle a 302 redirect response
我在我的應用程序上安裝了一個 Service Worker,它安裝得很好,激活得很好,緩存也很好。
但是當我點擊一個 302 的頁面緩存完成時,它告訴我:
“ http://localhost:8000/form/ ”的 FetchEvent 導致網絡錯誤響應:重定向響應用於重定向模式不是“跟隨”的請求。
我已經閱讀了很多關於這個主題的文章,我查閱了這里的帖子: 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
});
});
}
})
);
});
任何 30x 響應都應具有解析為“opaqueredirect”的類型屬性,您可以檢查該屬性並做出適當的反應。 也許你想檢查這個鏈接: Response.type
opaqueredirect
:獲取請求是通過redirect: "manual"
發出的。
響應的狀態為 0,標頭為空,正文為空,尾標為空。
因此,要解決您的問題,您應該檢查:
response.type === 'opaqueredirect'
而不是與 response.status 相關的任何檢查,例如類似於
(下面的檢查將不起作用response.status
將為0
)
response.status === 301 || response.status === 302
干杯,快樂編碼!
可能的解決方案
對於可能拋出 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;
}
...
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.