Clash Royale CLAN TAG

Getting 404 error when fetching service-worker on next.js + firebase hosting pwa app

Getting 404 error when fetching service-worker on next.js + firebase hosting pwa app
I am trying to make PWA application by adding service-worker to this next.js + firebase hosting application introduced in this repository.
https://github.com/zeit/next.js/tree/canary/examples/with-firebase-hosting

However, although it runs up to hosting, I am having trouble running service-worker.js.

I think that the cause is path to service-worker.js file, which is in dist/functions/next folder. So I tried change pass, but I cannot solve it.

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


Is there any idea to solve this probrem?
below is the functions/index.js file.

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


1 Answer
1

I solved this problem.
The reason why I fail is the order of server.get method, which means that firstly I should write server.get('/service-worker') then servet.get(*).
And, change file path from join(__dirname , 'service-worker.js') to 'next/service-worker.js')

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.