在 next.js + firebase 托管 pwa 应用程序上获取 service-worker 时出现 404 错误答案

【问题标题】：Getting 404 error when fetching service-worker on next.js + firebase hosting pwa app在 next.js + firebase 托管 pwa 应用程序上获取 service-worker 时出现 404 错误
【发布时间】：2018-07-25 12:24:12
【问题描述】：

在 next.js + firebase 托管 pwa 应用上获取 service-worker 时出现 404 错误我正在尝试通过将 service-worker 添加到此存储库中引入的 next.js + firebase 托管应用程序来制作 PWA 应用程序。 https://github.com/zeit/next.js/tree/canary/examples/with-firebase-hosting

但是，虽然它运行到托管，但我在运行 service-worker.js 时遇到了问题。

我认为原因是 service-worker.js 文件的路径，该文件位于 dist/functions/next 文件夹中。所以我尝试了change pass，但我无法解决。

Service worker registration failed, error1:  TypeError: Failed to register a ServiceWorker: A bad HTTP response code (404) was received when fetching the script.

有什么办法可以解决这个问题吗？下面是函数/index.js 文件。

const functions = require('firebase-functions');
const next = require('next');
import * as admin from 'firebase-admin';
const { join } = require('path');
const { parse } = require('url');
const express = require('express');

const routes = require('./routes');

// Region hosting next.js to cloud function

const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev, conf: { distDir: 'next' } });
const handle = routes.getRequestHandler(app);

const server = express();
server.get('*', (req, res) => handle(req, res));
server.get('/service-worker', (req, res) => {
  // try change pass but not worked
  // app.serveStatic(req, res, '_next/service-worker.js'),
  // app.serveStatic(req, res, 'next/service-worker.js');
  // app.serveStatic(req, res, '/service-worker.js');
  // app.serveStatic(req, res, '/next/service-worker.js');

  const filePath = join(__dirname , 'service-worker.js')
  app.serveStatic(req, res, filePath);
});

exports.next = functions.https.onRequest((req, res) => {
  console.log('File: ' + req.originalUrl); // log the page.js file that is being requested

  return app.prepare().then(() => {
    server(req, res);
  });
});

【问题讨论】：

标签： reactjs firebase next.js progressive-web-apps firebase-hosting

【解决方案1】：

我解决了这个问题。我失败的原因是 server.get 方法的顺序，这意味着我应该首先编写 server.get('/service-worker') 然后 servet.get(*)。并且，将文件路径从 join(__dirname , 'service-worker.js') 更改为 'next/service-worker.js')

【讨论】：

【解决方案2】：

https://github.com/hanford/next-offline 似乎是使用 next.js 处理 PWA 的推荐方法。您需要在构建应用程序时指示 workbox 将生成的 service-worker.js 放在公共目录中。

这是一个示例 next.config.js：

const withOffline = require('next-offline')
const config = {
  workboxOpts: {
    swDest: '../public/service-worker.js',
  },
    // rest of your config
}
module.exports = withOffline(config)

【讨论】：