Question

因此，我的理解是根据其功能“使用即开即用的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。 navigationFallback

此外，如果我没有看到文档中页面闪烁的负面影响，是否可以忽略此步骤，否则在其他方面有问题吗？

Answer 1

尽管这个问题已有一年多的历史了，但我还是想借此机会，因为我已经能够以响应快速的方式实施服务人员（尽管取得了不同程度的成功）。

以下是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失败怎么办

/ TypeError错误：无法读取null的属性'ok'

或

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

您可能会收到这些臭名昭著的错误。我不知道是什么原因造成的，但是我知道它们被提到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",
}

并尝试独立运行它们。

与Create-React-App和服务工作者的React-Snap

1 个答案:

React-Snap失败怎么办