服务人员打破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); 
     } 
    }) 
); 
} 

试试这个在一个干净的状态，扫除你的缓存和预安装服务人员。