Safari 浏览器始终会看到未更改的 Service Worker 的更新

Question

我构建了一个 VueJS PWA 并用于register-service-worker管理服务工作者。我已经构建了该应用程序，因此当访问新路线时，它会手动检查服务工作人员的更新。如果有更新，它会显示提醒用户刷新。

但是，我在 Safari（MacOS 和 iOS）中遇到问题。虽然更新代码工作正常，但在 Safari 中访问 Web 应用程序时，每次路线更改时似乎都会不断触发“可用更新”警报，并且刷新似乎无法解决问题。就好像 Service Worker 没有在本地更新一样，即使 Web 应用程序显示了最新的更改。

这是手动检查路线更改的代码：

router.beforeEach((to, from, next) => {

    navigator.serviceWorker.getRegistration(`${process.env.BASE_URL}service-worker.js`).then(reg => {
        // check for updates to the service working on change of route
        reg.update();
    });
});

registerServiceWorker.js然后，我在updated触发自定义事件的部分中进行了应用程序可以侦听的服务工作人员的更新：

/* eslint-disable no-console */

import { register } from 'register-service-worker'

if (process.env.NODE_ENV === 'production') {
  register(`${process.env.BASE_URL}service-worker.js`, {
    ready () {
      console.log(
        'App is being served from cache by a service worker.\n' 
      )
    },
    registered () {
      console.log('Service worker has been registered.')
    },
    cached () {
      console.log('Content has been cached for offline use.')
    },
    updatefound () {
      console.log('New content is downloading.')
    },
    updated (registration) {
        console.log('New content is available; please refresh.')
        document.dispatchEvent(
            new CustomEvent('swUpdated', { detail: registration })
        )
    },
    offline () {
      console.log('No internet connection found. App is running in offline mode.')
    },
    error (error) {
      console.error('Error during service worker registration:', error)
    }
  })
}

然后，我的 vue 应用程序会侦听“swUpdated”，并在有新的服务工作线程时向用户显示提醒以刷新浏览器。

...
document.addEventListener('swUpdated', this.updateAvailable, { once: true })
...
updateAvailable(event) {

   this.registration = event.detail
   this.showReloadDialog = true
},
...