So ändern Sie automatisch generierte Service-Worker in der Create-React-App
Ich habe eine Beispiel-App aus der Create-React-App-Bibliothek erstellt. Wenn ich den Build-Befehl ausführe, generiert er einen eigenen Service-Worker mit der Strategie cache-first. Aber ich brauche mehr Funktionen wie Cache einige API-Antworten n alle. Ich weiß nicht, wie ich das Skript ändern soll, das meinen eigenen Code in automatisch generierten Service-Workern enthält. Ich habe einige Hilfetexte für meinen Fall gefunden, aber diese reichen nicht aus, um ein vollständiges Verständnis davon zu bekommen.
Standardmäßig fängt die generierte Service-Worker-Datei keinen ursprungsübergreifenden Datenverkehr ab oder speichert ihn im Cache, wie z. B. HTTP-API-Anforderungen, Bilder oder Einbettungen, die aus einer anderen Domäne geladen wurden. Wenn Sie für diese Anforderungen eine Laufzeit-Caching-Strategie verwenden möchten, können Sie die Option runtimeCaching im Abschnitt SWPrecacheWebpackPlugin von webpack.config.prod.js auswerfen und anschließend konfigurieren.
Der obige Absatz stammt von offiziellen doc
Danke im Voraus!
Wir hatten kürzlich ein ähnliches Problem bei der Arbeit an einem Projekt und wollten es nicht "auswerfen". Wir haben ein kleines Tool erstellt, mit dem Sie benutzerdefinierten Service-Worker-Code an den von CRA generierten Code anhängen können.
Schauen Sie hier: https://github.com/bbhlondon/cra-append-sw
Sie können npm run eject ausführen und auf die zugrunde liegende Webpack-Konfiguration zugreifen.
Sobald Sie dies getan haben, kann die webpack.config.prod.js-Datei geändert werden, um Ihren generierten Service-Worker anzupassen. Suchen Sie nach dem Abschnitt , der SWPrecacheWebpackPlugin konfiguriert.
Sie können diesem Abschnitt eine zusätzliche runtimeCaching Konfigurationsoption hinzufügen, um Ihren Anforderungen an die Laufzeit-Zwischenspeicherung gerecht zu werden.