使用服務工作者時脫機重寫URL

Question

我正在使用由名為sw-precache的Nodejs插件生成的服務工作程序來制作具有脫機功能的Web應用程序。 一切正常，我確實可以脫機訪問html文件或圖像。

但是，既然您不可能使用服務器端語言，是否有辦法像.htaccess文件那樣重寫客戶端的url？ 像沒有文件匹配url時顯示“找不到404頁”頁面一樣？ 我知道可以使用Javascript或元標記進行重定向，但是要重寫url嗎？

Answer 1

默認情況下， sw-precache僅在請求的URL是其已緩存資源的URL時才響應fetch事件。 如果有人導航到不存在的網頁的URL，則sw-precache將不會響應fetch事件。

這確實意味着您有機會在可以實現自定義行為的其他fetch事件處理程序中運行自己的代碼，例如，當用戶離線時導航至不存在的頁面時返回404.html頁面。 您需要跳過幾個箍，但這是如何做的：

// In custom-offline-import.js:
self.addEventListener('fetch', event => {
  if (event.request.mode === 'navigate') {
    event.respondWith(
      fetch(event.request)
        .catch(() => caches.match('404.html', {ignoreSearch: true}))
        // {ignoreSearch: true} is needed, since sw-precache appends a search
        // parameter with versioning information.
    );
  }
});

// In your sw-precache config:
{
  // Make sure 404.html is picked up in one of the glob patterns:
  staticFileGlobs: ['404.html'],
  // See https://github.com/GoogleChrome/sw-precache#importscripts-arraystring
  importScripts: ['custom-offline-import.js'],
}

這不應該干擾sw-precache所做的任何事情，因為它將僅用作后備。