服務人員打破301重定向

Question

我在一個WordPress網站上使用服務人員，它將從https://example.com/page到https://example.com/page/的重定向搞亂了。

第一次加載後，轉到沒有結尾斜槓的URL閃爍瀏覽器說「此站點無法訪問」，Firefox說「內容錯誤已損壞」。

基於我的https://medium.com/@boopathi/service-workers-gotchas-44bec65eab3f#.hf3r4pbcs和How to alter the headers of a Request?閱讀我認爲我必須檢測何時響應3XX並設置重定向模式設置爲手動。

但是我沒有試過基於我的研究成果。我該如何解決？

當前服務工作者文件：

var cacheName = 'v14'; 

var urlsToCache = [ 
    // list of URLs to precache 
]; 

self.addEventListener('install', event => { 

    function onInstall(event) { 
    return caches.open(cacheName) 
     .then(cache => cache.addAll(urlsToCache)); 
    } 

    event.waitUntil(
    onInstall(event) 
     .then(() => self.skipWaiting()) 
); 

}); 

self.addEventListener('activate', event => { 

    function onActivate (event) { 
    return caches.keys() 
     .then(cacheKeys => { 
     var oldCacheKeys = cacheKeys.filter(key => key.indexOf(cacheName) !== 0); 
     var deletePromises = oldCacheKeys.map(oldKey => caches.delete(oldKey)); 
     return Promise.all(deletePromises); 
     }) 
    } 

    event.waitUntil(
    onActivate(event) 
     .then(() => self.clients.claim()) 
); 
}); 

self.addEventListener('fetch', event => { 

    function onFetch (event) { 
    // Let's not interfere with requests for stuff that doesn't need to be cached 
    // or could prevent access to admin if it is 
    if (event.request.url.match(/wp-admin/) || event.request.url.match(/wp-login/) || event.request.url.match(/preview=true/) || event.request.url.match(/wp-includes/) || event.request.url.match(/plugins/) || event.request.url.match(/google-analytics/) || event.request.url.match(/gravatar\.com/) || event.request.url.match(/login/) || event.request.url.match(/admin/) || event.request.method !== 'GET') { 
     return; 
    } 

    // Determine type of asset 
    var request = event.request, 
     acceptHeader = request.headers.get('Accept'), 
     resourceType = 'static'; 

    if(acceptHeader.indexOf('text/html') !== -1) { 
     resourceType = 'content'; 
    } else if(acceptHeader.indexOf('image') !== -1) { 
     resourceType = 'image'; 
    } 

    // Network first for HTML and images 
    if(resourceType === 'content') { 
     event.respondWith(fetch(request.url, { 
     method: request.method, 
     headers: request.headers, 
     mode: 'same-origin', // need to set this properly 
     credentials: request.credentials, 
     redirect: 'manual' 
     }) 
     .then(response => addToCache(request, response)) // read through caching 
     .catch(() => fetchFromCache(event)) 
     .catch(() => offlineResponse(resourceType)) 
    ) 
    } 

    // Cache first for static assets 
    else if(resourceType === 'static' || resourceType === 'image') { 
     event.respondWith(fetchFromCache(event) 
     .catch(() => fetch(request)) 
     .then(response => addToCache(request, response)) 
     .catch(() => offlineResponse(resourceType)) 
    ) 
    } 
    } 

    onFetch(event); 

}); 

function addToCache(request, response) { 

    if(response.ok) { // only 200s 
    var copy = response.clone(); // Because responses can only be used once 
    caches.open(cacheName) 
     .then(cache => { 
     cache.put(request, copy); 
     }); 

    return response; 
    } 

} 

function fetchFromCache (event) { 

    return caches.match(event.request) 
    .then(response => { 
     if(!response) { 
     // A synchronous error that will kick off the catch handler 
     throw Error('${event.request.url} not found in cache'); 
     } 
    return response; 
    }); 

} 

function offlineResponse (resourceType) { 

    if(resourceType === 'content') { 
    return caches.match('/offline/'); 
    } 
    return undefined; 

} 

Answer 1

當遇到特別的網站錯誤，我建議清除瀏覽器緩存和第一刪除保存的Cookie的網站。 損壞的內容錯誤可能是由服務器中運行過時的軟件引起的。

關於service worker的注意事項是，它是一個JavaScript worker。所以，它不能直接訪問DOM。相反，服務工作人員可以通過響應通過postMessage發送的消息與其控制的頁面進行通信。

Answer 2

你不需要做任何事情來遵循重定向。如果請求some/url並被重定向到some/url/，serviceo worker應該能夠得到正確的響應。

但是，如果你想手動處理3XX回答，你可以這樣做：

self.onfetch = function (event) { 
    var dontFollowRedirects = new Request(event.request.url, { redirect: 'manual' }); 
    event.respondWith(fetch(dontFollowRedirects) 
    .then(function (response) { 
     if (response.status >= 300 && response.status < 400) { 
     return doSomethingWithRedirection(response); 
     } 
    }) 
); 
} 

試試這個在一個乾淨的狀態，掃除你的緩存和預安裝服務人員。