React-Snap 与 Create-React-App 和 Service Workers

Question

因此，我的理解是 react-snap 根据其功能“与 create-react-app 一起开箱即用 - 无需更改代码。”

我通读了文档，发现需要进行一些调整才能与我实现的 Google Analytics(分析)一起使用。

但是，如果要使用 CRA 附带的默认服务 worker ，它还建议进行更改。

https://github.com/stereobooster/react-snap#service-workers

然而，令人困惑的是，似乎必须执行 EJECT 才能进行必要的更改。

navigateFallback: publicUrl + '/index.html',

您需要将其更改为 index.html 的未预渲染版本 - 200.html，否则您将在其他页面(如果有的话)上看到 index.html 闪烁。有关详细信息，请参阅在不弹出的情况下配置 sw-precache。

我的问题是 - 请注意我是新手 - 是否必须弹出？我有点想保持简单。我唯一能找到这条线的地方是在 WebPack 中。 navigateFallback

此外，如果我没有按照文档看到页面上闪烁的负面影响，可以省略此步骤吗？还是会在其他方面出现问题？

Answer 1

虽然这个问题已经有一年多了，但我想捕获这个机会，因为我已经能够在 react-snap 中实现服务 worker (尽管取得了不同程度的成功)。

这是 GitHub 中 stereobooster 的引用资料: https://github.com/stereobooster/react-snap/blob/master/doc/recipes.md#configure-sw-precache-without-ejecting

您可以在不弹出的情况下配置它。您需要做的是:下载并安装 sw-precache 和 ugfify-js:

  npm install sw-precache uglify-js --save-dev
  or
  yarn add sw-precache uglify-js -D

然后，在您的 package.json 中添加以下条目:(将构建脚本替换为以下内容)

"scripts": {
    "generate-sw": "sw-precache --root=build --config scripts/sw-precache-config.js && uglifyjs build/service-worker.js -o build/service-worker.js",
    "build": "react-scripts build && react-snap && yarn run generate-sw"
}

然后，在根级别(在您的 package.json 旁边)创建一个名为 scripts 的文件夹并添加 sw-precache-config.js 文件。

module.exports = {
  // a directory should be the same as "reactSnap.destination",
  // which default value is `build`
  staticFileGlobs: [
    "build/static/css/*.css",
    "build/static/js/*.js",
    "build/shell.html",
    "build/index.html"
  ],
  stripPrefix: "build",
  publicPath: ".",
  // there is "reactSnap.include": ["/shell.html"] in package.json
  navigateFallback: "/shell.html",
  // Ignores URLs starting from /__ (useful for Firebase):
  // https://github.com/facebookincubator/create-react-app/issues/2237#issuecomment-302693219
  navigateFallbackWhitelist: [/^(?!\/__).*/],
  // By default, a cache-busting query parameter is appended to requests
  // used to populate the caches, to ensure the responses are fresh.
  // If a URL is already hashed by Webpack, then there is no concern
  // about it being stale, and the cache-busting can be skipped.
  dontCacheBustUrlsMatching: /\.\w{8}\./,
  // configuration specific to this experiment
  runtimeCaching: [
    {
      urlPattern: /api/,
      handler: "fastest"
    }
  ]
};

请注意，如果您没有使用应用程序外壳但正在加载整个页面(意味着没有动态内容)，请将其替换为 navigateFallback: "/shell.html"使用 navigateFallback: "/200.html"

这基本上允许您缓存整个页面

您可以在此处查找更多信息: https://github.com/stereobooster/an-almost-static-stack

我建议检查的一件事(我也即将开始该过程)是 workbox-sw .

如果 React-Snap 失败怎么办

error at / TypeError: Cannot read property 'ok' of null

或者

ERROR: The process with PID 38776 (child process of PID 26920) could not be terminated. \node_modules\minimalcss\src\run.js:13:35)Reason: There is no running instance of the task.

您可能会遇到这些臭名昭著的错误。我不知道究竟是什么导致了它们，但我知道它们被提到了 here , 和 here .在这种情况下，删除 build 文件夹，打开一个新的终端窗口，然后重试。

如果问题仍然存在，则分解脚本:

做:

"scripts": {
  "build":  "react-scripts build"
  "postbuild": "react-snap",
  "generate-sw": "sw-precache --root=build --config scripts/sw-precache-config.js && uglifyjs build/service-worker.js -o build/service-worker.js",
}

并尝试独立运行它们。