3

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

我通读了文档，发现它需要一些调整才能与我实施的 Google Analytics 一起使用。

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

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

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

navigateFallback: publicUrl + '/index.html',

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

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

另外，如果我没有根据文档在页面上看到闪烁的负面影响，是否可以省略此步骤，或者它会在其他方面有问题吗？

4

1 回答 1

1

尽管这个问题已有一年多的历史，但我想借此机会，因为我已经能够在 react-snap 中实现服务工作者（尽管取得了不同程度的成功）。

这是 GitHub 中立体声助推器的参考： 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"
    }
  ]
};

请注意，如果您没有使用 app-shell 但正在加载整个页面（意味着没有动态内容），请将其替换navigateFallback: "/shell.html"为navigateFallback: "/200.html"

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

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

我建议检查的一件事（我也即将开始该过程）是workbox-sw。

如果 React-Snap 失败怎么办

/ TypeError 处的错误：无法读取 null 的属性“ok”

或者

错误：无法终止 PID 38776 的进程（PID 26920 的子进程）。\node_modules\minimalcss\src\run.js:13:35) 原因：没有正在运行的任务实例。

您可能会遇到这些臭名昭著的错误。我不知道究竟是什么导致了它们，但我知道它们在这里和这里都有提及。在这种情况下，请删除该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",
}

并尝试独立运行它们。

于 2020-09-07T12:24:14.073 回答