Question

我正在使用create react app和react-snapshot 为我的路线预渲染静态标记。即"/", "/signIn", "/signUp"分别生成index.html, signIn.html, signUp.html。

我面临的问题是，无论我走哪条路线，最初都会为根路由index.html的react-snapshot生成静态"/"，然后提供正确的静态路由文件和然后提供main.js包（请参阅gif）。如果我只是从捆绑的main.js单独提供我的应用程序，那就没问题了。但是由于我想使用静态预生成的html文件，如何在已经拥有静态html文件的某些路由上禁用服务工作者服务index.html。

更新：如果我从create react应用程序中删除服务工作者，该应用程序会加载路径正常的静态文件。但是，我想保留服务工作者的功能以获得PWA功能。

更新2：在chrome browser上，根路由静态标记的快速闪烁仅针对每个路由发生一次。在第一次闪烁后，似乎Chrome浏览器缓存修复了它，另外如果我从chrome dev工具禁用缓存并尝试转到新路由，根路由的闪烁返回。在Firefox browser上存在问题，无论如何，在每条路线上都会改变或刷新根路径的瞬间轻弹，发生静态标记。

如何避免index.html最初在服务工作者的所有路由上呈现而不删除服务工作者。

更详细：

在Service Worker激活后，以下代码将在所有路径的页面源体中呈现：

 <body>
 <script>window.react_snapshot_state = {};</script>
 <noscript>You need to enable JavaScript to run this app.</noscript>
 <div id="root" data-react-checksum="-928641672"><div data-reactroot="" class="sc-cSHVUG hyLStb"><div class="sc-fjdhpX dIRAsX"><ul class="sc-gqjmRU koKaUp"><li><a class="navItemActive sc-VigVT cZrGwO" href="/"><!-- react-text: 6 --> <!-- /react-text --><!-- react-text: 7 -->Home<!-- /react-text --></a></li><li><a class="sc-VigVT cZrGwO" href="/aboutUs/"> About US</a></li><li><a class="sc-VigVT cZrGwO" href="/faq/"> FAQ</a></li></ul><div class="sc-jzJRlG cLytIk"><button class="ui basic circular compact icon button sc-jTzLTM jfwzMH"><i aria-hidden="true" class="user circle icon"></i></button><button class="ui basic circular compact icon button sc-jTzLTM jfwzMH"><i aria-hidden="true" class="add user icon"></i></button></div></div><!-- react-empty: 17 --><div><div style="opacity: 1;"><div class="sc-bdVaJa eRTdVS">Home</div></div></div></div></div><script type="text/javascript" src="/static/js/main.04df5475.js"></script></body>

如果我删除了服务工作者，"/signIn"路由会在页面源代码中呈现以下内容：

<body>
 <script>window.react_snapshot_state = {};</script>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root" data-react-checksum="143569200"><div data-reactroot="" class="sc-cSHVUG hyLStb"><div class="sc-fjdhpX dIRAsX"><ul class="sc-gqjmRU koKaUp"><li><a class="sc-VigVT cZrGwO" href="/"><!-- react-text: 6 --> <!-- /react-text --><!-- react-text: 7 -->Home<!-- /react-text --></a></li><li><a class="sc-VigVT cZrGwO" href="/aboutUs/"> About US</a></li><li><a class="sc-VigVT cZrGwO" href="/faq/"> FAQ</a></li></ul><div class="sc-jzJRlG cLytIk"><button class="ui basic circular compact icon button sc-jTzLTM jfwzMH"><i aria-hidden="true" class="user circle icon"></i></button><button class="ui basic circular compact icon button sc-jTzLTM jfwzMH"><i aria-hidden="true" class="add user icon"></i></button></div></div><!-- react-empty: 17 --><div><div style="opacity: 1;"><div><div class="sc-EHOje bssfxk"><div class="sc-EHOje bssfxk"><form class="ui large warning form sc-ifAKCX ljuaXJ"><div class="field"><label></label><input type="email" placeholder="email" name="email" value=""></div><p class="sc-bxivhb dXOlfT">error</p></form><form class="ui large warning form sc-ifAKCX ljuaXJ"><div class="field"><label></label><input type="password" placeholder="password" name="password" value=""></div><p class="sc-bxivhb dXOlfT">error</p></form></div><p class="sc-dnqmqq ccTWaR"></p><div><div class="sc-gzVnrw cCgvhR"><button class="ui basic button sc-iwsKbI Vfjvd"><!-- react-text: 37 -->Login<!-- /react-text --><!-- react-text: 38 --> <!-- /react-text --></button><div class="sc-gzVnrw cCgvhR"><!-- react-empty: 40 --><div class="ui horizontal divider" style="width: 220px;">Or</div><div class="sc-bZQynM kECAnI"><button class="ui google plus button" style="text-transform: capitalize;"><i aria-hidden="true" class="google icon"></i><!-- react-text: 45 --> Google<!-- /react-text --></button><button class="ui facebook button" style="text-transform: capitalize;"><i aria-hidden="true" class="facebook icon"></i><!-- react-text: 48 --> Facebook<!-- /react-text --></button></div></div></div><div><p class="sc-htoDjs dErAlA">forgot your password ?</p></div></div></div></div></div></div></div></div><script type="text/javascript" src="/static/js/main.04df5475.js"></script><iframe style="display: none;"></iframe>

GiF显示我尝试访问"/signIn"路由，并注意home（"/"路由的静态标记）这个词在{的实际表单之前出现了一会儿{1}}路线渲染。

Answer 1

问题是Service Worker(SW)默认Create React App仅缓存static folder和index.html的内容。来自react-snapshot的我预先呈现的.html文件从未被SW缓存。 SW中的create react app也设置为为所有未知网址提供index.html，因此它提供了根路径"/"静态文件index.html.我解决了这个问题通过更改service-worker.js中的构建命令来覆盖package.json文件，如下所示：

"build": "react-scripts build && react-snapshot && sw-precache --config=sw-precache-config.js"

我的sw-precache-config.js如下所示：

module.exports = {
  staticFileGlobs: [
    './build/**/**.html',
    './build/images/**.*',
    './build/static/**',
  ],
  dontCacheBustUrlsMatching: /\.\w{8}\./,
  swFilePath: './build/service-worker.js',
      // For unknown URLs, fallback to the index page
  navigateFallback: './200.html',
      // Ignores URLs starting from /__ (useful for Firebase):
      // https://github.com/facebookincubator/create-react-app/issues/2237#issuecomment-302693219
  navigateFallbackWhitelist: [/^(?!\/__).*/],
      // Don't precache sourcemaps (they're large) and build asset manifest:
  staticFileGlobsIgnorePatterns: [/\.map$/, /asset-manifest\.json$/],
  stripPrefix: './build'
}

Answer 2

如果您拥有了react-snapshot生成的所有标记的列表，您可以手动为它们设置重写规则，然后为其余部分添加备用规则。

例如

"rewrites": [
  {
    "source": "/signup",
    "destination": "/signup.html"
  },
  {
    "source": "/orders",
    "destination": "/orders.html"
  },
  {
    "source": "**",
    "destination": "/index.html"
  }
]

使用React-Snapshot创建React应用程序预呈现静态文件

2 个答案: