使用next-pwa - web加载程序编译NextJs时出错

Question

我的nextJS应用程序运行得很好，但我想通过将其转换为PWA来进一步改进它。

我已经为此安装了Next-pwa包和构建应用程序，但在浏览器中出现错误。

下面是错误：

​

​

我遵循了下面的教程=> tuto link

我是一个使用网络工作者的新手。我想我需要为图像设置一个解决方案，但是我不知道怎么做。

感谢您:)

Answer 1

解决问题的配置：

​

// next.config.js
const withImages = require('next-images');
const withPWA = require('next-pwa');
const withPlugins = require('next-compose-plugins');

module.exports = withPlugins([
    [withPWA, {
    pwa: {
    dest: 'public',
    runtimeCaching: [
        {
        urlPattern: /.(?:eot|otf|ttc|ttf|woff|woff2|font.css)$/i,
        handler: 'NetworkFirst',
        options: {
        cacheName: 'static-font-assets',
        expiration: {
        maxEntries: 4,
        maxAgeSeconds: 7 * 24 * 60 * 60 // 7 days
        }
        }
        },
        {
        urlPattern: /.(?:jpg|jpeg|gif|png|svg|ico|webp)$/i,
        handler: 'NetworkFirst',
        options: {
        cacheName: 'static-image-assets',
        expiration: {
        maxEntries: 64,
        maxAgeSeconds: 24 * 60 * 60 // 24 hours
        }
        }
        },
        {
        urlPattern: /.(?:js)$/i,
        handler: 'NetworkFirst',
        options: {
        cacheName: 'static-js-assets',
        expiration: {
        maxEntries: 16,
        maxAgeSeconds: 24 * 60 * 60 // 24 hours
        }
        }
        },
        {
        urlPattern: /.(?:css|less)$/i,
        handler: 'NetworkFirst',
        options: {
        cacheName: 'static-style-assets',
        expiration: {
        maxEntries: 16,
        maxAgeSeconds: 24 * 60 * 60 // 24 hours
        }
        }
        },
        {
        urlPattern: /.(?:json|xml|csv)$/i,
        handler: 'NetworkFirst',
        options: {
        cacheName: 'static-data-assets',
        expiration: {
        maxEntries: 16,
        maxAgeSeconds: 24 * 60 * 60 // 24 hours
        }
        }
        },
        {
        urlPattern: /.*/i,
        handler: 'NetworkFirst',
        options: {
        cacheName: 'others',
        expiration: {
        maxEntries: 16,
        maxAgeSeconds: 24 * 60 * 60 // 24 hours
        }
        }
        }
        ]
        },
    }],
    [withImages],
    ]);

​