向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);
    })

如果是，那我该怎么办..？

目录结构显示在以下图像链接中。 directory structure

Answer 1

您需要将service-worker文件作为静态文件来提供。

请参见参考文献here，app.serveStatic(req, res, filePath)第19行。

您可以查看完整的示例here。

Answer 2

在service-worker.js文件夹中移动server文件并添加以下行

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

在server.js文件中。

Answer 3

在 Nextjs 项目中注册 Service Worker

将 service worker 文件放在 public 目录中。

在您的 _app.js 中写入以下代码：

componentDidMount(){
    if('serviceWorker' in navigator){
            navigator.serviceWorker.register("/firebase-messaging-sw.js");
        }
}