1

I am trying to create a Next.js PWA with WebpackPwaManifest and NextWorkboxPlugin.

Whenever I start the app the service worker is registered but it can't find the manifest.json.

Here is my next.config.js file, it contains how I generate manifest and serviceworker on each build:

const webpack = require('webpack')
const path = require('path');
const NextWorkboxPlugin = require('next-workbox-webpack-plugin');
const WebpackPwaManifest = require('webpack-pwa-manifest');

const { parsed: keys } = require('dotenv').config({
    path: './keys.env'
})

module.exports = {
    webpack(config, { isServer, buildId, dev }) {

         ...
       
        const workboxOptions = {
            clientsClaim: true,
            skipWaiting: true,
            globPatterns: [path.resolve('.next/static/*'), path.resolve('.next/static/commons/*')],
            modifyUrlPrefix: {
                '.next': '_next',
            },
            runtimeCaching: [
                {
                    urlPattern: '/',
                    handler: 'networkFirst',
                    options: {
                        cacheName: 'html-cache',
                    },
                },
                
                ...
            ],
        };

        config.plugins.push(
            new NextWorkboxPlugin({
                buildId,
                ...workboxOptions,
            }),

            new WebpackPwaManifest({
                name: 'appname',
                short_name: 'shortname',
                description: 'desc',
                background_color: '#ffffff',
                crossorigin: 'use-credentials',
                inject: true,
                start_url: "/",
                icons: [
                    {
                        src: path.resolve('./public/images/Iconlogo.svg'),
                        sizes: [96, 128, 192, 256, 384, 512],
                    },
                    {
                        src: path.resolve('./public/images/Iconlogo.svg'),
                        size: '1024x1024'
                    },
                    {
                        src: path.resolve('./public/images/Iconlogo.svg'),
                        size: '1024x1024',
                        purpose: 'maskable'
                    }
                ]
            }));
        return config
    },
  ...
}

So this is working as expected... generated the SW and the manifest as well. Manifest and SW Generation

But when I run the app, I get this error:

GET http://localhost:3000/manifest.json 404 (Not Found)
manifest.json:1 Manifest: Line: 1, column: 1, Syntax error.

I am including manifest in _document.tsx, using next.js Head tags:

export default class MyDocument extends Document {
    render() {
        return (
            <Html lang="en">
                <Head>
                    <link rel="manifest" crossOrigin="use-credentials" href="/manifest.json" />
                </Head>
                < body >
                    <Main />
                    <NextScript />
                </body>
            </Html>
        )
    }
}

Any idea? Thanks in advance.

Nex
  • 92
  • 9
  • You don't generate a `manifest.json`, you generate `manifest..json`. It'll 404 as you're not passing the correct asset URL. You need to pass the hash into the `href` attribute. – rschristian Apr 19 '21 at 01:58
  • @rschristian But the hash is changing accordingly to the build... any suggestion on how can I sync hash in `````` to ```webpack buildId```? I already tried to pass the ```buildId``` as ```static string``` and did not work. Unfortunately, the ```hash``` is required, so I cant generate without the ```hash```. – Nex Apr 19 '21 at 11:44
  • Managed to disable ```hash``` in file names by passing ```fingerprints: false``` into ```WebpackPwaManifest```. But unfortunately still can't find the file. – Nex Apr 19 '21 at 11:58
  • I moved ```manifest.json``` and generated ```icons``` into ```public```... Might not be the best solution as manifest is generated on the build, but it should not change content anyway. – Nex Apr 19 '21 at 12:52
  • This is how you handle Webpack hashes: https://stackoverflow.com/questions/50228128/how-to-inject-webpack-build-hash-to-application-code – rschristian Apr 21 '21 at 07:13

0 Answers0