How do I add PWA to a Next.js application?

[mxvsh]

I have once added PWA support to a web application, and this time I followed the same procedure but it didn't work out with NX application.
Can you guys please help me with setting up PWA with a Next.js application?

[fayez-baig]

Hey @vsavkin,

I am also trying to add a PWA. In my Next JS 13 projects within NX
Can we please have some updates on it

[shahidx0x]

I have once added PWA support to a web application, and this time I followed the same procedure but it didn't work out with NX application. Can you guys please help me with setting up PWA with a Next.js application?

this is how i did it

//@ts-check

// eslint-disable-next-line @typescript-eslint/no-var-requires
const { composePlugins, withNx } = require('@nx/next');
const withPWA = require('next-pwa');

/**

• @type {import('@nx/next/plugins/with-nx').WithNxOptions}
  **/
  const nextConfig = {
  nx: {
  svgr: false,
  },
  typescript: {
  ignoreBuildErrors: true,
  },
  images: {
  domains: [
  's3.eu-central-1.amazonaws.com',
  'leanfrontiers.com',
  'jblearning.com',
  'images.unsplash.com',
  ],
  },
  webpack(config, { isServer, dev }) {
  config.experiments = {
  asyncWebAssembly: true,
  layers: true,
  };

  return config;
  },
  };

const plugins = [
withNx,
withPWA({
dest: 'public', // destination folder for the PWA files
disable: true,
register: true, // register the PWA service worker
skipWaiting: true, // skip waiting for service worker to activate
// runtimeCaching: [...] // you can add runtime caching strategies here
runtimeCaching: [
{
urlPattern: /^https?.*/,
handler: 'NetworkFirst',
options: {
cacheName: 'offlineCache',
expiration: {
maxEntries: 200,
},
},
},
],
}),
];

module.exports = composePlugins(...plugins)(nextConfig);