Service Worker breaking 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?の私の読書に基づいて、私は応答が300番台のときに検出し、マニュアルへのリダイレクトモードを設定する必要がを考える。

私の研究に基づいて試したことはありませんでした。これをどうやって解決するのですか？

現在のサービスワーカーファイル：

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

特定のサイトでエラーが発生した、私はブラウザのキャッシュをクリアして、最初のサイトのために保存されたクッキーを削除することをお勧めします。 破損した内容のエラーは、サーバーで古いソフトウェアを実行すると発生する可能性があります。

約service workerの注記は、それはJavaScript workerです。したがって、DOMに直接アクセスすることはできません。代わりに、サービスワーカーは、postMessage経由で送信されたメッセージに応答することによって、制御するページと通信できます。

Answer 2

リダイレクトに従うために何もする必要はありません。 some/urlを要求し、some/url/にリダイレクトされた場合、serviceoワーカーは適切な応答を得ることができます。

しかし、あなたは手動で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); 
     } 
    }) 
); 
} 

があなたのキャッシュやプリインストールサービス労働者を一掃する、クリーンな状態でこれを試してみてください。