我正在创建一个完全可以离线使用的网站（PWA）。为了演示目的，让我们说，我正在开发keep.google.com。
当我离线并对Redux状态进行一些更改（添加新注释）时，我希望在重新加载页面后将新注释放在那里。
问题是，Service Worker返回缓存的原始响应（它是如何在服务器上生成的），它不包含新添加的注释。
问题：如何使用新的Redux状态更新Service Worker，以便在我离线时页面重新加载后显示新添加的注释？
Devstack ：Webpack，React，Redux。
我正在使用sw-precache-webpack-plugin来生成服务工作者。
条件：由于SEO，我想继续使用内容进行服务器渲染，因此我不会仅从服务器返回app shell。
答案 0 :(得分：0)
如果您仍希望完全离线和服务器渲染，我的建议如下：
localStorage或类似内容在客户端存储所有注释。localStorage。localStorage中的所有注释并重新呈现给用户界面。然后向服务器发送一个额外的请求以获取新添加的注释（可能来自设备）。将它们显示到用户界面并将所有这些新笔记保存到localStorage。这样，在您第一次访问时，您将从服务器端呈现中受益。然后您的页面将被缓存（直到有新的应用程序版本）。
在重复访问时，Service Worker会在第一次访问时返回您的页面（使用旧笔记），但您的应用程序逻辑会检查localStorage中的数据并进行渲染以使页面保持最新状态。< / p>
从其他设备同步备注会有延迟时间，因为我们必须发送一个额外的请求。但我认为这是值得的。