progressive-web-apps - 使用 next-pwa 编译 NextJs 时出错 - web loader

Question

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

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

这是错误：

我按照以下教程=> tuto链接

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

谢谢你 ：）

标签： progressive-web-appsnext.jsweb-worker

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],
    ]);