create-react-app：將網絡用於某些服務工作者導航？

Question

我正在使用create-react-app模板。我有服務工作者安裝在根目錄下。因此，任何點擊鏈接（標籤不是鏈接標籤）到我的域名將調用服務工作者。如果可用，服務工作者將從緩存中返回資源，否則它將打電話給網絡。 這是正確的嗎？

假設這是正確的，我現在有一個稍微不同的方案，我想添加一個/文檔路由到我的應用程序。此路由將服務器通過jsdocs使用節點js創建index.html文件（請參閱我在節點js代碼中使用的路由）。

問題是，它出現的服務工作人員採取此路線，從不調用節點js後端，並將其發送到我的反應路由器。該反應路由器，因爲它沒有/文檔路線，只是示出了附接至所有/路線導航和頁腳組件。

我有兩個問題：

1.如何指定某條路不應該被處理我的服務人員？我想我可以用取，但我不能確定如何正確地實現它

2.爲什麼服務人員沒有看到它不具有/文檔路線保存，因此只需要調用中的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/或其他任何應通過你的後端來處理。