使用服务工作程序时重写URL脱机

时间:2017-02-27 16:49:03

标签: javascript node.js .htaccess mod-rewrite service-worker

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

但是,既然你没有可能的服务器端语言,有没有办法像.htaccess文件那样重写url客户端呢?就像显示未找到的#404; 404页面一样#34;没有文件匹配网址时的页面?我知道使用Javascript或meta标签可以重定向,但是重写u​​rl?

1 个答案:

答案 0 :(得分:2)

默认情况下,sw-precache只会在请求的网址是已缓存的资源的网址时响应fetch个事件。如果有人导航到不存在的网页的网址,则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正在做的任何事情,因为它只会被用作后备。