如何使用 Service Worker 识别服务器上的更新?

How to identify updates on the server with service worker?

是否可以识别服务器上的更新,即在页面(HTML)或样式(CSS)上有更新并向服务器发出请求以获取更新的数据?如果是,怎么做?

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

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

不久;

  1. 当您的 Service Worker 脚本更改时,它将设置为在用户使用您的 PWA 联机后立即替换用户拥有的旧脚本。
  2. 您应该反映对 SW 中项目数组的更改。
  3. 您应该更改缓存的名称,并删除旧的缓存。
  4. 因此,您的用户将始终拥有最新版本的应用程序。

详细;

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

你的软件即使是最细微的变化也足以被视为新版本,因此它将接管旧版本。 Google Web Developers 的这句话对此进行了解释;

Update your service worker JavaScript file. When the user navigates to your site, the browser tries to redownload the script file that defined the service worker in the background. If there is even a byte's difference in the service worker file compared to what it currently has, it considers it new.

最佳做法是在您的 SW 中的任何位置保留一个版本号,并在内容更改时以编程方式更新它。它甚至可以被引用,没关系,它仍然有效。请记住:即使一个字节的差异 也足够了。

2) 将您的更改反映到要缓存的项目列表中。

您在您的 SW 中保留要缓存的资产列表。因此,将 added/updated/removed 资产反映到您的列表中。最佳做法是 setting up cache buster 用于您的资产。这是因为 SW 位于浏览器缓存后面 层,可以这么说。

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

在这种情况下,你将有一半的用户使用你的 PWA 和新资产,而另一半则遭受令人难以置信的错误。你会和 over-exposure 一起度过美好的时光,因为无法找到原因或重现这些原因的抱怨和沮丧。

3) 替换你的旧缓存,不要合并它。

如果您不为更新后的资产列表更改缓存的名称,这些资产将与旧资产合并。

合并的方式是保留旧的和删除的资产,同时替换新添加的和更改的资产。虽然这样看起来一切正常,但您将在用户的设备上积累旧资产。

4)大家都很开心

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

因此,我鼓励您一次性设计您的软件。

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

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

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

不过,您可能还想看看 sw-precache 为您执行此操作(例如通过 gulp 任务)