TypeError：无法在“ServiceWorkerRegistration”上执行“更新”：非法调用答案

【问题标题】：TypeError: Failed to execute 'update' on 'ServiceWorkerRegistration': Illegal invocationTypeError：无法在“ServiceWorkerRegistration”上执行“更新”：非法调用
【发布时间】：2020-12-30 01:32:20
【问题描述】：

我有一个使用 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)
    }
  })
}

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

【问题讨论】：

@user202729 完成。我从 Airbrake 获得的唯一回溯是错误本身。由于缩小和分块的方式，我没有发现前端回溯非常有用。
好吧，有几个关于Illegal invocation 的问题（每个问题都以不同的方式表现出来）——但是当我把整个 i> 它指向正确的错误消息，所以这个问题可能没那么有用——无论如何，请参阅1 了解有关函数上下文的更多信息。

标签： javascript vue.js progressive-web-apps service-worker

【解决方案1】：

我通过将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/

【讨论】：