描述bug

运行一个全新的 create react app 项目并注册服务工作者。使用 yarn build 构建你的应用，并使用 serve -s build 进行服务。在隐身模式下打开一个新的 chrome 标签页。当页面在前10秒内正常提供服务时，当服务工作者激活时，页面突然出现离线消息，导致页面崩溃。

你是否尝试恢复依赖项？

可以使用全新的项目来重现此问题。

在用户指南中你搜索了哪些术语？

https://create-react-app.dev/docs/troubleshooting/ 中的任何故障排除提示都没有帮助。

环境

node -v
v16.11.1
npx -v
6.14.8

重现步骤

首先安装一个全新的项目

npx create-react-app@v5.0.0 my-app --template cra-template-pwa-typescript
cd my-app
yarn install

然后应用这个补丁

diff --git a/src/index.tsx b/src/index.tsx
index e459b13..4a7b0ba 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -15,7 +15,7 @@ ReactDOM.render(
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.
 // Learn more about service workers: https://cra.link/PWA
-serviceWorkerRegistration.unregister();
+serviceWorkerRegistration.register();

 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))

最后构建并提供服务

yarn build
serve -s build

实际行为

尝试在谷歌 Chrome(版本97或更高)上打开一个隐身标签页。页面会加载几秒钟。如果你刷新页面并显示检查器，然后转到 Application 标签页，它将显示恐龙图像。

预期行为

它应该显示 create react app 的主页

可复现的演示

请参阅重现步骤。