在具有服务器端渲染的 React PWA 中缓存应用程序 shell

caching app shell in a React PWA with Server-Side rendering

所以假设您有一个基于 React 的移动网络应用程序,它利用服务器端呈现的初始视图(出于速度 + SEO 的原因)。没有 "index.html" 文件 - 索引文件是在服务器端动态构建的,并在初始响应中 returned。

现在假设您想向该应用添加 PWA 功能。您连接一个 service worker 来缓存资产等。

PWA 的核心租户之一是他们提供离线体验。假设我们只想在 service worker 检测到用户离线时显示一个刷新页面 "You're offline, click here to refresh"。

google提供的在线示例谈使用App Shell -- 一个静态HTML文件,可以在初次访问时由service worker缓存,并且会成为 "shell" 你的 React 应用程序生活在里面。此 shell 与显示 "offline" 视图有关。

在没有 "shell" html 文件且每个路由可能 return 不同的 index.html 文件的情况下,这如何与服务器端呈现一起工作?

是否有此功能的实际演示或示例?

Any demos or examples of this functionality in the wild?

是的!

查看 sw-precache 中的 https://github.com/GoogleChrome/sw-precache/tree/master/app-shell-demo, which uses the dynamicUrlToDepndencies option 以定义哪些底层资源用于服务器呈现应用程序 Shell HTML.

它生成的 service worker 将负责更新应用 Shell HTML 每当它依赖的任何资源发生变化时。

在此模型中,service worker 将为所有导航请求 return 相同的 App Shell HTML 文档,因此它假设 App Shell HTML 足够通用,可以在运行时通过标准客户端路由逻辑使用与实际 URL 关联的动态内容填充。