Service-Arbeiter bricht 301 umgeleitet

Question

Ich benutze einen Service-Arbeiter auf einer WordPress-Website und es ist die Umleitungen von https://example.com/page bis https://example.com/page/.

Nach dem ersten Laden, gehen Sie zu der URL ohne den Schrägstrich Blink-Browser sagen "Diese Seite kann nicht erreicht werden" und Firefox sagt "Corrupted Content Error".

Basierend auf meiner Lektüre von https://medium.com/@boopathi/service-workers-gotchas-44bec65eab3f#.hf3r4pbcs und How to alter the headers of a Request? ich denke ich erkennen müssen, wenn eine Antwort 3xx ist und stellen Sie den Umleitungs-Modus auf manuell.

Aber nichts, was ich versucht habe basierend auf meiner Forschung hat funktioniert. Wie behebe ich das?

Laufende Dienstarbeiter-Datei:

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

Wenn Fehler mit bestimmtem Ort der Begegnung, schlage ich vor, den Browser-Cache zu löschen und Ihre gespeicherten Cookies für die Website zuerst löschen. Beschädigter Inhalt Fehler kann durch Ausführen veralteter Software auf dem Server verursacht werden.

Dinge zu einer service worker zu beachten ist, dass es eine JavaScript worker ist. Es kann also nicht direkt auf das DOM zugreifen. Stattdessen kann ein Service-Mitarbeiter mit den von ihm gesteuerten Seiten kommunizieren, indem er auf Nachrichten antwortet, die über die postMessage gesendet werden.

Answer 2

Sie müssen nichts tun, um Redirects zu folgen. Wenn Sie some/url anfordern und zu some/url/ umgeleitet werden, sollte der Service-Mitarbeiter in der Lage sein, die richtige Antwort zu erhalten.

Aber wenn Sie die 3XX manuell zu handhaben beantworten, die Sie tun können:

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); 
     } 
    }) 
); 
} 

dieses Versuchen Sie, auf einem sauberen Zustand, Caches und vorinstallierte Dienstleister auszulöschen.