创建-反应-应用:将网络用于某些服务工作者导航?

Question

我正在使用create-react-app模板。我在根目录中安装了服务工作线程。因此，指向我的域的任何单击链接(标签而不是链接标签(都将调用服务辅助角色。然后，服务工作进程将从缓存中返回资源(如果可用(，否则它将调用网络。这是正确的吧？

假设这是正确的，我现在有一个稍微不同的场景，我想向我的应用程序添加一个/documentation 路由。此路由将使用节点 js 为 jsdocs 创建的索引.html文件服务器(请参阅我在节点 js 代码中的路由(。

问题是服务工作者似乎采用此路由，从不调用节点 js 后端，并将其发送到我的反应路由器。反应路由器，因为它没有/documentation路由，只显示附加到所有/路由的导航和页脚组件。

我有两个问题：

1. 如何指定某个路由不应由我的服务工作者处理？我想我可以使用 fetch，但我不确定如何正确实现它

2. 为什么服务工作者没有看到它没有保存/documentation路由，因此只是从服务器调用 index.html 文件？

节点 js

const path = require('path');
const bodyParser = require('body-parser');
const fs = require('fs');
const MongoClient = require('mongodb').MongoClient;
const stringToObject = require('mongodb').ObjectID
const mongoStoreFactory = require("connect-mongo");
const compression = require('compression');
const helmet = require('helmet');

var app = express();
app.use(helmet());  
//Compress here since we do not want to change the build tools. 
//This will use a bit more CPU as it needs to compress each request and response.
app.use(compression())
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.set("port", process.env.PORT || 3001);
console.log("Port: " + process.env.PORT + " mode:  " + process.env.NODE_ENV);
app.use(express.static("client/build"));
app.use(express.static("client/out"));

var accountsCollection = null; 
/**
We don't need to specify index since this will be served automatically with static files. 
*/
MongoClient.connect("mongodb://db:27017", function(err, db) {
if(!err) {
console.log("We are connected");
db.collection('accounts', function(err, collection) {
if(!err){
console.log("Accessed account collection");
accountsCollection = collection
}
});
//app.get('/', function (req, res) {
//    console.log("Get index!");
//    res.sendFile(path.join(__dirname+'/client/build/index.html'));
//});
app.get('/about', function (req, res) {
console.log("Get about!");
res.sendFile(path.join(__dirname+'/client/build/about.html'));
});
app.get('/services', function (req, res) {
console.log("Get services!");
res.sendFile(path.join(__dirname+'/client/build/services.html'));
});
app.get('/work', function (req, res) {
res.sendFile(path.join(__dirname+'/client/build/work.html'));
});
app.get('/skills', function (req, res) {
res.sendFile(path.join(__dirname+'/client/build/skills.html'));
});
app.get('/documentation', function (req, res) {
console.log("Get docs!");
res.sendFile(path.join(__dirname+'/client/out/index.html'));
});
app.listen(app.get("port"), () => {});
}
});

在反应组件技能中调用文档路由

<article className={"skills__skill"}>
<a href={"/documentation"}> See Documentation </a>
</article> 

我的复杂路由器

<div className={"app"}>
<Router>
<div>
<Route render={({location, history, match}) => {
return (
<RouteTransition 
pathname={location.pathname}
atEnter={{ opacity: 0 }}
atLeave={{ opacity: 0 }}
atActive={{ opacity: 1 }}
>
<Switch key={location.key} location={location}>
<Route exact path={"/"} render={()=>{
handlePageChange(history);
return <Start/>
}
}/>
<Route path={"/"} 
render={({location, history, match})=>{
return (
<RouteTransition 
pathname={location.pathname}
atEnter={{ opacity: 0}}
atLeave={{ opacity: 0}}
atActive={{ opacity: 1}}
>
<FadeBackground >
<Clouds>
<Switch key={location.key} location={location}>
<Route exact path={"/services"} 
render={(props)=>{
handleAuthentication(props);
handlePageChange(history);
return <Home />
}
}/>
<Route exact path={"/about"} component={Profile}/>
<Route exact path={"/work"} 
render={()=>{
handlePageChange(history);
return <Work />
}}
/>
<Route exact path={"/skills"} 
render={()=>{
handlePageChange(history);
return (
<Skills />
)
}}
/>
</Switch>
</Clouds>
</FadeBackground>
</RouteTransition>
)
}}/>
</Switch>
</RouteTransition>
)}
}/>
<Nav
links={[
{name:"Welcome",location:"/"},
{name:"About Me",location:"/about"},
{name:"My Services",location:"/services"},
{name:"My Work",location:"/work"},
{name:"My Skills",location:"/skills"}
]}
/>
<footer className={"footer"}>
</footer>
</div>
</Router>
</div>

Answer 1

在引擎盖下，create-react-app使用sw-precache，通过sw-precache-webpack-plugin运行。

为了自定义服务工作进程的行为，就像create-react-app中的其他自定义一样，您需要首先eject。

访问基础配置选项后，要配置的属性为navigateFallbackWhitelist，在webpack.config.prod.js内。您可以调整默认配置以包含不同的正则表达式;任何与其中一个正则表达式匹配的导航都将触发服务工作进程响应，因此这个想法是，您可以设置一个正则表达式，该正则表达式将与应通过 SPA HTML 处理的路径匹配，而不是匹配documentation/或应通过后端处理的任何其他内容。