使用服务工作者时,请脱机重写URL

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

但是,因为你没有服务器端语言可能,有没有一种方法来重写URL客户端像.htaccess文件会做? 像没有文件匹配的url时显示“404网页找不到”页面? 我知道redirect可能使用Javascript或元标签,但重写url?

默认情况下,当请求的URL是一个已经caching的资源的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正在做的任何事情,因为它只会被用作备用。