如何处理skipWaiting和延迟加载的资源

时间:2019-10-06 21:42:58

标签: service-worker progressive-web-apps

所以这是我一直在绞尽脑汁的东西,请考虑以下情形:

我正在处理我的项目,将其构建,并且在捆绑包中是一个延迟加载的模块:module-a-[oldhash].js,它将在某个时间点被延迟加载。

一切都很好,花花公子。

我在项目上做了更多工作,创建了一个新的包,进行了部署,现在我的内容哈希已更改:module-a-[newhash].js。我部署并转到页面,服务工作者调用skipWaiting,但是页面仍尝试请求module-a-[oldhash].js,该请求现已不存在。

我该如何处理?我能想到的唯一方法是显示一条“更新可用”消息,该消息将一条skipWaiting消息发布给服务工作者,并在controllerchange事件上重新加载页面。但是我很好奇,如果没有包括这样的通知/吐司模式和重新加载的方法,没有办法实现同一件事。

此外,据我了解,这只会对延迟加载的资源造成问题

我对这些问题的理解正确吗?有哪些常见的处理方式?

1 个答案:

答案 0 :(得分:0)

您所描述的几乎所有内容都是正确的。我只是指出,这是一个问题,不仅涉及使用服务工作者。对于寿命长的单页应用程序,如果尝试延迟加载已被服务器端替换为新部署的URL,则很容易发生这种情况。

在此Paying Attention while Loading Lazily网站和相关视频上收集了有关该问题和潜在解决方案的一些常规信息。

通常,最佳做法是:

  • 始终假定延迟加载可能会失败(无论出于何种原因),并应适当地处理这些失败。一种方法可能是要求用户在遇到故障时重新加载页面。

  • 使用缓存优先服务工作程序可以帮助防止延迟加载失败,但要以延迟更新直到新安装的服务工作程序从waiting移到active为代价。正如您所提到的,最佳实践往往是在用户界面中显示一些信息,以告知用户更新可用,一旦他们选择接受这些更新,postMessage()就会告诉服务人员告诉其调用{ {1}}。最后,监听skipWaiting()事件并在事件触发时调用controllerchange