web-dev-qa-db-ja.com

Service Worker：302リダイレクト応答を処理する方法

私は自分のアプリケーションにServiceWorkerをインストールしましたが、それは適切にインストールされ、適切にアクティブ化され、キャッシュも問題ありません。

しかし、302であるページをクリックしたときにキャッシュが完了すると、次のように表示されます。

" http：// localhost：8000/form / "のFetchEventにより、ネットワークエラー応答が発生しました。リダイレクトモードが「フォロー」ではない要求に対して、リダイレクトされた応答が使用されました。

私はこのテーマについてたくさん読んでいます、私はここの投稿を調べました： 1リダイレクトを壊すServiceWorker そしてそこに https://github.com/w3c/ServiceWorker/ issues/737 そしてそこに https://github.com/GoogleChromeLabs/sw-precache/issues/22

フェッチ時のデフォルトのリダイレクトモードは{redirect： "follow"}ですが、リダイレクトされたページからリダイレクトモードをキャッチすると、{redirect： "manual"}であることがわかります。したがって、基本的には次の場合に何かを行う必要があります。それは「手動」です。

私は少し混乱していて、これをコードに実装する方法に苦労していると思いました。

これが私のコードです：

const STATIC_CACHE_NAME = 'exell-static-v28';
const DYNAMIC_CACHE_NAME = 'exell-dynamic-v4';

// INSTALLING THE SERVICE WORKER AND PRECACHING APPSHELL
self.addEventListener('install', function(event) {
  console.log('[Service Worker] Service Worker installed');
  event.waitUntil(
    caches.open(STATIC_CACHE_NAME) // Create a static cache
    .then(function(cache) {
      console.log('[Service Worker] Precaching App Shell');
      cache.addAll([   // Add static files to the cache
        '/',
        '/build/app.js',
        '/build/global.css',
        'login',
        'logout',
        'offline',
        'form/',
        'form/new/first_page',
        'form/new/second_page',
        'form/new/third_page',
        'form/new/fourth_page',
        'form/new/fifth_page',
        'form/new/sixth_page',
        'profile/',
        'build/fonts/BrandonGrotesque-Medium.a989c5b7.otf',
        'build/fonts/BrandonText-Regular.cc4e72bd.otf',
      ]);
    })
  );
});

// ACTIVATING THE SERVICE WORKER
self.addEventListener('activate', function(event) {
  console.log('[Service Worker] Service Worker activated');
  event.waitUntil(
    caches.keys()
    .then(function(keyList) {
      return Promise.all(keyList.map(function(key) {
        if (key !== STATIC_CACHE_NAME && key !== DYNAMIC_CACHE_NAME) { // If old cache exists
          console.log('[Service Worker] Deleting old cache', key);
          return caches.delete(key);  // Delete it and replace by new one
        }
      }));
    })
  );
  return self.clients.claim();
});


// FETCHING
self.addEventListener('fetch', function(event) {

  // Do not waste time with files we don't want to cache
  if (event.request.url.match(/ajax.js/)) {
    return;
  }

  event.respondWith(
    caches.match(event.request) // Retrieve data from the cache
     .then(function(response) {
        if (response) {
          return response;  // If there is a response, return it
        } else {
          return fetch(event.request) // Otherwise fetch from network
            .then(function(res) {
              return caches.open(DYNAMIC_CACHE_NAME)
                .then(function(cache) {
                  cache.put(event.request.url, res.clone()); // Store the response in the dynamic cache
                  return res; // And return the response
                });
            })
            .catch(function() {  // If no network
              return caches.open(STATIC_CACHE_NAME) // Open the static cache
               .then(function(cache) {
                 cache.match('offline'); // Look for the offline default template and return it
               });
            });
         }
      })
    );
});
javascriptredirectserviceworkerhttp-status-code-302
11
Loann.M

30xの応答には、「opaqueredirect」に解決されるtypeプロパティが必要です。これを確認して、適切に対応することができます。たぶんあなたはこのリンクをチェックしたいと思うでしょう： Response.type

opaqueredirect：フェッチリクエストはredirect: "manual"で行われました。
応答のステータスは0、ヘッダーは空、本文はnull、トレーラーは空です。

したがって、問題を解決するには、を確認する必要があります。

response.type === 'opaqueredirect'

response.statusに関連するチェックの代わりに、たとえば次のように
（response.statusは0）になるため、以下のチェックは機能しません。

response.status === 301 || response.status === 302

乾杯、そして幸せなコーディング！

1
dankilev

考えられる解決策

3xxをスローする可能性のあるページの場合...単にキャッシュしないでください。 https://medium.com/@boopathi/service-workers-gotchas-44bec65eab3f

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

    // path throw a 3xx - don’t cache
    if(event.request.url.indexOf('/') > -1) {
        return;
    }

    ...

}
0
BG Bruno