服務工作者打破301重定向

Question

我在WordPress網站上使用服務工作者，它正在搞亂從https://example.com/page到https://example.com/page/的重定向。

第一次加載后，轉到沒有尾部斜杠的URL Blink瀏覽器說“無法訪問此站點”，Firefox說“內容已損壞”。

基於我對https://medium.com/@boopathi/service-workers-gotchas-44bec65eab3f#.hf3r4pbcs的解讀以及如何更改請求的標題？ 我想我必須檢測響應是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。 損壞的內容錯誤可能是由於在服務器中運行過期的軟件引起的。

有關服務工作者的注意事項是，它是一名JavaScript工作者 。 因此，它無法直接訪問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);
      }
    })
  );
}

在干凈的狀態下嘗試這個，擦除您的緩存並預先安裝Service Worker。