时间戳

首页 > 解决方案 > 使用 serviceworker 切换路由而不向服务器发送请求

reactjs - 使用 serviceworker 切换路由而不向服务器发送请求

问题描述

我有一个React应用程序react-router-dom。静态文件（index.html，，，blah blah.js...）用于Apache server将所有请求重新路由到index.html使用.htaccess。我用来Webpack将所有反应和 babel 代码编译为单个.js文件。整个内容在第一次访问时加载（加上cache 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'));

标签： reactjsservice-workerreact-router-dom

解决方案

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

诀窍是让您的服务工作者的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.
  }
});

这将导致您的服务工作者的行为方式与您已经配置的 Web 服务器的方式类似。

推荐阅读