新更新可用消息和 post 操作

Question

我有这段代码可以检查 service worker 的变化

if ("serviceWorker" in navigator) {
    window.addEventListener("load", function() {
        navigator.serviceWorker.register(worker).then(function(reg) {
            reg.onupdatefound = function() {
                var installingWorker = reg.installing;

                installingWorker.onstatechange = function() {
                    switch (installingWorker.state) {
                        case 'installed':
                            if (navigator.serviceWorker.controller) {
                                console.log('New or updated content is available.');
                            } else {
                                console.log('Content is now available offline!');
                            }
                            break;
                    }
                };
            };
        }).catch(function(e) {
            console.error('Error during service worker registration:', e);
        });
    })
}

看了很多文档才知道，安装的app重新打开后，版本才会更新。是否有任何 javascript 事件来重新加载或重新打开已安装的应用程序，以便我可以在更新可用时显示一个按钮以供单击。

Answer 1

如果您使用的 Service Worker 积极预缓存版本化 URL，并且仅提供与实际 Service Worker 关联的每个 URL 的版本，那么您需要告诉新的，“waiting" service worker to "skip waiting”并在新的缓存响应集生效之前激活。一旦新的 service worker 跳过等待，您会想要重新加载所有打开的客户端，以便它们获得新资源。

这需要页面 JavaScript 之间的协调以及向您的服务工作者添加 message 处理程序。可以在 Workbox 文档中找到一个 recipe 来处理这种协调。（即使您没有使用 Workbox 进行预缓存，也可以使用它。）

新更新可用消息和 post 操作

New update available message and post action

progressive-web-apps

service-worker