6

因此，假设您有一个基于 React 的移动 Web 应用程序，它利用服务器端渲染的初始视图（出于速度 + SEO 原因）。没有“index.html”文件——索引文件是在服务器端动态构建的，并在初始响应中返回。

现在假设您想向该应用程序添加 PWA 功能。你连接一个服务工作者来缓存资产等。

PWA 的核心租户之一是它们提供离线体验。假设我们只想显示一个刷新页面，“你离线，点击这里刷新”，当 service worker 检测到用户离线时。

google 提供的在线示例讨论了使用 App Shell —— 一个静态 HTML 文件，服务工作者可以在初次访问时对其进行缓存，这将是您的 react 应用程序所在的“shell”。该外壳与显示“离线”视图有关。

这如何与服务器端渲染一起工作，没有“shell” html 文件，并且每个路由都可能返回不同的 index.html 文件？

在野外有这个功能的演示或示例吗？

4

1 回答 1

4

在野外有这个功能的演示或示例吗？

是的！

看看https://github.com/GoogleChrome/sw-precache/tree/master/app-shell-demo，它使用dynamicUrlToDepndencies选项in来定义哪些底层sw-precache资源用于服务器渲染 App Shell HTML。

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

在此模型中，服务工作者将为所有导航请求返回相同的 App Shell HTML 文档，因此它假定 App Shell HTML 足够通用，可以在运行时通过标准客户端使用与实际 URL 关联的动态内容填充侧路由逻辑。

于 2017-04-26T20:09:26.977 回答