create-react-app: Verwenden des Netzwerks für bestimmte Service-Worker-Navigationen?

Question

Ich verwende die create-react-app-Vorlage. Ich habe den Service-Mitarbeiter im Stammverzeichnis installiert. Daher ruft jeder angeklickte Link (ein Tag, der kein Link-Tag ist) zu meiner Domain den Service-Mitarbeiter auf. Der Service-Mitarbeiter wird dann die Ressource aus dem Cache zurückgeben, wenn sie verfügbar ist, andernfalls wird sie einen Anruf an das Netzwerk tätigen. Das ist richtig oder?

Angenommen, das ist richtig, ich habe jetzt ein etwas anderes Szenario, ich möchte eine/Dokumentation Route zu meiner App hinzufügen. Diese Route wird Server die Datei index.html von jsdocs mit Knoten js erstellen (siehe Route, die ich in Knoten js Code habe).

Das Problem ist, dass es scheint, der Service-Mitarbeiter nimmt diese Route, ruft nie den Knoten js Backend, und sendet dies an meine Reaktion Router. Der React-Router, da er keine Route /Dokumentation hat, zeigt nur die Navigations- und Fußzeilenkomponente an, die allen / Routen zugeordnet ist.

Ich habe eine zwei Frage:

1. Wie kann ich festlegen, dass eine bestimmte Strecke meint den Dienst nicht behandelt Arbeiter werden soll? Ich glaube, ich holen können, aber ich bin nicht sicher, wie es zu implementieren richtig

2. Warum wird der Dienst Arbeiter nicht sehen, dass es keine /Dokumentation Route gespeichert hat und deshalb rufen Sie die index.html Dateien vom Server?

Knoten 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"),() => {}); 

    } 
}); 

Aufruf zur Dokumentation Route in reagieren Komponente Fähigkeiten

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

Mein komplexer Router

<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

Unter der Haube create-react-app verwendet sw-precache, laufen über sw-precache-webpack-plugin .

Um das Verhalten des Service Worker wie bei anderen Anpassungen in create-react-app anzupassen, müssen Sie zuerst eject. Wenn Sie Zugriff auf die zugrunde liegenden Konfigurationsoptionen haben, ist die Eigenschaft, die Sie konfigurieren möchten, navigateFallbackWhitelist innerhalb von webpack.config.prod.js. Sie können die Standardkonfiguration so anpassen, dass sie einen anderen regulären Ausdruck enthält. Jede Navigation, die mit einer der RegExps übereinstimmt, löst eine Reaktion des Service Worker aus. Daher sollten Sie eine RegExp festlegen, die den Pfaden entspricht, die über Ihren SPA HTML behandelt werden sollen, und nicht mit documentation/ übereinstimmen über Ihr Backend abgewickelt werden.