Angular中SwUpdate.activateUpdate()的作用是什么? [英] What is the purpose of SwUpdate.activateUpdate() in Angular?

问题描述

Angular文档提供了以下示例来激活软件更新:

 构造函数(更新:SwUpdate){updates.available.subscribe(event => {如果(promptUser(event)){updates.activateUpdate().then(()=> document.location.reload());}});} 

根据我的观察，调用本身不足以激活新版本，需要重新加载.但是，即使没有调用 activateUpdate()，也只需 document.location.reload()就足够了.

activateUpdate()调用的目的是什么?重新加载就足够了，为什么还要调用它呢?

解决方案

Angular ServiceWorker的幕后工作背景:

• SW总是有一个版本，但可以有多个版本的应用程序.
• 它保留了客户端ID 的映射应用版本，因此它知道要为每个客户端提供哪个版本.
• 找到新版本后，它将下载并标记为最新版本.
• 从那时起，将为新客户(例如新标签)提供该最新版本，但现有客户(标签)仍将获得其先前分配的版本.

此行为与ServiceWorkers通常的工作方式略有不同.它旨在允许向新客户端提供最新版本，但又不会破坏现有客户端(通过向他们提供新内容，而这些新内容并非旨在与他们已经在使用的旧HTML/CSS/JS代码一起使用).

---

现在，返回到 activeUpdate():

这基本上告诉SW将最新版本分配给客户端.操作完成后，客户端的新请求将使用最新的应用程序版本进行处理.这是不安全的，因此建议重新加载页面以确保所有代码都来自新版本.

---

重新加载就足够了吗?

这基本上取决于浏览器如何在重新加载时分配 Client.id .如果浏览器在重新加载时为选项卡分配了新的ID，则SW仍将提供最新版本，因此不需要 swUpdate.activeUpdate().另一方面，如果浏览器保留相同的客户端ID，则SW将提供旧版本而无需 swUpdate.activeUpdate().

当前，Chrome似乎分配了一个新ID(因此，在重新加载之前不需要 activeUpdate()).我在 SW规范中找不到结论性的内容，因此我不确定这是否符合规范以及所有浏览器是否都执行相同操作.(过去，浏览器过去的行为可能也有所不同，因此有必要 activeUpdate()，但是此后规范/浏览器已进行了更新，因此如果您打算重新加载，则变得多余了.)

---

因此，如果您确认支持的浏览器在这方面的行为符合预期，则无需在重新加载之前调用 activeUpdate().

请注意，文档示例只是可用API的简化图示.在真实的应用程序中，有几种处理更新的方法(取决于应用程序的要求).

例如，您可以:

1. 立即激活更新(如果您确定您的应用程序可以处理此更新)，而不重新加载.
2. 显示有关更新可用的通知，并让用户单击以重新加载(并由此更新).
3. 让应用程序知道有可用的更新，并在下一次应用程序内导航时自动将其重新加载.(这就是我们在 https://angular.io/ btw中所做的.)

_{同样，并非所有策略都适用于所有类型的应用程序，因此请选择最适合您的策略.}

---

顺便说一句，如果您对如何改进文档有任何建议，请提出一个问题(或者最好还是提出提起请求)！

Angular documentation provides following example to activate an SW update:

constructor(updates: SwUpdate) {
  updates.available.subscribe(event => {
    if (promptUser(event)) {
        updates.activateUpdate().then(() => document.location.reload());
    }
  });
}

From what I observe, the call itself is not sufficient to activate new version, reload is necessary. However document.location.reload() is sufficient even without activateUpdate() call.

What is the purpose of activateUpdate() call? Why call it at all when reload suffice?

解决方案

Some background on what the Angular ServiceWorker does under the hood:

• There is always one version of the SW, but it can have multiple versions of the app.
• It keeps a mapping of client IDs to app versions, so it knows which version to serve to each client.
• When a new version is found, it downloads it and marks it as the latest version.
• From that point onwards, new clients (e.g. new tabs) will be served that latest version, but existing clients (tabs) will still get their previously assigned version.

This behavior is a little different than how ServiceWorkers usually work. It is designed to allow serving the latest version to new clients, but not break existing ones (by serving them new content that is not designed to work with the older HTML/CSS/JS code they are using already).

---

Now, back to activeUpdate():

This basically tells the SW to assign the latest version to the client. Once the operation completes, new requests from the client will be served with the latest app version. This is not safe, therefore it is recommended to reload the page to ensure that all code comes from the new version.

---

Does simply reloading suffice?

This basically depends on how browsers assign Client.id on reloads. If the browser assigns a new ID to the tab on reload, then the SW will serve the latest version anyway, so swUpdate.activeUpdate() is not necessary. If, on the other hand, the browser keeps the same client ID, then the SW would serve the old version without swUpdate.activeUpdate().

Currently, Chrome seems to assign a new ID (and therefore activeUpdate() is unnecessary before reload). I couldn't find something conclusive in the SW spec, so I am not sure whether this is per the spec and whether all browsers do the same. (It is also possible that browsers used to behave differently in the past, making activeUpdate() necessary, but the spec/browsers have been updated since, making it redundant if you plan to reload.)

---

So, if you verify that your supported browsers behave as expected in that regard, then you don't need to call activeUpdate() before reloading.

Note that the documentation example is just a simplified illustration of the APIs that are available. In a real app, there are several ways to handle the update (depending on the app's requirements).

For example, you could:

1. Activate the update immediatelly (if you are certain that your app can handle that) and not reload.
2. Show a notification that an update is available and let the user click to reload (and thus update).
3. Let the app know that an update is available and have it automatically reload on the next in-app navigation. (This is what we do in https://angular.io/ btw.)

_{Again, not all strategies are suitable for all types of apps, so choose the one that works best for you.}

---

EDIT:
BTW, if you have suggestions on how the documentation could be improved, please open an issue (or better yet submit a pull request)!

这篇关于Angular中SwUpdate.activateUpdate()的作用是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！