始終以index.html作爲迴應

React應用程序（通常）對所有網址使用相同的index.html，這就是我的服務器響應的內容。始終以index.html作爲迴應

然而，第一個請求是永遠example.com/index.html，它例如example.com/，example.com/posts，example.com/post/123，example.com/contact等..

如果我打開Chrome的DevTools離線模式，我只是得到默認的無連接頁面。

如何總是從緩存中響應index.html？

相關代碼：

self.addEventListener('install', function(e) { 
    self.skipWaiting() 

    e.waitUntil(
     caches.open('v1').then(function(cache) { 
      return cache.addAll([ 
       'index.html', 
       'main.js', 
       'main.css' 
      ]) 
     }) 
    ) 
}) 

self.addEventListener('fetch', function(e) { 
    e.respondWith(
     caches.match(e.request).then(function(match) { 
      // If no match in cache, send request 
      return match || fetch(e.request) 
     }) 
    ) 
})

進出口使用localhost，但我無法找到任何信息，它當談到這個問題很重要。

來源

2016-11-13 Solo

這是因爲您已明確嘗試從緩存中僅打開緩存命中（caches.match(e.request).then ...在您的fetch偵聽器中）。所以它只會匹配您手動添加到緩存的網址。

要與預緩存值所有請求，你需要明確地尋找index.html緩存條目，這樣的事情：

self.addEventListener('fetch', function(e) { 
    var indexRequest = new Request('/index.html'); 

    // route index.html-based URLs to the specific cache directly 
    if (shouldRespondWithIndex(e.request.url)) { 
     e.respondWith(caches.match(indexRequest)) 
    } else { 
     // other URLs may go through the standard "look for exact match 
     // in the cache with network fallback" route 
     e.respondWith(
      caches.match(e.request).then(function(match) { 
       // If no match in cache, send request 
       return match || fetch(e.request) 
      })) 
    } 
})

請注意，您shouldRespondWithIndex實現應該對所有非返回false - 文件請求，即圖像，樣式表等，否則服務工作人員將用index.html取代。

來源

2016-11-13 21:15:13 NOtherDev

你需要改變你的這部分代碼：

caches.match(e.request).then(function(match) { 
    // If no match in cache, send request 
    return match || fetch(e.request) 
})

要的index.html返回給你想要的條件。您可以在緩存文檔中找到更多信息。

https://developer.mozilla.org/en-US/docs/Web/API/Cache

爲了應對訪問者，避免離線篩選，你必須決定如何處理的部分是如何檢查event.request，看看是否回國的index.html是好的，否則可能會返回即使你不想要。您必須使用event.respondWith，手動打開緩存，找到您想要的緩存元素並將其返回。因此，而不是尋找與event.request匹配，找到匹配index.html像這樣：

event.respondWith(

    // Opens Cache objects that start with 'font'. 
    caches.open(CURRENT_CACHES['font']).then(function(cache) { 
     return cache.match('/index.html').then(function(response) { 
     if (response) { 
      console.log(' Found response in cache:', response); 

      return response; 
     } 
     }).catch(function(error) { 

     // Handles exceptions that arise from match() or fetch(). 
     console.error(' Error in fetch handler:', error); 

     throw error; 
     }); 
    }) 
);

來源

2016-11-13 21:16:00

始終以index.html作爲迴應

回答

相關問題