如何使用服务工作者识别服务器上的更新？

Question

是否可以识别服务器上的更新，页面上有更新（HTML）或样式（CSS），并向服务器发出请求以获取更新数据？如果是这样，怎么样？

Answer 1

<强>不久;

1. 当您的服务工作者脚本发生更改时，它将设置为在用户使用您的PWA联机后立即替换旧用户。
2. 您应该反映对SW中的项目数组的更改。
3. 您应该更改缓存的名称，然后删除旧缓存。
4. 因此，您的用户将始终拥有最新版本的应用。

详细信息;

1）更改您的SW以替换当前拥有的用户。

即使是SW中的最轻微变化也足以将其视为新版本，因此它将接管旧版本。来自Google Web Developers的引用解释了它;

  

更新服务工作者JavaScript文件。当用户导航到   您的网站，浏览器会尝试重新下载该脚本文件   在后台定义了服务工作者。如果有甚至一个   字节在服务工作文件中的差异与它相比   目前，它认为它是新的。

最佳做法是在SW中的任何位置保留版本号，并在内容更改时以编程方式更新。它甚至可以引用，无所谓，它仍然可以工作。请记住：甚至一个字节的差异就足够了。

2）反映您对要缓存的项目列表的更改。

您保留要在SW中缓存的资产列表。因此，将添加/更新/删除的资产反映到列表中。对于您的资产，最佳做法是setting up cache buster。这是因为SW位于浏览器缓存后面的层，可以这么说。

换句话说：从SW 获取请求通过浏览器缓存。因此，SW将从浏览器缓存而不是服务器中选择 new 资产，并在SW再次更改之前缓存这些资产。

在这种情况下，您的一半用户会使用您的PWA使用新资产，而另一半则遭受不可思议的错误。而且你会因为过度接触投诉和无法找到原因而感到沮丧或者重现这些原因的方式而度过美好的时光。

3）替换旧缓存，不要合并。

如果您没有为更新的资产列表更改缓存的名称，那么这些资产将与旧资源合并。

合并将以旧的和已删除的资产将被保留的方式发生，而新的资产将被添加，更改的资产将被替换。虽然事情看起来似乎没有问题，但您将在用户的设备上积累旧资产。 And space you are storing is not infinite.

4）每个人都很高兴

实施和跟踪所提到的所有事情可能看起来很乏味但是我向你保证，否则你将开始有更多的方式和更令人不愉快的事情来处理。不满意的用户将是一个很好的加分。

所以我鼓励你一次性设计你的SW。

Answer 2

是的，可以通过使服务工作者中的缓存无效来实现：

https://developers.google.com/web/fundamentals/getting-started/primers/service-workers#update-a-service-worker

另请注意，目前有一个开放的issue和Service worker JavaScript update frequency (every 24 hours?)，因为浏览器缓存可能无法更新服务工作者。

但是你可能还想看一下sw-precache为你做这件事（例如通过gulp任务）

Answer 3

查看LiveJS以动态更新css 我相信他们使用的解决方案是将带有时间戳的get参数添加到css或html页面：/css/style.css?time=1234并计算结果的哈希值。如果自上次验证后哈希值发生了变化，请更新CSS，否则请继续查看。

可以从HTML构建类似的实现，但我还没有看到任何类似的项目。如果要自动更新页面中的数据，您应该查看Ajax。