зарегистрировать работника сервиса с приложением nextjs

Question

Я новичок в nextjs и работаю над небольшим приложением, в котором я хочу предоставить автономную поддержку, но я не смог зарегистрировать работника службы.

выдает Failed to register a ServiceWorker: A bad HTTP response code (404) was received when fetching the script эту ошибку.

следующий мой код ... и мой service-worker.js находится в корне приложения nextjs.

componentDidMount = () => {
    if ("serviceWorker" in navigator) {
        navigator.serviceWorker.register('../service-worker.js')
            .catch(err => console.log('err', err))
    }
}

мне нужносконфигурировать сервер т.е. (server.js) каким-либо образом для обслуживания этого файла ..?

const express = require('express');
const next = require('next');

var routes = require('./router');

const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handle = app.getRequestHandler();

app.prepare()
    .then(() => {
       const server = express();

       server.use('/edit', routes);

       server.get('*', (req, res) => handle(req, res));

       server.listen(3000, (err) => {
        if (err) throw err;
        console.log('http://localhost:3000');
       });
     })
     .catch((ex) => {
        console.log(ex.stack);
        process.exit(1);
    })

если да, то как мне это сделать ..?

структура каталогов показана наСледующая ссылка на изображение. структура каталогов

Answer 1

Для этого вам необходимо предоставить файл service-worker как статический файл.

См. Ссылку здесь , app.serveStatic(req, res, filePath), строка 19.

Выможете посмотреть полный пример здесь .

Answer 2

переместите service-worker.js файл в папку server и добавьте следующую строку

server.use('/service-worker.js', express.static(__dirname + '/service-worker.js'));

в server.js файл.