类型错误：无法在“ServiceWorkerRegistration”上执行“更新”：非法调用

如何解决类型错误：无法在“ServiceWorkerRegistration”上执行“更新”：非法调用

我有一个使用 CLI 作为 PWA 创建的 VueJS 应用程序。我的 Service Worker 文件如下所示：

/* 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' +
          'For more details,visit https://<google-link>'
      )
    },registered(registration) {
      console.log('Service worker has been registered.')
      setInterval(registration.update,1000 * 60 * 60)
    },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)
    }
  })
}

当调用 TypeError: Failed to execute 'update' on 'ServiceWorkerRegistration': Illegal invocation 时，我在 setInterval 中收到 registration.update 错误。此时间间隔每小时检查一次 Web 应用程序是否有任何更新。我到处搜索，但找不到导致此问题的原因，因此我创建此文件是为了帮助其他可能遇到相同问题的人。

解决方法

我通过将 registration.update 包装在一个函数中解决了这个问题：

 registered(registration) {
      console.log('Service worker has been registered.')
      setInterval(() => {
        console.log('Checking for service worker update.')
        registration.update()
      },1000 * 60 * 60)
    },

感谢此页面帮助我解决了这个问题：https://www.kaels-kabbage.com/post/service-worker-updates/