Итак, на этой неделе я также пытался создать проект, который был «проверен маяком», скажем.
Далее есть действительно хороший каталог примеров .Конкретный пример, которому я следовал, который помог мне настроить это, был next.js / examples / with-sw-precache
Это настройка, аналогичная вашей, только с использованием SWPrecacheWebpackPlugin со стандартной настройкой
Шаг, который, по-видимому, отсутствует, что может быть проблемой, заключается в том, что вы не регистрируете своего сервисного работника.В своем индексном файле вы можете зарегистрировать работника службы в жизненном цикле componentDidMount.
import React from 'react'
export default class extends React.PureComponent {
componentDidMount() {
if ('serviceWorker' in navigator) {
navigator.serviceWorker
.register('/service-worker.js')
.then(registration => {
console.log('service worker registration successful')
})
.catch(err => {
console.warn('service worker registration failed', err.message)
})
}
}
render() {
return <p>Check the console for the Service Worker registration status.</p>
}
}