使用serviceworker切换路由，无需向服务器发送请求

Question

我有一个React应用程序react-router-dom。提供静态文件（index.html、 、...），将所有请求重新路由到使用。我用它来将所有 React 和 babel 代码编译到单个文件。整个内容在第一次访问时加载（加上使用）。blah blah.jsApache serverindex.html.htaccessWebpack.jscache first SW

每次加载路由（例如/profile）时，请求都会传递到服务器（发送HTTP请求），从而导致不必要的延迟

如何在不向服务器发送任何请求的情况下切换路由？

是否可以使用Service Worker（就像我的缓存优先方法一样）？

这是我的反应路由器组件

class App extends React.Component{
   render(){
       return(
            <BrowserRouter>
                <Switch>
                    <Route path="/" exact component={Home} />
                    <Route path="/profile" exact component={Profile} />
                    <Route path="/about"  component={About}/>

                </Switch>
            </BrowserRouter>
        );
   }     
}
ReactDOM.render(<App/>,document.getElementById('root'));

Answer 1

您尝试做的事情被称为“应用程序外壳”架构模式。

诀窍是让您的 Service Worker 的fetch处理程序检查传入请求是否是导航( event.request.mode === 'navigate')，如果是，则使用缓存的 App Shell HTML 进行响应（这听起来像/index.html您的情况）。

执行此操作的通用方法是：

self.addEventListener('fetch', (event) => {
  if (event.request.mode === 'navigate') {
    event.respondWith(caches.match('/index.html'));
  } else {
    // Your other response logic goes here.
  }
});

这将导致您的 Service Worker 的行为方式与您已配置的 Web 服务器类似。