如何使用新的 React/Redux 页面更新 Service Worker 的缓存页面？答案

【问题标题】：How to update Service Worker's cached page with new React/Redux page?如何使用新的 React/Redux 页面更新 Service Worker 的缓存页面？
【发布时间】：2017-05-26 05:41:29
【问题描述】：

我正在创建一个完全可以离线使用的网站 (PWA)。假设出于演示目的，我正在开发keep.google.com。

当我离线并对 Redux 状态进行一些更改（添加新注释）时，我希望在页面重新加载后新注释存在。

问题是，Service Worker 返回缓存的原始响应（它是如何在服务器上生成的），其中不包含新添加的注释。

问题：如何使用新的 Redux 状态更新 Service Worker，以便在我离线时在页面重新加载后显示新添加的注释？

Devstack：Webpack、React、Redux。我使用sw-precache-webpack-plugin 来生成Service Worker。

条件：由于 SEO，我想继续使用带有内容的服务器渲染，所以我不会只从服务器返回 app shell。

【问题讨论】：

标签： reactjs webpack redux service-worker progressive-web-apps

【解决方案1】：

如果您仍然希望完全离线和服务器渲染，这是我的建议：

第 1 步：您应该使用 localStorage 或类似的方式将所有笔记存储在客户端。
第 2 步：每当您创建新笔记时，您还应该将它们添加到您的 localStorage。
第 3 步：当您的应用渲染时，您会读取来自localStorage 的所有注释并重新渲染到 UI。然后向服务器发送一个额外的请求以获取您新添加的笔记（可能来自设备）。将它们显示到 UI 并将所有这些新注释保存到 localStorage。

这样，在您第一次访问时，您就可以从服务器端渲染中受益。然后您的页面将被缓存（直到有新的应用版本）。

在重复访问时，Service Worker 会从第一次访问时返回您的页面（带有旧注释），但您的应用逻辑随后会检查 localStorage 中的数据并呈现它们以使页面保持最新状态。

从其他设备同步笔记会有延迟时间，因为我们必须发送一个额外的请求。但我认为这是值得的。

【讨论】：