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

Question

我构建了一个 VueJS PWA 并使用

register-service-worker

来管理 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
},
...

Answer 1

这个解决方案可能并不适用于所有人，但我在 Quasar 上遇到了类似的问题（这似乎是 OP 正在使用的），原因是 Cloudflare 缓存。最初，我只是在更改时从 Cloudflare 的缓存中清除服务工作线程文件，这适用于我测试的每个浏览器（Safari 除外）。将其更改为在更改后清除整个缓存解决了问题。