Recently, I encountered a challenge with my VueJS app that was created using the CLI as a PWA. The issue stemmed from the service worker file, which is outlined below:
/* 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)
}
})
}
The problem arose when I received a
TypeError: Failed to execute 'update' on 'ServiceWorkerRegistration': Illegal invocationsetInterval function while attempting to call registration.update. This interval checks for updates to the app every hour. Despite searching extensively, I could not pinpoint the cause of this issue. Hopefully, sharing this experience will assist others facing a similar predicament.