webentwicklung-frage-antwort-db.com.de

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!

8
Yash Kochar

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

4

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.

2
Jeff Posnick