即使在重新加载页面后也显示服务人员更新通知

Question

我使用这个众所周知的模式来显示服务工作者更新准备好安装时的通知（此代码进入网页，当然不是服务工作者代码）：

// Register service worker.
let newWorker;
if ('serviceWorker' in navigator) {
    function showUpdateNotification () {
        document.getElementById('updatenotification').style['visibility'] = 'visible';
    };

    window.addEventListener('load', () => {
        navigator.serviceWorker.register('/sw.js').then(registration => {
            console.log('Service worker registered at scope "' + registration.scope + '".');

            // The commented code below is needed to show the notification after a page reload.
            //
            // if (registration.waiting) {
            //     console.log('Service working in skipwaiting state.');
            //     showUpdateNotification();
            // }
            registration.onupdatefound = () => {
                console.log('Service worker update found.');
                console.log('Installing service worker is', registration.installing);
                newWorker = registration.installing;

                newWorker.onstatechange = function () {
                    console.log('Service worker state changed to', newWorker.state);
                    if (newWorker.state == 'installed' && navigator.serviceWorker.controller) {
                        console.log('New service worker is ready to install on refresh.');
                        showUpdateNotification();
                    }
                };
            };
            console.log('Updating service worker.');
            registration.update();
        }).catch(error => console.log('Service worker not registered (' + error +').'))
    })
}

当然，该代码是有效的，因为如果准备好安装新版本的服务辅助角色，它会在网页上显示通知。

问题是，如果在该点重新加载页面，则不再显示通知，因为如果安装了新的服务工作人员并等待激活，则不再触发updatefound事件。

因此，通知只出现一次，当安装了新的服务工作人员并等待激活并开始控制页面时，但是一旦页面重新加载，通知就消失了。

我已经通过使用注释代码解决了这个问题：

// The commented code below is needed to show the notification after a page reload.
//
// if (registration.waiting) {
//     console.log('Service working in skipwaiting state.');
//     showUpdateNotification();
// }

此代码在注册时检查是否有某个服务工作人员处于等待状态，并再次显示通知。

我的问题是：这是正确的吗？我能安全地使用那个“把戏”吗？还是我在自找麻烦？

我是服务人员的新手，所以我不确定我是否能做这种事情。

非常感谢。

Answer 1

嗯，很抱歉自我回复，但我或多或少得到了我需要的，同时处理了所有的案例（至少，我的项目需要的所有案例）。

我认为下面的代码或多或少涵盖了对服务工作者整个生命周期的处理，并且可以用作非非常复杂的样板代码。

我使用来自无数来源的信息设计了这段代码，包括StackOverflow、博客、其他PWA的代码等。不幸的是，我没有写下每一个信息源，所以对此我感到非常抱歉，我想明确我写了下面的代码，但我没有发明它，我使用了其他人的信息和智慧。

谢谢！

if ('serviceWorker' in navigator) {
    window.addEventListener('load', () => {

        let refreshing = false;
        navigator.serviceWorker.addEventListener('controllerchange', () => {
            console.log('New service worker in charge.');
            if (refreshing) return;
            refreshing = true;
            window.location.reload();
        });

        navigator.serviceWorker.register('/sw.js').then(registration => {
            console.log('Service worker registered.');

            // No controller for this page, nothing to do for now.
            if (!navigator.serviceWorker.controller) {
                console.log('No service worker controlling this page.');
            }    

            // A new service worker has been fetched, watch for state changes.
            //
            // This event is fired EVERY TIME a service worker is fetched and
            // succesfully parsed and goes into 'installing' state. This
            // happens, too, the very first time the page is visited, the very
            // first time a service worker is fetched for this page, when the
            // page doesn't have a controller, but in that case there's no new
            // version available and the notification must not appear.
            //
            // So, if the page doesn't have a controller, no notification shown.
            registration.addEventListener('updatefound', function () {
                console.log('New service worker in installing state.');

                registration.installing.onstatechange = function () {
                    console.log('Service worker state changed to', registration.state);
                    if (registration.state == 'installed') {
                        if (!navigator.serviceWorker.controller) {
                            console.log('First install for this service worker.');
                        } else {
                            console.log('New service worker is ready to install on refresh.');
                        }
                    }
                };
            });

            // If a service worker is in 'waiting' state, then maybe the user
            // dismissed the notification when the service worker was in the
            // 'installing' state or maybe the 'updatefound' event was fired
            // before it could be listened, or something like that. Anyway, in
            // that case the notification has to be shown again.
            //
            if (registration.waiting) {
                console.log('Service working in skipwaiting state.');
            }

            // Well, really this should go into a setInterval() call, but I'm
            // including it here to be exhaustive.
            console.log('Updating service worker.');
            registration.update();
        }).catch(error => console.log('Service worker not registered (' + error +').'))
    })
} else {
    console.log('Service workers not supported.');
}