create-react-app 使用自定義 service worker 而不彈出

Question

我有一個現有的應用程序，我正在嘗試轉換為使用 React。 我已經用一個全新的create-react-app復制了它的功能（使用react-scripts 1.0.13）。

我想使用現有的 Service Worker。 我注意到 CRA 創建了自己的 service worker； webpack 配置中的代碼（使用SWPrecacheWebpackPlugin ）創建了一個非捆綁模塊service-worker.js 。 所有其他 JS 模塊都捆綁在一起。

據我所知，我不能只是復制我現有的服務工作者existing-service-worker.js並嘗試導入它，因為所有 JS 模塊都捆綁在一起。

我不想彈出。

我已經分叉了create-react-app以自定義react-scripts並在 webpack 配置中使用不同的邏輯，這將允許我使用我現有的服務工作者而不是它使用SWPrecacheWebpackPlugin創建的服務工作者......但是，我不不知道怎么做。 這是我第一次使用 React 和 webpack。

有人可以指出我正確的方向，並幫助我在 React 中使用現有的 Service Worker 而不會彈出嗎？

Answer 1

有一個專門為此用例構建的 npm 庫。 它被稱為cra-append-sw 。

大多數細節都在 npm 頁面中，但簡單地說你只需要安裝庫（npm i --save cra-append-sw）。

對您的 package.json 進行一些更改：

"start": "react-scripts start && cra-append-sw --mode dev ./public/custom-sw-import.js",
"build": "react-scripts build && cra-append-sw --skip-compile ./public/custom-sw-import.js" 

最后在您的公共文件夾中創建一個名為 custom-sw-import.js 的文件，您在那里編寫的所有服務工作者代碼將簡單地附加到 cra 的服務工作者。

我可以驗證這是否有效，因為我應用了相同的原則來制作我的網站www.futurist-invenzium.com ，該網站提供了 PWA 提供的所有功能的演示。

如果您想要更深入的答案，我還發現這篇博文很有幫助。

Answer 2

這是沒有彈出的另一種解決方案：

https://medium.freecodecamp.org/how-to-build-a-pwa-with-create-react-app-and-custom-service-workers-376bd1fdc6d3

Answer 3

你需要彈出。

（或者，創建自己的分叉 - 我不建議這樣做）

您不必使用彈出。 策划的功能集適用於中小型部署，您不應覺得有義務使用此功能。 但是，我們知道如果您准備好它時無法自定義此工具將無用。

https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#npm-run-eject

否則您將無法自定義生成的服務工作程序。

但是，如果您擔心永久eject操作，則可以始終克隆項目目錄並在克隆中使用npm run eject來玩游戲。 原件將保持完整。

Answer 4

我在沒有eject情況下完成了

您可以將您的工作人員放在public文件夾中，然后您必須自己轉譯和縮小它們。

正如這里討論的https://github.com/facebook/create-react-app/issues/1277

Answer 5

第 4 版的好消息！：

從 Create React App 4 開始，您可以通過創建自己的 src/service-worker.js 文件或自定義由 cra-template-pwa（或 cra-template -pwa-typescript) 模板。

（https://create-react-app.dev/docs/making-a-progressive-web-app/ ）