Fatal编程技术网
  • next.js/
  • Next.js PWA错误：清单：行：1，列：1，语法错误

Next.js PWA错误：清单：行：1，列：1，语法错误

next.js

Next.js PWA错误：清单：行：1，列：1，语法错误,next.js,progressive-web-apps,manifest,workbox,Next.js,Progressive Web Apps,Manifest,Workbox,我正在尝试使用WebpackPwaManifest和NextWorkboxPlugin创建Next.js PWA 每当我启动应用程序时，服务人员都会被注册，但它找不到manifest.json 这是我的next.config.js文件，它包含我如何在每个构建上生成清单和服务工作者： const webpack = require('webpack') const path = require('path'); const NextWorkboxPlugin = require('next-wor

我正在尝试使用
WebpackPwaManifest
和
NextWorkboxPlugin
创建
Next.js PWA

每当我启动应用程序时，
服务人员
都会被注册，但它找不到
manifest.json

这是我的
next.config.js
文件，它包含我如何在每个构建上生成
清单
和
服务工作者
：

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
    },
  ...
}
因此，这是预期的工作。。。生成了软件和清单。

但当我运行应用程序时，我会出现以下错误：

GET http://localhost:3000/manifest.json 404 (Not Found)
manifest.json:1 Manifest: Line: 1, column: 1, Syntax error.
我使用next.js
Head
标记将清单包含在_document.tsx中：

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

导出默认类MyDocument扩展文档{
render（）{
返回(

)
}
}
有什么想法吗？提前感谢。

您不生成
manifest.json
，而是生成
manifest..json
。当您没有传递正确的资产URL时，将显示404。您需要将哈希值传递到
href
属性中。@但是哈希值会随着生成而相应更改。。。关于如何将
中的哈希同步到
网页构建ID
有何建议？我已经尝试将
buildId
作为
静态字符串传递，但没有成功。不幸的是，
散列
是必需的，因此没有
散列
我无法生成。通过将
指纹：false
传递到
WebpackPwaManifest
中，成功禁用了文件名中的
散列
。但不幸的是仍然找不到该文件。我移动了
manifest.json
，并将
icons
生成到
public
。。。可能不是最佳解决方案，因为清单是在生成时生成的，但无论如何它都不应更改内容。这是处理网页包哈希的方法：