使用 Service Worker 时离线重写 URL

Question

我正在使用由名为sw-precache的 Nodejs 插件生成的服务工作线程来制作具有离线功能的 Web 应用程序。一切正常，我可以离线访问 html 文件或图像。

但是，既然你没有可能的服务器端语言，有没有办法像.htaccess文件一样重写客户端的 url 呢？就像当没有文件与 url 匹配时显示“404 页面未找到”页面一样？我知道可以使用 Javascript 或元标记进行重定向，但是重写 url 吗？

Answer 1

默认情况下，仅当请求的 URL 是已缓存资源的 URL 时sw-precache才会响应事件。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正在执行的任何操作，因为它只会用作后备。